diff --git a/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js b/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js
index e34d04b4..3d868241 100644
--- a/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js
+++ b/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 {
{this.isEditing
?
- : }
+ : }
{hasResults &&
diff --git a/frontend/components/Icon/Icon.js b/frontend/components/Icon/Icon.js
index 2d4a1354..f7bf1b9a 100644
--- a/frontend/components/Icon/Icon.js
+++ b/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,
+ 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 (
-
+
{children}
);
@@ -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;
diff --git a/frontend/components/Toasts/components/Toast.js b/frontend/components/Toasts/components/Toast.js
index d4a96f5f..da25a022 100644
--- a/frontend/components/Toasts/components/Toast.js
+++ b/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 (
- {type === 'info'
- ?
- : }
{message}
);
diff --git a/frontend/menus/DocumentMenu.js b/frontend/menus/DocumentMenu.js
index 8cb78b7d..3e74bd8b 100644
--- a/frontend/menus/DocumentMenu.js
+++ b/frontend/menus/DocumentMenu.js
@@ -61,11 +61,13 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
>
New child
- Move
- Export
+
+ Download
+
+ Move…
{allowDelete &&
- Delete
+ Delete…
}
);
diff --git a/frontend/scenes/Search/components/SearchField/SearchField.js b/frontend/scenes/Search/components/SearchField/SearchField.js
index dd9642d0..48432320 100644
--- a/frontend/scenes/Search/components/SearchField/SearchField.js
+++ b/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
/>
@@ -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;