diff --git a/frontend/components/DropdownMenu/DropdownMenuItem.js b/frontend/components/DropdownMenu/DropdownMenuItem.js index 18d824ce3..7e6738f45 100644 --- a/frontend/components/DropdownMenu/DropdownMenuItem.js +++ b/frontend/components/DropdownMenu/DropdownMenuItem.js @@ -1,6 +1,7 @@ // @flow import React from 'react'; import styled from 'styled-components'; +import Flex from 'components/Flex'; import { color } from 'styles/constants'; const DropdownMenuItem = ({ @@ -17,13 +18,12 @@ const DropdownMenuItem = ({ ); }; -const MenuItem = styled.div` +const MenuItem = styled(Flex)` margin: 0; padding: 5px 10px; height: 32px; color: ${color.slateDark}; - display: flex; justify-content: left; align-items: center; cursor: pointer; @@ -41,6 +41,10 @@ const MenuItem = styled.div` &:hover { color: ${color.white}; background: ${color.primary}; + + svg { + fill: ${color.white}; + } } `; diff --git a/frontend/components/Editor/components/BlockInsert.js b/frontend/components/Editor/components/BlockInsert.js index 43df62813..441d8880a 100644 --- a/frontend/components/Editor/components/BlockInsert.js +++ b/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/*" /> } + label={} 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 && ` diff --git a/frontend/components/Editor/components/Toolbar/Toolbar.js b/frontend/components/Editor/components/Toolbar/Toolbar.js index 106c347fb..777765faa 100644 --- a/frontend/components/Editor/components/Toolbar/Toolbar.js +++ b/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; diff --git a/frontend/components/Editor/components/Toolbar/components/DocumentResult.js b/frontend/components/Editor/components/Toolbar/components/DocumentResult.js index e7ac8c2e4..8351681d6 100644 --- a/frontend/components/Editor/components/Toolbar/components/DocumentResult.js +++ b/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 ( - + {document.title} ); diff --git a/frontend/components/Editor/components/Toolbar/components/FormattingToolbar.js b/frontend/components/Editor/components/Toolbar/components/FormattingToolbar.js index c56ef9259..effd427ff 100644 --- a/frontend/components/Editor/components/Toolbar/components/FormattingToolbar.js +++ b/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)} + {this.renderBlockButton('heading1', Heading1Icon)} {this.renderBlockButton('heading2', Heading2Icon)} - {this.renderMarkButton('code', CodeIcon)} + @@ -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; diff --git a/frontend/components/Icon/CheckboxIcon.js b/frontend/components/Icon/CheckboxIcon.js new file mode 100644 index 000000000..b4206c259 --- /dev/null +++ b/frontend/components/Icon/CheckboxIcon.js @@ -0,0 +1,28 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function CheckboxIcon({ + checked, + ...rest +}: Props & { checked: boolean }) { + return ( + + + {checked + ? + : } + + + ); +} diff --git a/frontend/components/Icon/ChevronIcon.js b/frontend/components/Icon/ChevronIcon.js deleted file mode 100644 index 65e59b550..000000000 --- a/frontend/components/Icon/ChevronIcon.js +++ /dev/null @@ -1,20 +0,0 @@ -// @flow -import React from 'react'; -import Icon from './Icon'; -import type { Props } from './Icon'; - -export default function NextIcon(props: Props) { - return ( - - - - - - ); -} diff --git a/frontend/components/Icon/CloseIcon.js b/frontend/components/Icon/CloseIcon.js new file mode 100644 index 000000000..36e0f0dec --- /dev/null +++ b/frontend/components/Icon/CloseIcon.js @@ -0,0 +1,23 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function CloseIcon(props: Props) { + return ( + + + + + + ); +} diff --git a/frontend/components/Icon/CodeIcon.js b/frontend/components/Icon/CodeIcon.js index 246492684..3b1026c6f 100644 --- a/frontend/components/Icon/CodeIcon.js +++ b/frontend/components/Icon/CodeIcon.js @@ -14,7 +14,6 @@ export default function CodeIcon(props: Props) { xmlns="http://www.w3.org/2000/svg" > - {' '} ); diff --git a/frontend/components/Icon/GoToIcon.js b/frontend/components/Icon/GoToIcon.js new file mode 100644 index 000000000..cc1d1e10d --- /dev/null +++ b/frontend/components/Icon/GoToIcon.js @@ -0,0 +1,23 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function GoToIcon(props: Props) { + return ( + + + + + + ); +} diff --git a/frontend/components/Icon/HorizontalRuleIcon.js b/frontend/components/Icon/HorizontalRuleIcon.js index 42382a65d..fcafd88b1 100644 --- a/frontend/components/Icon/HorizontalRuleIcon.js +++ b/frontend/components/Icon/HorizontalRuleIcon.js @@ -13,7 +13,10 @@ export default function HorizontalRuleIcon(props: Props) { width="24" xmlns="http://www.w3.org/2000/svg" > - + ); diff --git a/frontend/components/Icon/Icon.js b/frontend/components/Icon/Icon.js index 5921db7eb..2d4a1354f 100644 --- a/frontend/components/Icon/Icon.js +++ b/frontend/components/Icon/Icon.js @@ -2,12 +2,14 @@ import React from 'react'; import styled from 'styled-components'; import { color } from 'styles/constants'; -import * as Icons from 'react-feather'; export type Props = { className?: string, type?: string, light?: boolean, + black?: boolean, + primary?: boolean, + color?: string, }; type BaseProps = { @@ -17,37 +19,27 @@ type BaseProps = { export default function Icon({ children, light, + black, + primary, + color, type, ...rest }: Props & BaseProps) { - if (type) { - children = React.createElement(Icons[type], { - size: '1em', - color: light ? color.white : undefined, - ...rest, - }); - - return ( - - {children} - - ); - } - return ( - + {children} ); } -const FeatherWrapper = styled.span` - position: relative; - top: .1em; -`; - const Wrapper = styled.span` svg { - fill: ${props => (props.light ? color.white : color.black)} + fill: ${props => { + if (props.color) return props.color; + if (props.light) return color.white; + if (props.black) return color.black; + if (props.primary) return color.primary; + return color.slateDark; + }}; } `; diff --git a/frontend/components/Icon/MoreIcon.js b/frontend/components/Icon/MoreIcon.js new file mode 100644 index 000000000..a997ea0d1 --- /dev/null +++ b/frontend/components/Icon/MoreIcon.js @@ -0,0 +1,23 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function MoreIcon(props: Props) { + return ( + + + + + + ); +} diff --git a/frontend/components/Icon/NewDocumentIcon.js b/frontend/components/Icon/NewDocumentIcon.js new file mode 100644 index 000000000..826e5967d --- /dev/null +++ b/frontend/components/Icon/NewDocumentIcon.js @@ -0,0 +1,23 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function NewDocumentIcon(props: Props) { + return ( + + + + + + ); +} diff --git a/frontend/components/Icon/PlusIcon.js b/frontend/components/Icon/PlusIcon.js new file mode 100644 index 000000000..5e5524388 --- /dev/null +++ b/frontend/components/Icon/PlusIcon.js @@ -0,0 +1,20 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function PlusIcon(props: Props) { + return ( + + + + + + ); +} diff --git a/frontend/components/Icon/TableIcon.js b/frontend/components/Icon/TableIcon.js new file mode 100644 index 000000000..c7d5283be --- /dev/null +++ b/frontend/components/Icon/TableIcon.js @@ -0,0 +1,23 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function TableIcon(props: Props) { + return ( + + + + + + ); +} diff --git a/frontend/components/Icon/TodoListIcon.js b/frontend/components/Icon/TodoListIcon.js index f6ba15c31..836eaa89b 100644 --- a/frontend/components/Icon/TodoListIcon.js +++ b/frontend/components/Icon/TodoListIcon.js @@ -13,7 +13,10 @@ export default function TodoListIcon(props: Props) { width="24" xmlns="http://www.w3.org/2000/svg" > - + ); diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index e87ab1364..22dc66b93 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -12,7 +12,9 @@ import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers'; import Avatar from 'components/Avatar'; import { LoadingIndicatorBar } from 'components/LoadingIndicator'; import Scrollable from 'components/Scrollable'; -import Icon from 'components/Icon'; +import HomeIcon from 'components/Icon/HomeIcon'; +import SearchIcon from 'components/Icon/SearchIcon'; +import StarredIcon from 'components/Icon/StarredIcon'; import Toasts from 'components/Toasts'; import AccountMenu from 'menus/AccountMenu'; @@ -127,14 +129,14 @@ type Props = { - - Home + }> + Home - - Search + }> + Search - - Starred + }> + Starred diff --git a/frontend/components/Layout/components/SidebarCollections.js b/frontend/components/Layout/components/SidebarCollections.js index a1cf5aa2d..d730dc9d8 100644 --- a/frontend/components/Layout/components/SidebarCollections.js +++ b/frontend/components/Layout/components/SidebarCollections.js @@ -8,7 +8,8 @@ import { color, fontWeight } from 'styles/constants'; import SidebarLink from './SidebarLink'; import DropToImport from 'components/DropToImport'; -import Icon from 'components/Icon'; +import PlusIcon from 'components/Icon/PlusIcon'; +import CollectionIcon from 'components/Icon/CollectionIcon'; import CollectionMenu from 'menus/CollectionMenu'; import CollectionsStore from 'stores/CollectionsStore'; @@ -52,8 +53,11 @@ type Props = { ))} {collections.isLoaded && - - Add new collection + } + > + New collection… } ); @@ -77,6 +81,7 @@ type Props = { ui, activeDocumentRef, } = this.props; + const expanded = collection.id === ui.activeCollectionId; return ( (this.dropzoneRef = ref)} > - + } + > {collection.name} @@ -103,7 +112,7 @@ type Props = { - {collection.id === ui.activeCollectionId && + {expanded && {collection.documents.map(document => ( { const isActiveDocument = activeDocument && activeDocument.id === document.id; - const showChildren = - activeDocument && + const showChildren = !!(activeDocument && (activeDocument.pathToDocument .map(entry => entry.id) .includes(document.id) || - isActiveDocument); + isActiveDocument)); return (
; +const StyledGoTo = styled(CollapsedIcon)` + margin-right: -10px; + + svg { + margin-bottom: -4px; + margin-right: 6px; + + ${({ expanded }) => !expanded && 'transform: rotate(-90deg);'} + } +`; + +const IconWrapper = styled.span` + margin-left: -4px; + margin-right: 4px; + height: 24px; +`; + const styleComponent = component => styled(component)` display: flex; width: 100%; + position: relative; overflow: hidden; text-overflow: ellipsis; - padding: 5px 0; + padding: 4px 0; margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')}; color: ${color.slateDark}; font-size: 15px; @@ -30,38 +47,36 @@ const styleComponent = component => styled(component)` color: ${color.text}; } - &.active ${StyledChevron} svg { - fill: ${activeStyle.color}; + &.active { + svg { + fill: ${activeStyle.color} + } } `; -function SidebarLink(props: Object) { - const Component = styleComponent(props.to ? NavLink : StyleableDiv); +type Props = { + to?: string, + onClick?: SyntheticEvent => *, + children?: React$Element<*>, + icon?: React$Element<*>, + hasChildren?: boolean, + expanded?: boolean, +}; + +function SidebarLink({ icon, children, expanded, ...rest }: Props) { + const Component = styleComponent(rest.to ? NavLink : StyleableDiv); return ( - - {props.hasChildren && } - {props.children} + + {icon && {icon}} + {rest.hasChildren && } + {children} ); } -const StyledChevron = styled(ChevronIcon)` - margin-right: -10px; - - svg { - height: 18px; - margin-bottom: -4px; - margin-right: 6px; - - fill: ${color.slateDark}; - - ${({ expanded }) => expanded && 'transform: rotate(90deg);'} - } -`; - const Content = styled.div` width: 100%; `; diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js index 92dc4db66..de4f8841b 100644 --- a/frontend/components/Modal/Modal.js +++ b/frontend/components/Modal/Modal.js @@ -5,7 +5,7 @@ import styled from 'styled-components'; import ReactModal from 'react-modal'; import { color } from 'styles/constants'; import { fadeAndScaleIn } from 'styles/animations'; -import Icon from 'components/Icon'; +import CloseIcon from 'components/Icon/CloseIcon'; import Flex from 'components/Flex'; type Props = { @@ -33,7 +33,7 @@ const Modal = ({ > {title &&

{title}

} - + {children} diff --git a/frontend/menus/CollectionMenu.js b/frontend/menus/CollectionMenu.js index fc29530b8..76c778be0 100644 --- a/frontend/menus/CollectionMenu.js +++ b/frontend/menus/CollectionMenu.js @@ -1,17 +1,16 @@ // @flow import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; -import styled from 'styled-components'; import Collection from 'models/Collection'; import UiStore from 'stores/UiStore'; -import Icon from 'components/Icon'; +import MoreIcon from 'components/Icon/MoreIcon'; import Flex from 'components/Flex'; import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; @observer class CollectionMenu extends Component { props: { - label?: React$Element, + label?: React$Element<*>, onOpen?: () => void, onClose?: () => void, onImport?: () => void, @@ -41,7 +40,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; return ( } + label={label || } onOpen={onOpen} onClose={onClose} > @@ -53,17 +52,13 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; Import document - Edit + Edit… } {allowDelete && - Delete} + Delete…} ); } } -const MoreIcon = styled(Icon)` - width: 22px; -`; - export default inject('ui')(CollectionMenu); diff --git a/frontend/menus/DocumentMenu.js b/frontend/menus/DocumentMenu.js index e60933f84..8cb78b7d2 100644 --- a/frontend/menus/DocumentMenu.js +++ b/frontend/menus/DocumentMenu.js @@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'; import { inject, observer } from 'mobx-react'; import Document from 'models/Document'; import UiStore from 'stores/UiStore'; -import Icon from 'components/Icon'; +import MoreIcon from 'components/Icon/MoreIcon'; import { documentMoveUrl } from 'utils/routeHelpers'; import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; @@ -49,7 +49,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; const { allowDelete } = document; return ( - }> + }> {document.starred ? Unstar diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index 3db9f3b07..f89127fd3 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -31,6 +31,7 @@ import LoadingIndicator from 'components/LoadingIndicator'; import Collaborators from 'components/Collaborators'; import CenteredContent from 'components/CenteredContent'; import PageTitle from 'components/PageTitle'; +import NewDocumentIcon from 'components/Icon/NewDocumentIcon'; import Search from 'scenes/Search'; const DISCARD_CHANGES = ` @@ -303,7 +304,7 @@ type Props = { {!this.isEditing && - New + } @@ -329,15 +330,8 @@ const HeaderAction = styled(Flex)` color: ${color.text}; padding: 0 0 0 14px; - a, - svg { + a { color: ${color.text}; - opacity: .8; - transition: opacity 100ms ease-in-out; - - &:hover { - opacity: 1; - } } `; diff --git a/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js b/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js index 2e5bab449..b8ed4f376 100644 --- a/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js +++ b/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { color } from 'styles/constants'; import Flex from 'components/Flex'; -import ChevronIcon from 'components/Icon/ChevronIcon'; +import GoToIcon from 'components/Icon/GoToIcon'; import Document from 'models/Document'; @@ -19,10 +19,7 @@ const ResultWrapper = styled.div` cursor: default; `; -const StyledChevronIcon = styled(ChevronIcon)` - padding-top: 2px; - width: 24px; - height: 24px; +const StyledGoToIcon = styled(GoToIcon)` `; const ResultWrapperLink = ResultWrapper.withComponent('a').extend` @@ -40,8 +37,10 @@ const ResultWrapperLink = ResultWrapper.withComponent('a').extend` outline: none; cursor: pointer; - ${StyledChevronIcon} svg { - fill: ${color.smokeLight}; + ${StyledGoToIcon} { + svg { + fill: ${color.white}; + } } } `; @@ -82,14 +81,14 @@ type Props = { if (!result) return
; return ( - + {result.path .map(doc => {doc.title}) - .reduce((prev, curr) => [prev, , curr])} + .reduce((prev, curr) => [prev, , curr])} {document && {' '} - + {' '}{document.title} } diff --git a/frontend/styles/base.css b/frontend/styles/base.css index d7d50a1f2..711104aa5 100644 --- a/frontend/styles/base.css +++ b/frontend/styles/base.css @@ -50,7 +50,7 @@ svg { max-height: 100%; } a { - color: #005aa6; + color: #16B3FF; text-decoration: none; cursor: pointer; } diff --git a/package.json b/package.json index 04d7b820b..da53a3aac 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,6 @@ "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", diff --git a/yarn.lock b/yarn.lock index 16b429b5b..80829ae84 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7310,10 +7310,6 @@ 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"