Merge pull request #212 from jorilallo/icons

New Icons

frontend/assets/icons/menu.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M18.7,27.5h62.7c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5H18.7c-2.5,0-4.5,2-4.5,4.5S16.2,27.5,18.7,27.5z"/><path d="M81.4,45.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,45.5,81.4,45.5z"/><path d="M81.4,72.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,72.5,81.4,72.5z"/></g></svg>

frontend/assets/icons/search.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 40 50" enable-background="new 0 0 40 40" xml:space="preserve"><g><path fill="#000000" d="M35.9,39.3l-12-12c-0.9-0.9-0.9-2.5,0-3.4l0,0c0.9-0.9,2.5-0.9,3.4,0l12,12c0.9,0.9,0.9,2.5,0,3.4l0,0   C38.3,40.2,36.8,40.2,35.9,39.3z"/><path fill="#000000" d="M4.7,4.7c-6.2,6.2-6.2,16.3,0,22.5s16.3,6.2,22.5,0s6.2-16.3,0-22.5S10.9-1.6,4.7,4.7z M23.8,24   c-4.3,4.3-11.4,4.3-15.7,0s-4.3-11.4,0-15.7s11.4-4.3,15.7,0S28.1,19.6,23.8,24z"/></g></svg>

frontend/components/Button/Button.js

@@ -1,17 +1,18 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { size, color } from 'styles/constants';
-import { darken } from 'polished';
+import { color } from 'styles/constants';
+import { darken, lighten } from 'polished';
 
 const RealButton = styled.button`
   display: inline-block;
-  margin: 0 ${size.medium} ${size.large} 0;
+  margin: 0;
   padding: 0;
   border: 0;
-  background: ${props => (props.neutral ? color.slate : props.danger ? color.danger : color.primary)};
+  background: ${color.primary};
   color: ${color.white};
   border-radius: 4px;
+  font-size: 15px;
   min-width: 32px;
   min-height: 32px;
   text-decoration: none;
@@ -23,30 +24,70 @@ const RealButton = styled.button`
     border: 0;
   }
   &:hover {
-    background: ${props => darken(0.05, props.neutral ? color.slate : props.danger ? color.danger : color.primary)};
+    background: ${darken(0.05, color.primary)};
   }
+
+  svg {
+    position: relative;
+    top: .05em;
+  }
+
+  ${props => props.light && `
+    color: ${color.text};
+    background: ${lighten(0.08, color.slateLight)};
+
+    &:hover {
+      background: ${color.slateLight};
+    }
+  `}
+
+  ${props => props.neutral && `
+    background: ${color.slate};
+
+    &:hover {
+      background: ${darken(0.05, color.slate)};
+    }
+  `}
+
+  ${props => props.danger && `
+    background: ${color.danger};
+
+    &:hover {
+      background: ${darken(0.05, color.danger)};
+    }
+  `}
+
   &:disabled {
     background: ${color.slateLight};
   }
 `;
 
 const Label = styled.span`
-  padding: 4px 16px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-weight: 500;
+
+  ${props => props.hasIcon && 'padding-left: 2px;'}
 `;
 
 const Inner = styled.span`
+  padding: 4px 16px;
   display: flex;
   line-height: 28px;
   justify-content: center;
+  align-items: center;
+
+  ${props => props.small && `
+    padding: 1px 10px;
+  `}
+
+  ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')}
 `;
 
 export type Props = {
   type?: string,
   value?: string,
+  small?: boolean,
   icon?: React$Element<any>,
   className?: string,
   children?: React$Element<any>,
@@ -56,6 +97,7 @@ export default function Button({
   type = 'text',
   icon,
   children,
+  small,
   value,
   ...rest
 }: Props) {
@@ -64,9 +106,9 @@ export default function Button({
 
   return (
     <RealButton {...rest}>
-      <Inner>
+      <Inner hasIcon={hasIcon} small={small}>
         {hasIcon && icon}
-        {hasText && <Label>{children || value}</Label>}
+        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
       </Inner>
     </RealButton>
   );

frontend/components/Collaborators/Collaborators.js

@@ -36,7 +36,6 @@ const Collaborators = function({ document }: { document: Document }) {
 
 const Avatars = styled(Flex)`
   flex-direction: row-reverse;
