WIP

frontend/components/Editor/components/BlockInsert.js

@@ -7,7 +7,7 @@ import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import { color } from 'styles/constants';
-import Icon from 'components/Icon';
+import PlusIcon from 'components/Icon/PlusIcon';
 import BlockMenu from 'menus/BlockMenu';
 import type { State } from '../types';
 
@@ -151,7 +151,7 @@ export default class BlockInsert extends Component {
             accept="image/*"
           />
           <BlockMenu
-            label={<Icon type="PlusCircle" />}
+            label={<PlusIcon />}
             onPickImage={this.onPickImage}
             onInsertList={ev =>
               this.insertBlock(ev, {
@@ -183,11 +183,10 @@ const Trigger = styled.div`
   z-index: 1;
   opacity: 0;
   background-color: ${color.white};
-  border-radius: 4px;
   transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
   line-height: 0;
-  height: 16px;
-  width: 16px;
+  margin-top: -2px;
+  margin-left: -4px;
   transform: scale(.9);
 
   ${({ active }) => active && `

frontend/components/Editor/components/Toolbar/Toolbar.js

@@ -144,7 +144,7 @@ const Menu = styled.div`
   top: -10000px;
   left: -10000px;
   opacity: 0;
-  background-color: #222;
+  background-color: #2F3336;
   border-radius: 4px;
   transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
   line-height: 0;

frontend/components/Editor/components/Toolbar/components/DocumentResult.js

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { fontWeight, color } from 'styles/constants';
 import Document from 'models/Document';
-import Icon from 'components/Icon';
+import GoToIcon from 'components/Icon/GoToIcon';
 
 type Props = {
   innerRef?: Function,
@@ -14,7 +14,7 @@ type Props = {
 function DocumentResult({ document, ...rest }: Props) {
   return (
     <ListItem {...rest} href="">
-      <i><Icon type="ChevronRight" light /></i>
+      <i><GoToIcon light /></i>
       {document.title}
     </ListItem>
   );

frontend/components/Editor/components/Toolbar/components/FormattingToolbar.js

@@ -1,5 +1,6 @@
 // @flow
 import React, { Component } from 'react';
+import styled from 'styled-components';
 import type { State } from '../../../types';
 import ToolbarButton from './ToolbarButton';
 import BoldIcon from 'components/Icon/BoldIcon';
@@ -10,7 +11,7 @@ import ItalicIcon from 'components/Icon/ItalicIcon';
 import LinkIcon from 'components/Icon/LinkIcon';
 import StrikethroughIcon from 'components/Icon/StrikethroughIcon';
 
-export default class FormattingToolbar extends Component {
+class FormattingToolbar extends Component {
   props: {
     state: State,
     onChange: Function,
@@ -92,9 +93,11 @@ export default class FormattingToolbar extends Component {
         {this.renderMarkButton('bold', BoldIcon)}
         {this.renderMarkButton('italic', ItalicIcon)}
         {this.renderMarkButton('deleted', StrikethroughIcon)}
+        {this.renderMarkButton('code', CodeIcon)}
+        <Separator />
         {this.renderBlockButton('heading1', Heading1Icon)}
         {this.renderBlockButton('heading2', Heading2Icon)}
-        {this.renderMarkButton('code', CodeIcon)}
+        <Separator />
         <ToolbarButton onMouseDown={this.onCreateLink}>
           <LinkIcon light />
         </ToolbarButton>
@@ -102,3 +105,14 @@ export default class FormattingToolbar extends Component {
     );
   }
 }
+
+const Separator = styled.div`
+  height: 100%;
+  width: 1px;
+  background: #FFF;
+  opacity: .2;
+  display: inline-block;
+  margin-left: 10px;
+`;
+
+export default FormattingToolbar;