diff --git a/frontend/components/DropdownMenu/DropdownMenu.js b/frontend/components/DropdownMenu/DropdownMenu.js index 949ca3081..2ce37c8c4 100644 --- a/frontend/components/DropdownMenu/DropdownMenu.js +++ b/frontend/components/DropdownMenu/DropdownMenu.js @@ -85,7 +85,7 @@ const Label = styled(Flex).attrs({ `; const Menu = styled.div` - animation: ${fadeAndScaleIn} 250ms ease; + animation: ${fadeAndScaleIn} 200ms ease; transform-origin: 75% 0; position: absolute; diff --git a/frontend/components/Editor/components/Toolbar/Toolbar.js b/frontend/components/Editor/components/Toolbar/Toolbar.js index 777765faa..281d40cbc 100644 --- a/frontend/components/Editor/components/Toolbar/Toolbar.js +++ b/frontend/components/Editor/components/Toolbar/Toolbar.js @@ -146,13 +146,14 @@ const Menu = styled.div` opacity: 0; background-color: #2F3336; border-radius: 4px; - transition: opacity 250ms ease-in-out, transform 250ms ease-in-out; + transform: scale(.95); + transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275); line-height: 0; height: 40px; min-width: 260px; ${({ active }) => active && ` - transform: translateY(-6px); + transform: translateY(-6px) scale(1); opacity: 1; `} `; diff --git a/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js b/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js index 3d868241f..3d8f5a552 100644 --- a/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js +++ b/frontend/components/Editor/components/Toolbar/components/LinkToolbar.js @@ -12,7 +12,8 @@ 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 OpenIcon from 'components/Icon/OpenIcon'; +import TrashIcon from 'components/Icon/TrashIcon'; import Flex from 'components/Flex'; @keydown @@ -145,12 +146,10 @@ class LinkToolbar extends Component { /> {this.isEditing && - + } - {this.isEditing - ? - : } + {this.isEditing ? : } {hasResults && diff --git a/frontend/components/Icon/BackIcon.js b/frontend/components/Icon/BackIcon.js index bc082e7fd..4586fd1a5 100644 --- a/frontend/components/Icon/BackIcon.js +++ b/frontend/components/Icon/BackIcon.js @@ -6,18 +6,10 @@ import type { Props } from './Icon'; export default function BackIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/BoldIcon.js b/frontend/components/Icon/BoldIcon.js index 284d8daa8..fa5dd4e62 100644 --- a/frontend/components/Icon/BoldIcon.js +++ b/frontend/components/Icon/BoldIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function BoldIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/BulletedListIcon.js b/frontend/components/Icon/BulletedListIcon.js index 01be8d1f8..89fa741b9 100644 --- a/frontend/components/Icon/BulletedListIcon.js +++ b/frontend/components/Icon/BulletedListIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function BulletedListIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/CheckboxIcon.js b/frontend/components/Icon/CheckboxIcon.js index b4206c259..5540808c8 100644 --- a/frontend/components/Icon/CheckboxIcon.js +++ b/frontend/components/Icon/CheckboxIcon.js @@ -9,20 +9,12 @@ export default function CheckboxIcon({ }: Props & { checked: boolean }) { return ( - - {checked - ? - : } - + {checked + ? + : } ); } diff --git a/frontend/components/Icon/CloseIcon.js b/frontend/components/Icon/CloseIcon.js index 36e0f0dec..d21adb3d8 100644 --- a/frontend/components/Icon/CloseIcon.js +++ b/frontend/components/Icon/CloseIcon.js @@ -6,18 +6,10 @@ 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 3b1026c6f..ea08486b0 100644 --- a/frontend/components/Icon/CodeIcon.js +++ b/frontend/components/Icon/CodeIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function CodeIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/CollapsedIcon.js b/frontend/components/Icon/CollapsedIcon.js index 76ecdcfeb..8e2a24557 100644 --- a/frontend/components/Icon/CollapsedIcon.js +++ b/frontend/components/Icon/CollapsedIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function CollapsedIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/CollectionIcon.js b/frontend/components/Icon/CollectionIcon.js index eddb11a2d..411d0920f 100644 --- a/frontend/components/Icon/CollectionIcon.js +++ b/frontend/components/Icon/CollectionIcon.js @@ -9,17 +9,9 @@ export default function CollectionIcon({ }: Props & { expanded: boolean }) { return ( - - {expanded - ? - : } - + {expanded + ? + : } ); } diff --git a/frontend/components/Icon/DocumentIcon.js b/frontend/components/Icon/DocumentIcon.js index 8a7dc304c..95df6e521 100644 --- a/frontend/components/Icon/DocumentIcon.js +++ b/frontend/components/Icon/DocumentIcon.js @@ -6,18 +6,10 @@ import type { Props } from './Icon'; export default function DocumentIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/EditIcon.js b/frontend/components/Icon/EditIcon.js index e24b9304e..cfe26540b 100644 --- a/frontend/components/Icon/EditIcon.js +++ b/frontend/components/Icon/EditIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function EditIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/GoToIcon.js b/frontend/components/Icon/GoToIcon.js index cc1d1e10d..04dbb6269 100644 --- a/frontend/components/Icon/GoToIcon.js +++ b/frontend/components/Icon/GoToIcon.js @@ -6,18 +6,10 @@ import type { Props } from './Icon'; export default function GoToIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/Heading1Icon.js b/frontend/components/Icon/Heading1Icon.js index ea54065ee..41fd8552f 100644 --- a/frontend/components/Icon/Heading1Icon.js +++ b/frontend/components/Icon/Heading1Icon.js @@ -6,16 +6,7 @@ import type { Props } from './Icon'; export default function Heading1Icon(props: Props) { return ( - - - {' '} - + ); } diff --git a/frontend/components/Icon/Heading2Icon.js b/frontend/components/Icon/Heading2Icon.js index 1ac85828a..567fa4181 100644 --- a/frontend/components/Icon/Heading2Icon.js +++ b/frontend/components/Icon/Heading2Icon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function Heading2Icon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/HomeIcon.js b/frontend/components/Icon/HomeIcon.js index ce807c01a..47d51f01a 100644 --- a/frontend/components/Icon/HomeIcon.js +++ b/frontend/components/Icon/HomeIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function HomeIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/HorizontalRuleIcon.js b/frontend/components/Icon/HorizontalRuleIcon.js index fcafd88b1..a0a663c28 100644 --- a/frontend/components/Icon/HorizontalRuleIcon.js +++ b/frontend/components/Icon/HorizontalRuleIcon.js @@ -6,18 +6,10 @@ import type { Props } from './Icon'; export default function HorizontalRuleIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/Icon.js b/frontend/components/Icon/Icon.js index f7bf1b9ac..23619a08f 100644 --- a/frontend/components/Icon/Icon.js +++ b/frontend/components/Icon/Icon.js @@ -1,6 +1,5 @@ // @flow import React from 'react'; -import styled from 'styled-components'; import { color } from 'styles/constants'; export type Props = { @@ -16,25 +15,29 @@ type BaseProps = { children?: React$Element<*>, }; -export default function Icon({ children, ...rest }: Props & BaseProps) { +export default function Icon({ + children, + className, + ...rest +}: Props & BaseProps) { + const size = rest.size ? rest.size + 'px' : '24px'; + + let fill = color.slateDark; + if (rest.color) fill = rest.color; + if (rest.light) fill = color.white; + if (rest.black) fill = color.black; + if (rest.primary) fill = color.primary; + return ( - + {children} - + ); } - -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; - if (props.black) return color.black; - if (props.primary) return color.primary; - return color.slateDark; - }}; - } -`; diff --git a/frontend/components/Icon/ImageIcon.js b/frontend/components/Icon/ImageIcon.js index 9ba5fd5f8..3901f9e03 100644 --- a/frontend/components/Icon/ImageIcon.js +++ b/frontend/components/Icon/ImageIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function ImageIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/ItalicIcon.js b/frontend/components/Icon/ItalicIcon.js index 4a550843c..0987bdda6 100644 --- a/frontend/components/Icon/ItalicIcon.js +++ b/frontend/components/Icon/ItalicIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function ItalicIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/LinkIcon.js b/frontend/components/Icon/LinkIcon.js index 5a8ca7d78..73d9257d7 100644 --- a/frontend/components/Icon/LinkIcon.js +++ b/frontend/components/Icon/LinkIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function LinkIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/MoreIcon.js b/frontend/components/Icon/MoreIcon.js index a997ea0d1..cffcbe0fc 100644 --- a/frontend/components/Icon/MoreIcon.js +++ b/frontend/components/Icon/MoreIcon.js @@ -6,18 +6,10 @@ 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 index 826e5967d..65140ce87 100644 --- a/frontend/components/Icon/NewDocumentIcon.js +++ b/frontend/components/Icon/NewDocumentIcon.js @@ -6,18 +6,10 @@ import type { Props } from './Icon'; export default function NewDocumentIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/OpenIcon.js b/frontend/components/Icon/OpenIcon.js new file mode 100644 index 000000000..4324f7610 --- /dev/null +++ b/frontend/components/Icon/OpenIcon.js @@ -0,0 +1,12 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function OpenIcon(props: Props) { + return ( + + + + ); +} diff --git a/frontend/components/Icon/OrderedListIcon.js b/frontend/components/Icon/OrderedListIcon.js index 8bb2836c4..855794bea 100644 --- a/frontend/components/Icon/OrderedListIcon.js +++ b/frontend/components/Icon/OrderedListIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function OrderedListIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/PlusIcon.js b/frontend/components/Icon/PlusIcon.js index 5e5524388..9301d2a80 100644 --- a/frontend/components/Icon/PlusIcon.js +++ b/frontend/components/Icon/PlusIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function PlusIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/SearchIcon.js b/frontend/components/Icon/SearchIcon.js index 76d523f71..d111fef9e 100644 --- a/frontend/components/Icon/SearchIcon.js +++ b/frontend/components/Icon/SearchIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function SearchIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/StarredIcon.js b/frontend/components/Icon/StarredIcon.js index fdf6b2e6a..8c6da2003 100644 --- a/frontend/components/Icon/StarredIcon.js +++ b/frontend/components/Icon/StarredIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function StarredIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/StrikethroughIcon.js b/frontend/components/Icon/StrikethroughIcon.js index 94bc9448b..f00c91ec6 100644 --- a/frontend/components/Icon/StrikethroughIcon.js +++ b/frontend/components/Icon/StrikethroughIcon.js @@ -6,15 +6,7 @@ import type { Props } from './Icon'; export default function StrikethroughIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/TableIcon.js b/frontend/components/Icon/TableIcon.js index c7d5283be..fb5e527f2 100644 --- a/frontend/components/Icon/TableIcon.js +++ b/frontend/components/Icon/TableIcon.js @@ -6,18 +6,10 @@ 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 836eaa89b..7cd7c1984 100644 --- a/frontend/components/Icon/TodoListIcon.js +++ b/frontend/components/Icon/TodoListIcon.js @@ -6,18 +6,7 @@ import type { Props } from './Icon'; export default function TodoListIcon(props: Props) { return ( - - - + ); } diff --git a/frontend/components/Icon/TrashIcon.js b/frontend/components/Icon/TrashIcon.js new file mode 100644 index 000000000..d76379fe1 --- /dev/null +++ b/frontend/components/Icon/TrashIcon.js @@ -0,0 +1,12 @@ +// @flow +import React from 'react'; +import Icon from './Icon'; +import type { Props } from './Icon'; + +export default function TrashIcon(props: Props) { + return ( + + + + ); +} diff --git a/frontend/components/Layout/components/SidebarLink.js b/frontend/components/Layout/components/SidebarLink.js index 7bb24290d..b3c5456a4 100644 --- a/frontend/components/Layout/components/SidebarLink.js +++ b/frontend/components/Layout/components/SidebarLink.js @@ -15,14 +15,9 @@ const activeStyle = { const StyleableDiv = props =>
; const StyledGoTo = styled(CollapsedIcon)` - margin-right: -10px; - - svg { - margin-bottom: -4px; - margin-right: 6px; - - ${({ expanded }) => !expanded && 'transform: rotate(-90deg);'} - } + margin-bottom: -4px; + margin-right: 0; + ${({ expanded }) => !expanded && 'transform: rotate(-90deg);'} `; const IconWrapper = styled.span` diff --git a/frontend/menus/BlockMenu.js b/frontend/menus/BlockMenu.js index ebdd24143..08192ce35 100644 --- a/frontend/menus/BlockMenu.js +++ b/frontend/menus/BlockMenu.js @@ -33,7 +33,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; {...rest} > - Add images + Add images Start list diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index f89127fd3..371765cd9 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -58,7 +58,6 @@ type Props = { @observable isDragging = false; @observable isLoading = false; @observable isSaving = false; - @observable showAsSaved = false; @observable notFound = false; @observable moveModalOpen: boolean = false; @@ -170,17 +169,9 @@ type Props = { if (redirect || this.props.newDocument) { this.props.history.push(document.url); - } else { - this.toggleShowAsSaved(); } }; - toggleShowAsSaved() { - this.showAsSaved = true; - this.isSaving = false; - this.savedTimeout = setTimeout(() => (this.showAsSaved = false), 2000); - } - onImageUploadStart = () => { this.isLoading = true; }; @@ -194,7 +185,7 @@ type Props = { this.document.updateData({ text }, true); }; - onCancel = () => { + onDiscard = () => { let url; if (this.document && this.document.url) { url = this.document.url; @@ -265,7 +256,7 @@ type Props = { onImageUploadStop={this.onImageUploadStop} onChange={this.onChange} onSave={this.onSave} - onCancel={this.onCancel} + onCancel={this.onDiscard} readOnly={!this.isEditing} /> {this.isEditing && - Cancel + Discard } {!this.isEditing && @@ -326,12 +317,11 @@ const Separator = styled.div` const HeaderAction = styled(Flex)` justify-content: center; align-items: center; - min-height: 43px; - color: ${color.text}; - padding: 0 0 0 14px; + padding: 0 0 0 10px; a { color: ${color.text}; + height: 24px; } `; diff --git a/frontend/scenes/Search/components/SearchField/SearchField.js b/frontend/scenes/Search/components/SearchField/SearchField.js index 48432320b..8c0645767 100644 --- a/frontend/scenes/Search/components/SearchField/SearchField.js +++ b/frontend/scenes/Search/components/SearchField/SearchField.js @@ -61,7 +61,7 @@ const StyledInput = styled.input` const StyledIcon = styled(SearchIcon)` position: relative; - top: 6px; + top: 4px; `; export default SearchField;