Almost all icons updated

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

@@ -11,6 +11,7 @@ import DocumentResult from './DocumentResult';
 import type { State } from '../../../types';
 import DocumentsStore from 'stores/DocumentsStore';
 import keydown from 'react-keydown';
+import CloseIcon from 'components/Icon/CloseIcon';
 import Icon from 'components/Icon';
 import Flex from 'components/Flex';
 
@@ -149,7 +150,7 @@ class LinkToolbar extends Component {
           <ToolbarButton onMouseDown={this.removeLink}>
             {this.isEditing
               ? <Icon type="Trash2" light />
-              : <Icon type="XCircle" light />}
+              : <CloseIcon light />}
           </ToolbarButton>
         </LinkEditor>
         {hasResults &&

frontend/components/Icon/Icon.js

@@ -5,28 +5,20 @@ import { color } from 'styles/constants';
 
 export type Props = {
   className?: string,
-  type?: string,
   light?: boolean,
   black?: boolean,
   primary?: boolean,
   color?: string,
+  size?: number,
 };
 
 type BaseProps = {
-  children?: React$Element<any>,
+  children?: React$Element<*>,
 };
 
-export default function Icon({
-  children,
-  light,
-  black,
-  primary,
-  color,
-  type,
-  ...rest
-}: Props & BaseProps) {
+export default function Icon({ children, ...rest }: Props & BaseProps) {
   return (
-    <Wrapper light={light} black={black} primary={primary} {...rest}>
+    <Wrapper {...rest}>
       {children}
     </Wrapper>
   );
@@ -34,6 +26,9 @@ export default function Icon({
 
 const Wrapper = styled.span`
   svg {
+    width: ${props => (props.size ? props.size + 'px' : 'auto')};
+    height: ${props => (props.size ? props.size + 'px' : 'auto')};
+
     fill: ${props => {
             if (props.color) return props.color;
             if (props.light) return color.white;

frontend/components/Toasts/components/Toast.js

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { darken } from 'polished';
 import { color } from 'styles/constants';
 import { fadeAndScaleIn } from 'styles/animations';
-import Icon from 'components/Icon';
 
 type Props = {
   onRequestClose: () => void,
@@ -38,9 +37,6 @@ class Toast extends Component {
 
     return (
       <Container onClick={onRequestClose} type={type}>
-        {type === 'info'
-          ? <Icon type="Info" light />
-          : <Icon type="AlertCircle" light />}
         <Message>{message}</Message>
       </Container>
     );

frontend/menus/DocumentMenu.js

@@ -61,11 +61,13 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
         >
           New child
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={this.handleMove}>Move</DropdownMenuItem>
-        <DropdownMenuItem onClick={this.handleExport}>Export</DropdownMenuItem>
+        <DropdownMenuItem onClick={this.handleExport}>
+          Download
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={this.handleMove}>Move…</DropdownMenuItem>
         {allowDelete &&
           <DropdownMenuItem onClick={this.handleDelete}>
-            Delete
+            Delete…
           </DropdownMenuItem>}
       </DropdownMenu>
     );

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

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import Icon from 'components/Icon';
+import SearchIcon from 'components/Icon/SearchIcon';
 import Flex from 'components/Flex';
 import { color } from 'styles/constants';
 import styled from 'styled-components';
@@ -37,7 +37,7 @@ class SearchField extends Component {
           innerRef={this.setRef}
           onChange={this.handleChange}
           spellCheck="false"
-          placeholder="Search…"
+          placeholder="search…"
           autoFocus
         />
       </Flex>
@@ -59,8 +59,9 @@ const StyledInput = styled.input`
   :-ms-input-placeholder { color: ${color.slateLight}; }
 `;
 
-const StyledIcon = styled(Icon)`
-  top: 3px;
+const StyledIcon = styled(SearchIcon)`
+  position: relative;
+  top: 6px;
 `;
 
 export default SearchField;