Feather icons

frontend/components/DocumentPreview/DocumentPreview.js

@@ -2,11 +2,11 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
+import { Star as StarIcon } from 'react-feather';
 import Document from 'models/Document';
 import styled from 'styled-components';
 import { color } from 'styles/constants';
 import PublishingInfo from './components/PublishingInfo';
-import StarIcon from 'components/Icon/StarIcon';
 
 type Props = {
   document: Document,
@@ -21,11 +21,6 @@ const StyledStar = styled(StarIcon)`
   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)`
@@ -87,8 +82,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 color={color.slateDark} size="1em" solid />
+              </a>
+            : <a onClick={this.star}>
+                <StyledStar color={color.slateDark} size="1em" />
+              </a>}
         </h3>
         <PublishingInfo
           document={document}

frontend/components/Layout/Layout.js

@@ -16,8 +16,13 @@ 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 {
+  Home as HomeIcon,
+  Search as SearchIcon,
+  Star as StarIcon,
+  PlusCircle as AddIcon,
+  MoreHorizontal as MoreIcon,
+} from 'react-feather';
 import CollectionNew from 'scenes/CollectionNew';
 import CollectionEdit from 'scenes/CollectionEdit';
 import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
@@ -156,17 +161,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">
+                      <HomeIcon size="1em" /> Home
+                    </SidebarLink>
+                    <SidebarLink to="/search">
+                      <SearchIcon size="1em" /> Search
+                    </SidebarLink>
+                    <SidebarLink to="/starred">
+                      <StarIcon size="1em" /> Starred
+                    </SidebarLink>
                   </LinkSection>
                   <LinkSection>
                     {collections.active
                       ? <CollectionAction onClick={this.handleEditCollection}>
-                          <MoreIcon />
+                          <MoreIcon size={16} />
                         </CollectionAction>
                       : <CollectionAction onClick={this.handleCreateCollection}>
-                          <AddIcon />
+                          <AddIcon size={16} />
                         </CollectionAction>}
                     {collections.active
                       ? <SidebarCollection
@@ -231,17 +242,11 @@ const CollectionAction = styled.a`
   position: absolute;
   top: -2px;
   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/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';
 
@@ -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 } from 'styles/constants';
 
 import SidebarLink from '../SidebarLink';
 import DropToImport from 'components/DropToImport';
@@ -44,7 +44,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};
 `;

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"