-  margin-right: 10px;
   height: 26px;
 `;
 

frontend/components/DocumentPreview/DocumentPreview.js

@@ -5,8 +5,8 @@ import { Link } from 'react-router-dom';
 import Document from 'models/Document';
 import styled from 'styled-components';
 import { color } from 'styles/constants';
+import Icon from 'components/Icon';
 import PublishingInfo from './components/PublishingInfo';
-import StarIcon from 'components/Icon/StarIcon';
 
 type Props = {
   document: Document,
@@ -15,17 +15,13 @@ type Props = {
   innerRef?: Function,
 };
 
-const StyledStar = styled(StarIcon)`
-  top: 2px;
-  position: relative;
+const StyledStar = styled(Icon).attrs({
+  type: 'Star',
+  color: color.text,
+})`
   margin-left: 4px;
   opacity: ${props => (props.solid ? '1 !important' : 0)};
   transition: opacity 100ms ease-in-out;
-
-  svg {
-    width: 1em;
-    height: 1em;
-  }
 `;
 
 const DocumentLink = styled(Link)`
@@ -46,7 +42,7 @@ const DocumentLink = styled(Link)`
     outline: none;
 
     ${StyledStar} {
-      opacity: .25;
+      opacity: .5;
 
       &:hover {
         opacity: 1;
@@ -87,8 +83,12 @@ const DocumentLink = styled(Link)`
         <h3>
           {document.title}
           {document.starred
-            ? <a onClick={this.unstar}><StyledStar solid /></a>
-            : <a onClick={this.star}><StyledStar /></a>}
+            ? <a onClick={this.unstar}>
+                <StyledStar solid />
+              </a>
+            : <a onClick={this.star}>
+                <StyledStar />
+              </a>}
         </h3>
         <PublishingInfo
           document={document}

frontend/components/DropdownMenu/DropdownMenu.js

@@ -64,9 +64,8 @@ const Label = styled(Flex).attrs({
   justify: 'center',
   align: 'center',
 })`
-  cursor: pointer;
   z-index: 1000;
-  min-height: 43px;
+  cursor: pointer;
 `;
 
 const MenuContainer = styled.div`

frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js

@@ -1,16 +0,0 @@
-// @flow
-import React from 'react';
-
-import styles from './MoreIcon.scss';
-
-const MoreIcon = () => {
-  return (
-    <img
-      alt="More"
-      src={require('./assets/more.svg')}
-      className={styles.icon}
-    />
-  );
-};
-
-export default MoreIcon;

frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.scss

@@ -1,4 +0,0 @@
-.icon {
-  width: 21px;
-  margin-top: 6px;
-}

frontend/components/DropdownMenu/components/MoreIcon/assets/more.svg

@@ -1 +0,0 @@
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="M 17 41 C 12.029437 41 8 45.029437 8 50 C 8 54.970563 12.029437 59 17 59 C 21.970563 59 26 54.970563 26 50 C 26 45.029437 21.970563 41 17 41 z M 50 41 C 45.029437 41 41 45.029437 41 50 C 41 54.970563 45.029437 59 50 59 C 54.970563 59 59 54.970563 59 50 C 59 45.029437 54.970563 41 50 41 z M 83 41 C 78.029437 41 74 45.029437 74 50 C 74 54.970563 78.029437 59 83 59 C 87.970563 59 92 54.970563 92 50 C 92 45.029437 87.970563 41 83 41 z " transform="translate(0,952.36218)" fill="#000000" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g></svg>

frontend/components/DropdownMenu/components/MoreIcon/index.js

@@ -1,3 +0,0 @@
-// @flow
-import MoreIcon from './MoreIcon';
-export default MoreIcon;

frontend/components/DropdownMenu/index.js

@@ -1,4 +1,2 @@
 // @flow
-import { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
-import MoreIcon from './components/MoreIcon';
-export { DropdownMenu, DropdownMenuItem, MoreIcon };
+export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';

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

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import type { State } from '../../../types';
 import keydown from 'react-keydown';
 import styles from '../Toolbar.scss';
-import CloseIcon from 'components/Icon/CloseIcon';
+import Icon from 'components/Icon';
 
 @keydown
 export default class LinkToolbar extends Component {
@@ -58,7 +58,7 @@ export default class LinkToolbar extends Component {
           autoFocus
         />
         <button className={styles.button} onMouseDown={this.removeLink}>
-          <CloseIcon light />
+          <Icon type="X" light />
         </button>
       </span>
     );

frontend/components/Icon/AddIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function AddIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/CheckIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function CheckIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/CloseIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function CloseIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/Icon.js

@@ -1,9 +1,11 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+import * as Icons from 'react-feather';
 
 export type Props = {
   className?: string,
+  type?: string,
   light?: boolean,
 };
 
@@ -11,16 +13,40 @@ type BaseProps = {
   children?: React$Element<any>,
 };
 
-export default function Icon({ children, ...rest }: Props & BaseProps) {
+export default function Icon({
+  children,
+  light,
+  type,
+  ...rest
+}: Props & BaseProps) {
+  if (type) {
+    children = React.createElement(Icons[type], {
+      size: '1em',
+      color: light ? '#FFFFFF' : undefined,
+      ...rest,
+    });
+
+    return (
+      <FeatherWrapper {...rest}>
+        {children}
+      </FeatherWrapper>
+    );
+  }
+
   return (
-    <Wrapper {...rest}>
+    <Wrapper light={light} {...rest}>
       {children}
     </Wrapper>
   );
 }
 
+const FeatherWrapper = styled.span`
+  position: relative;
+  top: .1em;
+`;
+
 const Wrapper = styled.span`
   svg {
-    fill: ${props => (props.light ? '#fff' : '#000')};
+    fill: ${props => (props.light ? '#FFF' : '#000')}
   }
 `;

frontend/components/Icon/Icon.scss

@@ -1,9 +0,0 @@
-.icon {
-
-}
-
-.light {
-  svg {
-    fill: #fff;
-  }
-}

frontend/components/Icon/MoreIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function MoreIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/QuoteIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function QuoteIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/StarIcon.js

@@ -1,43 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function StarIcon(props: Props & { solid?: boolean }) {
-  let icon;
-
-  if (props.solid) {
-    icon = (
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    );
-  } else {
-    icon = (
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    );
-  }
-
-  return (
-    <Icon {...props}>
-      {icon}
-    </Icon>
-  );
-}

frontend/components/Layout/Layout.js

@@ -16,8 +16,7 @@ import Avatar from 'components/Avatar';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
 import Modal from 'components/Modal';
-import AddIcon from 'components/Icon/AddIcon';
-import MoreIcon from 'components/Icon/MoreIcon';
+import Icon from 'components/Icon';
 import CollectionNew from 'scenes/CollectionNew';
 import CollectionEdit from 'scenes/CollectionEdit';
 import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
@@ -156,17 +155,23 @@ type Props = {
               <Flex column>
                 <Scrollable>
                   <LinkSection>
-                    <SidebarLink to="/dashboard">Home</SidebarLink>
-                    <SidebarLink to="/search">Search</SidebarLink>
-                    <SidebarLink to="/starred">Starred</SidebarLink>
+                    <SidebarLink to="/dashboard">
+                      <Icon type="Home" /> Home
+                    </SidebarLink>
+                    <SidebarLink to="/search">
+                      <Icon type="Search" /> Search
+                    </SidebarLink>
+                    <SidebarLink to="/starred">
+                      <Icon type="Star" /> Starred
+                    </SidebarLink>
                   </LinkSection>
                   <LinkSection>
                     {collections.active
                       ? <CollectionAction onClick={this.handleEditCollection}>
-                          <MoreIcon />
+                          <Icon type="MoreHorizontal" />
                         </CollectionAction>
                       : <CollectionAction onClick={this.handleCreateCollection}>
-                          <AddIcon />
+                          <Icon type="PlusCircle" />
                         </CollectionAction>}
                     {collections.active
                       ? <SidebarCollection
@@ -229,19 +234,13 @@ type Props = {
 
 const CollectionAction = styled.a`
   position: absolute;
-  top: -2px;
+  top: -4px;
   right: ${layout.hpadding};
-
-  svg {
-    opacity: .35;
-    width: 16px;
-    height: 16px;
-  }
+  color: ${color.slate};
+  svg { opacity: .75; }
 
   &:hover {
-    svg {
-      opacity: 1;
-    }
+    svg { opacity: 1; }
   }
 `;
 

frontend/components/Layout/components/HeaderAction/HeaderAction.js

@@ -1,16 +0,0 @@
-// @flow
-import React from 'react';
-
-import styles from './HeaderAction.scss';
-
-type Props = { onClick?: ?Function, children?: ?React.Element<any> };
-
-const HeaderAction = (props: Props) => {
-  return (
-    <div onClick={props.onClick} className={styles.container}>
-      {props.children}
-    </div>
-  );
-};
-
-export default HeaderAction;

frontend/components/Layout/components/HeaderAction/HeaderAction.scss

@@ -1,11 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 43px;
-  padding: 0 0.5rem;
-
-  a {
-    color: #171B35;
-  }
-}

frontend/components/Layout/components/HeaderAction/index.js

@@ -1,3 +0,0 @@
-// @flow
-import HeaderAction from './HeaderAction';
-export default HeaderAction;

frontend/components/Layout/components/SidebarCollection/SidebarCollection.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
-import { layout } from 'styles/constants';
+import { color, layout } from 'styles/constants';
 import SidebarLink from '../SidebarLink';
 import DropToImport from 'components/DropToImport';
 
@@ -18,8 +18,8 @@ type Props = {
 };
 
 const activeStyle = {
-  color: '#000',
-  background: '#E1E1E1',
+  color: color.black,
+  background: color.slateDark,
 };
 
 @observer class SidebarCollection extends React.Component {
@@ -72,7 +72,7 @@ const Header = styled(Flex)`
   font-size: 11px;
   font-weight: 500;
   text-transform: uppercase;
-  color: #9FA6AB;
+  color: ${color.slate};
   letter-spacing: 0.04em;
   padding: 0 ${layout.hpadding};
 `;

frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { observer, inject } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
-import { layout } from 'styles/constants';
+import { color, layout, fontWeight } from 'styles/constants';
 
 import SidebarLink from '../SidebarLink';
 import DropToImport from 'components/DropToImport';
@@ -16,8 +16,8 @@ type Props = {
 };
 
 const activeStyle = {
-  color: '#000',
-  background: '#E1E1E1',
+  color: color.black,
+  background: color.slateDark,
 };
 
 const SidebarCollectionList = observer(({ history, collections }: Props) => {
@@ -42,9 +42,9 @@ const SidebarCollectionList = observer(({ history, collections }: Props) => {
 
 const Header = styled(Flex)`
   font-size: 11px;
-  font-weight: 500;
+  font-weight: ${fontWeight.semiBold};
   text-transform: uppercase;
-  color: #9FA6AB;
+  color: ${color.slate};
   letter-spacing: 0.04em;
   padding: 0 ${layout.hpadding};
 `;

frontend/components/Layout/components/SidebarLink/SidebarLink.js

@@ -1,26 +1,28 @@
 // @flow
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { layout, color } from 'styles/constants';
-import { darken } from 'polished';
+import { layout, color, fontWeight } from 'styles/constants';
 import styled from 'styled-components';
 
 const activeStyle = {
-  color: '#000000',
+  color: color.black,
+  fontWeight: fontWeight.semiBold,
 };
 
 function SidebarLink(props: Object) {
-  return <StyledNavLink exact {...props} activeStyle={activeStyle} />;
+  return <StyledNavLink exact activeStyle={activeStyle} {...props} />;
 }
 
 const StyledNavLink = styled(NavLink)`
   display: block;
-  padding: 5px ${layout.hpadding};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 5px ${layout.hpadding};
   color: ${color.slateDark};
   font-size: 15px;
 
   &:hover {
-    color: ${darken(0.1, color.slateDark)};
+    color: ${color.text};
   }
 `;
 

frontend/components/Layout/index.js

@@ -1,8 +1,7 @@
 // @flow
 import Layout from './Layout';
 import Title from './components/Title';
-import HeaderAction from './components/HeaderAction';
 
 export default Layout;
 
-export { Title, HeaderAction };
+export { Title };

frontend/components/Modal/Modal.js

@@ -2,9 +2,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
+import { color } from 'styles/constants';
 import { fadeAndScaleIn } from 'styles/animations';
-
-import CloseIcon from 'components/Icon/CloseIcon';
+import Icon from 'components/Icon';
 import Flex from 'components/Flex';
 
 type Props = {
@@ -32,7 +32,7 @@ const Modal = ({
     >
       <Content column>
         {title && <h1>{title}</h1>}
-        <Close onClick={onRequestClose}><CloseIcon /></Close>
+        <Close onClick={onRequestClose}><Icon type="X" size={32} /></Close>
         {children}
       </Content>
     </StyledModal>
@@ -68,6 +68,7 @@ const Close = styled.a`
   top: 3rem;
   right: 3rem;
   opacity: .5;
+  color: ${color.text};
 
   &:hover {
     opacity: 1;

frontend/scenes/Document/Document.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import Flex from 'components/Flex';
-import { layout } from 'styles/constants';
+import { color, layout } from 'styles/constants';
 
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
@@ -15,7 +15,6 @@ import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import Editor from 'components/Editor';
 import DropToImport from 'components/DropToImport';
-import { HeaderAction } from 'components/Layout';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
@@ -104,6 +103,11 @@ type Props = {
     this.props.history.push(url);
   };
 
+  onClickNew = () => {
+    if (!this.document) return;
+    this.props.history.push(`${this.document.collection.url}/new`);
+  };
+
   onSave = async (redirect: boolean = false) => {
     if (this.document && !this.document.allowSave) return;
     let document = this.document;
@@ -215,13 +219,22 @@ type Props = {
                           }
                           isNew={!!isNew}
                         />
-                      : <a onClick={this.onClickEdit}>Edit</a>}
+                      : <a onClick={this.onClickEdit}>
+                          Edit
+                        </a>}
+                  </HeaderAction>
+                  <HeaderAction>
+                    {isEditing
+                      ? <a onClick={this.onCancel}>Cancel</a>
+                      : <Menu document={document} />}
+                  </HeaderAction>
+                  {!isEditing && <Separator />}
+                  <HeaderAction>
+                    {!isEditing &&
+                      <a onClick={this.onClickNew}>
+                        New
+                      </a>}
                   </HeaderAction>
-                  {isEditing &&
-                    <HeaderAction>
-                      <a onClick={this.onCancel}>Cancel</a>
-                    </HeaderAction>}
-                  {!isEditing && <Menu document={document} />}
                 </Flex>
               </Meta>
             </Flex>
@@ -231,6 +244,32 @@ type Props = {
   }
 }
 
+const Separator = styled.div`
+  margin-left: 12px;
+  width: 1px;
+  height: 20px;
+  background: ${color.slateLight};
+`;
+
+const HeaderAction = styled(Flex)`
+  justify-content: center;
+  align-items: center;
+  min-height: 43px;
+  color: ${color.text};
+  padding: 0 0 0 14px;
+
+  a,
+  svg {
+    color: ${color.text};
+    opacity: .8;
+    transition: opacity 100ms ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`;
+
 const DropHere = styled(Flex)`
   pointer-events: none;
   position: fixed;

frontend/scenes/Document/components/Menu.js

@@ -5,11 +5,8 @@ import get from 'lodash/get';
 import { withRouter } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import Document from 'models/Document';
-import {
-  DropdownMenu,
-  DropdownMenuItem,
-  MoreIcon,
-} from 'components/DropdownMenu';
+import Icon from 'components/Icon';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
 type Props = {
   history: Object,
@@ -65,7 +62,7 @@ type Props = {
         collection.documents.length > 1;
 
       return (
-        <DropdownMenu label={<MoreIcon />}>
+        <DropdownMenu label={<Icon type="MoreHorizontal" />}>
           {collection &&
             <div>
               <DropdownMenuItem onClick={this.onCreateDocument}>

frontend/scenes/Search/components/SearchField/SearchField.js

@@ -1,8 +1,9 @@
 // @flow
 import React, { Component } from 'react';
+import Icon from 'components/Icon';
 import Flex from 'components/Flex';
+import { color } from 'styles/constants';
 import styled from 'styled-components';
-import searchImg from 'assets/icons/search.svg';
 
 const Field = styled.input`
   width: 100%;
@@ -12,17 +13,10 @@ const Field = styled.input`
   outline: none;
   border: 0;
 
-  ::-webkit-input-placeholder { color: #ccc; }
-  :-moz-placeholder { color: #ccc; }
-  ::-moz-placeholder { color: #ccc; }
-  :-ms-input-placeholder { color: #ccc; }
-`;
-
-const Icon = styled.img`
-  width: 38px;
-  margin-bottom: -5px;
-  margin-right: 10px;
-  opacity: 0.15;
+  ::-webkit-input-placeholder { color: ${color.slate}; }
+  :-moz-placeholder { color: ${color.slate}; }
+  ::-moz-placeholder { color: ${color.slate}; }
+  :-ms-input-placeholder { color: ${color.slate}; }
 `;
 
 class SearchField extends Component {
@@ -45,13 +39,18 @@ class SearchField extends Component {
 
   render() {
     return (
-      <Flex>
-        <Icon src={searchImg} alt="Search" onClick={this.focusInput} />
+      <Flex align="center">
+        <Icon
+          type="Search"
+          size={48}
+          color="#C9CFD6"
+          onClick={this.focusInput}
+        />
         <Field
           {...this.props}
           innerRef={this.setRef}
           onChange={this.handleChange}
-          placeholder="Search"
+          placeholder="Search…"
           autoFocus
         />
       </Flex>

frontend/styles/constants.js

@@ -31,7 +31,7 @@ export const fontWeight = {
   light: 300,
   regular: 400,
   medium: 500,
-  demiBold: 600,
+  semiBold: 600,
   bold: 700,
   heavy: 800,
 };

package.json

@@ -146,6 +146,7 @@
     "react-addons-css-transition-group": "15.3.2",
     "react-dom": "^15.6.1",
     "react-dropzone": "3.6.0",
+    "react-feather": "^1.0.7",
     "react-helmet": "3.1.0",
     "react-keydown": "^1.7.3",
     "react-modal": "^2.2.1",

yarn.lock

@@ -7391,6 +7391,10 @@ react-dropzone@3.6.0:
   dependencies:
     attr-accept "^1.0.3"
 
+react-feather@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.0.7.tgz#f2118f1d2402b0c1e6f23c732f9e7f9fd4ca61e2"
+
 react-helmet@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-3.1.0.tgz#63486194682f33004826f3687dc49a138b557050"