From fc45d6a180c469ec9f483646808e69cd0047a727 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 26 Oct 2017 22:42:08 -0700 Subject: [PATCH] Sharing global styles --- .flowconfig | 2 + app/components/Alert/Alert.js | 2 +- app/components/Button/Button.js | 2 +- app/components/Collaborators/Collaborators.js | 2 +- .../DocumentPreview/DocumentPreview.js | 2 +- .../components/PublishingInfo.js | 2 +- app/components/DropdownMenu/DropdownMenu.js | 4 +- .../DropdownMenu/DropdownMenuItem.js | 2 +- .../Editor/components/BlockInsert.js | 2 +- app/components/Editor/components/Code.js | 2 +- app/components/Editor/components/Contents.js | 2 +- .../Editor/components/CopyButton.js | 2 +- .../Editor/components/HorizontalRule.js | 2 +- app/components/Editor/components/Image.js | 2 +- .../Editor/components/InlineCode.js | 2 +- app/components/Editor/components/TodoItem.js | 2 +- .../Toolbar/components/DocumentResult.js | 2 +- app/components/Empty/Empty.js | 2 +- app/components/HelpText/HelpText.js | 2 +- app/components/Icon/Icon.js | 2 +- app/components/Input/Input.js | 2 +- app/components/Key/key.js | 2 +- app/components/Labeled/Labeled.js | 2 +- app/components/Layout/Layout.js | 2 +- .../Layout/components/HeaderBlock.js | 3 +- .../Layout/components/SidebarCollections.js | 2 +- .../Layout/components/SidebarLink.js | 2 +- .../LoadingListPlaceholder.js | 4 +- .../LoadingPlaceholder/components/Mask.js | 4 +- app/components/Modal/Modal.js | 4 +- app/components/Toasts/Toasts.js | 2 +- app/components/Toasts/components/Toast.js | 4 +- app/index.js | 6 +- app/scenes/Document/Document.js | 2 +- .../components/DocumentMove/DocumentMove.js | 2 +- .../DocumentMove/components/PathToDocument.js | 2 +- .../LoadingPlaceholder/LoadingPlaceholder.js | 4 +- .../{SearchField => }/SearchField.js | 2 +- .../Search/components/SearchField/index.js | 3 - app/scenes/Settings/Settings.js | 2 +- .../components/{ApiKeyRow => }/ApiKeyRow.js | 2 +- .../Settings/components/ApiKeyRow/index.js | 3 - app/styles/base.css | 143 ------------------ app/styles/fonts.css | 62 -------- package.json | 1 + server/pages/components/Layout.js | 3 + server/pages/components/Navigation.js | 15 +- {app => shared}/styles/animations.js | 0 shared/styles/base.js | 83 ++++++++++ {app => shared}/styles/constants.js | 4 +- shared/styles/globals.js | 9 ++ webpack.config.js | 4 +- yarn.lock | 4 + 53 files changed, 165 insertions(+), 266 deletions(-) rename app/scenes/Search/components/{SearchField => }/SearchField.js (96%) delete mode 100644 app/scenes/Search/components/SearchField/index.js rename app/scenes/Settings/components/{ApiKeyRow => }/ApiKeyRow.js (95%) delete mode 100644 app/scenes/Settings/components/ApiKeyRow/index.js delete mode 100644 app/styles/base.css delete mode 100644 app/styles/fonts.css rename {app => shared}/styles/animations.js (100%) create mode 100644 shared/styles/base.js rename {app => shared}/styles/constants.js (97%) create mode 100644 shared/styles/globals.js diff --git a/.flowconfig b/.flowconfig index 66fe67da..7c57deb4 100644 --- a/.flowconfig +++ b/.flowconfig @@ -21,6 +21,8 @@ module.system.node.resolve_dirname=app module.name_mapper='^\(.*\)\.s?css$' -> 'empty/object' module.name_mapper='^\(.*\)\.md$' -> 'empty/object' +module.name_mapper='^shared\/\(.*\)$' -> '/shared/\1' + module.file_ext=.js module.file_ext=.scss module.file_ext=.md diff --git a/app/components/Alert/Alert.js b/app/components/Alert/Alert.js index fbceee6a..4fc1c8db 100644 --- a/app/components/Alert/Alert.js +++ b/app/components/Alert/Alert.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 { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; type Props = { children: React.Element<*>, diff --git a/app/components/Button/Button.js b/app/components/Button/Button.js index 20ecb553..411031e4 100644 --- a/app/components/Button/Button.js +++ b/app/components/Button/Button.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import { darken, lighten } from 'polished'; const RealButton = styled.button` diff --git a/app/components/Collaborators/Collaborators.js b/app/components/Collaborators/Collaborators.js index 8bb7c788..746c9ad6 100644 --- a/app/components/Collaborators/Collaborators.js +++ b/app/components/Collaborators/Collaborators.js @@ -2,7 +2,7 @@ import React from 'react'; import moment from 'moment'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import Flex from 'components/Flex'; import Tooltip from 'components/Tooltip'; import Document from 'models/Document'; diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js index d9da9bd8..40d29961 100644 --- a/app/components/DocumentPreview/DocumentPreview.js +++ b/app/components/DocumentPreview/DocumentPreview.js @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import { Link } from 'react-router-dom'; import Document from 'models/Document'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import StarredIcon from 'components/Icon/StarredIcon'; import PublishingInfo from './components/PublishingInfo'; diff --git a/app/components/DocumentPreview/components/PublishingInfo.js b/app/components/DocumentPreview/components/PublishingInfo.js index 878bfdda..bb666240 100644 --- a/app/components/DocumentPreview/components/PublishingInfo.js +++ b/app/components/DocumentPreview/components/PublishingInfo.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import moment from 'moment'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import Collection from 'models/Collection'; import Document from 'models/Document'; import Flex from 'components/Flex'; diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js index 2ce37c8c..e2f2ea74 100644 --- a/app/components/DropdownMenu/DropdownMenu.js +++ b/app/components/DropdownMenu/DropdownMenu.js @@ -6,8 +6,8 @@ import { observer } from 'mobx-react'; import styled from 'styled-components'; import Portal from 'react-portal'; import Flex from 'components/Flex'; -import { color } from 'styles/constants'; -import { fadeAndScaleIn } from 'styles/animations'; +import { color } from 'shared/styles/constants'; +import { fadeAndScaleIn } from 'shared/styles/animations'; type Props = { label: React.Element<*>, diff --git a/app/components/DropdownMenu/DropdownMenuItem.js b/app/components/DropdownMenu/DropdownMenuItem.js index 7e6738f4..bdbe4f2e 100644 --- a/app/components/DropdownMenu/DropdownMenuItem.js +++ b/app/components/DropdownMenu/DropdownMenuItem.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import Flex from 'components/Flex'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; const DropdownMenuItem = ({ onClick, diff --git a/app/components/Editor/components/BlockInsert.js b/app/components/Editor/components/BlockInsert.js index 441d8880..8988881a 100644 --- a/app/components/Editor/components/BlockInsert.js +++ b/app/components/Editor/components/BlockInsert.js @@ -6,7 +6,7 @@ import Portal from 'react-portal'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import PlusIcon from 'components/Icon/PlusIcon'; import BlockMenu from 'menus/BlockMenu'; import type { State } from '../types'; diff --git a/app/components/Editor/components/Code.js b/app/components/Editor/components/Code.js index f370392d..883d5753 100644 --- a/app/components/Editor/components/Code.js +++ b/app/components/Editor/components/Code.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import CopyButton from './CopyButton'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import type { Props } from '../types'; export default function Code({ children, node, readOnly, attributes }: Props) { diff --git a/app/components/Editor/components/Contents.js b/app/components/Editor/components/Contents.js index 7a1f19a4..625aad93 100644 --- a/app/components/Editor/components/Contents.js +++ b/app/components/Editor/components/Contents.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; import { List } from 'immutable'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import headingToSlug from '../headingToSlug'; import type { State, Block } from '../types'; import styled from 'styled-components'; diff --git a/app/components/Editor/components/CopyButton.js b/app/components/Editor/components/CopyButton.js index 696e6c61..7e1bb6b5 100644 --- a/app/components/Editor/components/CopyButton.js +++ b/app/components/Editor/components/CopyButton.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import styled from 'styled-components'; import CopyToClipboard from 'components/CopyToClipboard'; diff --git a/app/components/Editor/components/HorizontalRule.js b/app/components/Editor/components/HorizontalRule.js index 286a5acb..49cf4ca0 100644 --- a/app/components/Editor/components/HorizontalRule.js +++ b/app/components/Editor/components/HorizontalRule.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import type { Props } from '../types'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; function HorizontalRule(props: Props) { const { state, node } = props; diff --git a/app/components/Editor/components/Image.js b/app/components/Editor/components/Image.js index af1c5de4..ad1857b4 100644 --- a/app/components/Editor/components/Image.js +++ b/app/components/Editor/components/Image.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import styled from 'styled-components'; import type { Props } from '../types'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; class Image extends Component { props: Props; diff --git a/app/components/Editor/components/InlineCode.js b/app/components/Editor/components/InlineCode.js index ad498a7b..c59965c3 100644 --- a/app/components/Editor/components/InlineCode.js +++ b/app/components/Editor/components/InlineCode.js @@ -1,6 +1,6 @@ // @flow import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; const InlineCode = styled.code` padding: .25em; diff --git a/app/components/Editor/components/TodoItem.js b/app/components/Editor/components/TodoItem.js index 2418ead4..7b18c7b8 100644 --- a/app/components/Editor/components/TodoItem.js +++ b/app/components/Editor/components/TodoItem.js @@ -1,7 +1,7 @@ // @flow import React, { Component } from 'react'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import type { Props } from '../types'; export default class TodoItem extends Component { diff --git a/app/components/Editor/components/Toolbar/components/DocumentResult.js b/app/components/Editor/components/Toolbar/components/DocumentResult.js index 7d4b157b..9b15b72b 100644 --- a/app/components/Editor/components/Toolbar/components/DocumentResult.js +++ b/app/components/Editor/components/Toolbar/components/DocumentResult.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import styled from 'styled-components'; -import { fontWeight, color } from 'styles/constants'; +import { fontWeight, color } from 'shared/styles/constants'; import Document from 'models/Document'; import NextIcon from 'components/Icon/NextIcon'; diff --git a/app/components/Empty/Empty.js b/app/components/Empty/Empty.js index 822d990a..2f44b743 100644 --- a/app/components/Empty/Empty.js +++ b/app/components/Empty/Empty.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; type Props = { children: string, diff --git a/app/components/HelpText/HelpText.js b/app/components/HelpText/HelpText.js index a4ff8c9b..4e728ed6 100644 --- a/app/components/HelpText/HelpText.js +++ b/app/components/HelpText/HelpText.js @@ -1,6 +1,6 @@ // @flow import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; const HelpText = styled.p` margin-top: 0; diff --git a/app/components/Icon/Icon.js b/app/components/Icon/Icon.js index 46bf1acb..60979273 100644 --- a/app/components/Icon/Icon.js +++ b/app/components/Icon/Icon.js @@ -1,6 +1,6 @@ // @flow import React from 'react'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; export type Props = { className?: string, diff --git a/app/components/Input/Input.js b/app/components/Input/Input.js index 6b25d24f..7a1f8178 100644 --- a/app/components/Input/Input.js +++ b/app/components/Input/Input.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import Flex from 'components/Flex'; -import { size, color } from 'styles/constants'; +import { size, color } from 'shared/styles/constants'; const RealTextarea = styled.textarea` border: 0; diff --git a/app/components/Key/key.js b/app/components/Key/key.js index 8f4954d8..0e2f7a19 100644 --- a/app/components/Key/key.js +++ b/app/components/Key/key.js @@ -1,6 +1,6 @@ // @flow import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; const Key = styled.kbd` display: inline-block; diff --git a/app/components/Labeled/Labeled.js b/app/components/Labeled/Labeled.js index bfff39c9..985617cb 100644 --- a/app/components/Labeled/Labeled.js +++ b/app/components/Labeled/Labeled.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 { size } from 'styles/constants'; +import { size } from 'shared/styles/constants'; type Props = { label: React.Element<*> | string, diff --git a/app/components/Layout/Layout.js b/app/components/Layout/Layout.js index a49b21b1..8dd96e93 100644 --- a/app/components/Layout/Layout.js +++ b/app/components/Layout/Layout.js @@ -6,7 +6,7 @@ import styled from 'styled-components'; import { observer, inject } from 'mobx-react'; import keydown from 'react-keydown'; import Flex from 'components/Flex'; -import { color, layout } from 'styles/constants'; +import { color, layout } from 'shared/styles/constants'; import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers'; import Avatar from 'components/Avatar'; diff --git a/app/components/Layout/components/HeaderBlock.js b/app/components/Layout/components/HeaderBlock.js index 55311494..1cfb7311 100644 --- a/app/components/Layout/components/HeaderBlock.js +++ b/app/components/Layout/components/HeaderBlock.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import type { User, Team } from 'types'; import Flex from 'components/Flex'; @@ -28,7 +28,6 @@ const UserName = styled.div` `; const TeamName = styled.div` - font-family: 'Atlas Grotesk'; font-weight: bold; color: ${color.text}; text-decoration: none; diff --git a/app/components/Layout/components/SidebarCollections.js b/app/components/Layout/components/SidebarCollections.js index 7cb3e992..2516fdad 100644 --- a/app/components/Layout/components/SidebarCollections.js +++ b/app/components/Layout/components/SidebarCollections.js @@ -4,7 +4,7 @@ import { observable } from 'mobx'; import { observer, inject } from 'mobx-react'; import Flex from 'components/Flex'; import styled from 'styled-components'; -import { color, fontWeight } from 'styles/constants'; +import { color, fontWeight } from 'shared/styles/constants'; import SidebarLink from './SidebarLink'; import DropToImport from 'components/DropToImport'; diff --git a/app/components/Layout/components/SidebarLink.js b/app/components/Layout/components/SidebarLink.js index 5a349fd4..b9fa5fff 100644 --- a/app/components/Layout/components/SidebarLink.js +++ b/app/components/Layout/components/SidebarLink.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { observable, action } from 'mobx'; import { observer } from 'mobx-react'; import { NavLink } from 'react-router-dom'; -import { color, fontWeight } from 'styles/constants'; +import { color, fontWeight } from 'shared/styles/constants'; import styled from 'styled-components'; import Flex from 'components/Flex'; import CollapsedIcon from 'components/Icon/CollapsedIcon'; diff --git a/app/components/LoadingListPlaceholder/LoadingListPlaceholder.js b/app/components/LoadingListPlaceholder/LoadingListPlaceholder.js index 26bf3dbc..e8c37d4a 100644 --- a/app/components/LoadingListPlaceholder/LoadingListPlaceholder.js +++ b/app/components/LoadingListPlaceholder/LoadingListPlaceholder.js @@ -2,8 +2,8 @@ import React from 'react'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import styled from 'styled-components'; -import { pulsate } from 'styles/animations'; -import { color } from 'styles/constants'; +import { pulsate } from 'shared/styles/animations'; +import { color } from 'shared/styles/constants'; import Flex from 'components/Flex'; import { randomInteger } from 'utils/random'; diff --git a/app/components/LoadingPlaceholder/components/Mask.js b/app/components/LoadingPlaceholder/components/Mask.js index a49810e1..82d271b0 100644 --- a/app/components/LoadingPlaceholder/components/Mask.js +++ b/app/components/LoadingPlaceholder/components/Mask.js @@ -1,8 +1,8 @@ // @flow import React, { Component } from 'react'; import styled from 'styled-components'; -import { pulsate } from 'styles/animations'; -import { color } from 'styles/constants'; +import { pulsate } from 'shared/styles/animations'; +import { color } from 'shared/styles/constants'; import { randomInteger } from 'utils/random'; import Flex from 'components/Flex'; diff --git a/app/components/Modal/Modal.js b/app/components/Modal/Modal.js index de4f8841..ff97a141 100644 --- a/app/components/Modal/Modal.js +++ b/app/components/Modal/Modal.js @@ -3,8 +3,8 @@ import React from 'react'; import { observer } from 'mobx-react'; import styled from 'styled-components'; import ReactModal from 'react-modal'; -import { color } from 'styles/constants'; -import { fadeAndScaleIn } from 'styles/animations'; +import { color } from 'shared/styles/constants'; +import { fadeAndScaleIn } from 'shared/styles/animations'; import CloseIcon from 'components/Icon/CloseIcon'; import Flex from 'components/Flex'; diff --git a/app/components/Toasts/Toasts.js b/app/components/Toasts/Toasts.js index fd1457c6..565fd6da 100644 --- a/app/components/Toasts/Toasts.js +++ b/app/components/Toasts/Toasts.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; import styled from 'styled-components'; -import { layout } from 'styles/constants'; +import { layout } from 'shared/styles/constants'; import Toast from './components/Toast'; @observer class Toasts extends Component { diff --git a/app/components/Toasts/components/Toast.js b/app/components/Toasts/components/Toast.js index da25a022..4fc42580 100644 --- a/app/components/Toasts/components/Toast.js +++ b/app/components/Toasts/components/Toast.js @@ -2,8 +2,8 @@ import React, { Component } from 'react'; import styled from 'styled-components'; import { darken } from 'polished'; -import { color } from 'styles/constants'; -import { fadeAndScaleIn } from 'styles/animations'; +import { color } from 'shared/styles/constants'; +import { fadeAndScaleIn } from 'shared/styles/animations'; type Props = { onRequestClose: () => void, diff --git a/app/index.js b/app/index.js index 3c5d593a..1e783351 100644 --- a/app/index.js +++ b/app/index.js @@ -14,10 +14,8 @@ import stores from 'stores'; import DocumentsStore from 'stores/DocumentsStore'; import CollectionsStore from 'stores/CollectionsStore'; import CacheStore from 'stores/CacheStore'; +import globalStyles from 'shared/styles/globals'; -import 'normalize.css/normalize.css'; -import 'styles/base.css'; -import 'styles/fonts.css'; import 'styles/transitions.css'; import 'styles/prism.css'; @@ -103,6 +101,8 @@ const RedirectDocument = ({ match }: { match: Object }) => ( ); +globalStyles(); + render(
diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index ed517e30..517c2def 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -7,7 +7,7 @@ import { observer, inject } from 'mobx-react'; import { withRouter, Prompt } from 'react-router'; import keydown from 'react-keydown'; import Flex from 'components/Flex'; -import { color, layout } from 'styles/constants'; +import { color, layout } from 'shared/styles/constants'; import { collectionUrl, updateDocumentUrl, diff --git a/app/scenes/Document/components/DocumentMove/DocumentMove.js b/app/scenes/Document/components/DocumentMove/DocumentMove.js index 53eeed8e..55dae6bd 100644 --- a/app/scenes/Document/components/DocumentMove/DocumentMove.js +++ b/app/scenes/Document/components/DocumentMove/DocumentMove.js @@ -8,7 +8,7 @@ import { Search } from 'js-search'; import ArrowKeyNavigation from 'boundless-arrow-key-navigation'; import _ from 'lodash'; import styled from 'styled-components'; -import { size } from 'styles/constants'; +import { size } from 'shared/styles/constants'; import Modal from 'components/Modal'; import Input from 'components/Input'; diff --git a/app/scenes/Document/components/DocumentMove/components/PathToDocument.js b/app/scenes/Document/components/DocumentMove/components/PathToDocument.js index 82058efd..5868596a 100644 --- a/app/scenes/Document/components/DocumentMove/components/PathToDocument.js +++ b/app/scenes/Document/components/DocumentMove/components/PathToDocument.js @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import invariant from 'invariant'; import _ from 'lodash'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import Flex from 'components/Flex'; import GoToIcon from 'components/Icon/GoToIcon'; diff --git a/app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js b/app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js index 1052f403..21c019a8 100644 --- a/app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js +++ b/app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js @@ -2,8 +2,8 @@ import React from 'react'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import styled from 'styled-components'; -import { pulsate } from 'styles/animations'; -import { color } from 'styles/constants'; +import { pulsate } from 'shared/styles/animations'; +import { color } from 'shared/styles/constants'; import Flex from 'components/Flex'; import { randomInteger } from 'utils/random'; diff --git a/app/scenes/Search/components/SearchField/SearchField.js b/app/scenes/Search/components/SearchField.js similarity index 96% rename from app/scenes/Search/components/SearchField/SearchField.js rename to app/scenes/Search/components/SearchField.js index 8c064576..eeffe9a2 100644 --- a/app/scenes/Search/components/SearchField/SearchField.js +++ b/app/scenes/Search/components/SearchField.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import SearchIcon from 'components/Icon/SearchIcon'; import Flex from 'components/Flex'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import styled from 'styled-components'; class SearchField extends Component { diff --git a/app/scenes/Search/components/SearchField/index.js b/app/scenes/Search/components/SearchField/index.js deleted file mode 100644 index a45be6bf..00000000 --- a/app/scenes/Search/components/SearchField/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -import SearchField from './SearchField'; -export default SearchField; diff --git a/app/scenes/Settings/Settings.js b/app/scenes/Settings/Settings.js index 82b1803c..a0c79297 100644 --- a/app/scenes/Settings/Settings.js +++ b/app/scenes/Settings/Settings.js @@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import ApiKeyRow from './components/ApiKeyRow'; import SettingsStore from './SettingsStore'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; import Flex from 'components/Flex'; import Button from 'components/Button'; diff --git a/app/scenes/Settings/components/ApiKeyRow/ApiKeyRow.js b/app/scenes/Settings/components/ApiKeyRow.js similarity index 95% rename from app/scenes/Settings/components/ApiKeyRow/ApiKeyRow.js rename to app/scenes/Settings/components/ApiKeyRow.js index 36e7dbc4..f6f2ae09 100644 --- a/app/scenes/Settings/components/ApiKeyRow/ApiKeyRow.js +++ b/app/scenes/Settings/components/ApiKeyRow.js @@ -3,7 +3,7 @@ import React from 'react'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; import styled from 'styled-components'; -import { color } from 'styles/constants'; +import { color } from 'shared/styles/constants'; type Props = { id: string, diff --git a/app/scenes/Settings/components/ApiKeyRow/index.js b/app/scenes/Settings/components/ApiKeyRow/index.js deleted file mode 100644 index 1c94f8f0..00000000 --- a/app/scenes/Settings/components/ApiKeyRow/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -import ApiKeyRow from './ApiKeyRow'; -export default ApiKeyRow; diff --git a/app/styles/base.css b/app/styles/base.css deleted file mode 100644 index ec8a87f0..00000000 --- a/app/styles/base.css +++ /dev/null @@ -1,143 +0,0 @@ -* { - box-sizing: border-box; -} - -:root { - --line-height-1: 1; - --line-height-2: 1.125; - --line-height-3: 1.25; - --line-height-4: 1.5; - --letter-spacing: 1; - --caps-letter-spacing: 0.2em; - --bold-font-weight: bold; -} - -html, -body, -.viewport { - width: 100%; - min-height: 100vh; - margin: 0; -} - -body, -button, -input, -optgroup, -select, -textarea { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, - Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; -} - -body { - font-size: 16px; - line-height: 1.5; - margin: 0; - color: #617180; - background-color: #fff; - display: flex; - - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -img { - max-width: 100%; - height: auto; -} -svg { - max-height: 100%; -} -a { - color: #16B3FF; - text-decoration: none; - cursor: pointer; -} -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: 500; - line-height: 1.25; - margin-top: 1em; - margin-bottom: 0.5em; - color: #1f2429; -} -h1 { - font-size: 2em; -} -h2 { - font-size: 1.5em; -} -h3 { - font-size: 1.25em; -} -h4 { - font-size: 1em; -} -h5 { - font-size: 0.875em; -} -h6 { - font-size: 0.75em; -} -p, -dl, -ol, -ul, -pre, -blockquote { - margin-top: 1em; - margin-bottom: 1em; -} -code, -pre, -samp { - font-family: 'Atlas Typewriter', 'Source Code Pro', Menlo, Consolas, - 'Liberation Mono', monospace; -} -code, -samp { - font-size: 85%; - padding: 0.125em; -} -pre { - font-size: 85%; - overflow: scroll; -} -blockquote { - font-size: 1.25em; - font-style: italic; - margin-left: 0; -} -hr { - margin: 2em 0; - border: 0; - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: #dedede; -} -*[role='button'] { - cursor: pointer; -} - -.hljs { - border: 1px solid rgba(0, 0, 0, 0.0625); - padding: 1em; - border-radius: 0.25em; -} - -.activeDropZone { - background: #4E5C6E; -} - -.activeDropZone a { - color: #FFF !important; -} - -.ReactModal__Body--open { - overflow: hidden; -} diff --git a/app/styles/fonts.css b/app/styles/fonts.css deleted file mode 100644 index c5cff8a8..00000000 --- a/app/styles/fonts.css +++ /dev/null @@ -1,62 +0,0 @@ -@font-face { - font-family: 'Atlas Grotesk'; - src: url('../fonts/atlas/AtlasGrotesk-Regular-Web.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'Atlas Grotesk'; - src: url('../fonts/atlas/AtlasGrotesk-Medium-Web.woff') format('woff'); - font-weight: bold; - font-style: normal; -} - -/*@font-face { - font-family: 'Atlas Grotesk'; - src: url('../fonts/atlas/AtlasGrotesk-Light-Web.woff') format('woff'); - font-weight: lighter; - font-style: normal; -} - -@font-face { - font-family: 'Atlas Grotesk'; - src: url('../fonts/atlas/AtlasGrotesk-LightItalic-Web.woff') format('woff'); - font-weight: lighter; - font-style: italic; -}*/ - -@font-face { - font-family: 'Atlas Grotesk'; - src: url('../fonts/atlas/AtlasGrotesk-RegularItalic-Web.woff') format('woff'); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: 'Atlas Grotesk'; - src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff'); - font-weight: bold; - font-style: italic; -} - -@font-face { - font-family: 'Atlas Grotesk'; - src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff'); - font-weight: bold; - font-style: italic; -} - -@font-face { - font-family: 'Atlas Typewriter'; - src: url('../fonts/atlas/AtlasTypewriterRegular.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'Atlas Typewriter'; - src: url('../fonts/atlas/AtlasTypewriterMedium.woff') format('woff'); - font-weight: bold; - font-style: normal; -} diff --git a/package.json b/package.json index d30e3667..bab052ba 100644 --- a/package.json +++ b/package.json @@ -167,6 +167,7 @@ "style-loader": "^0.18.2", "styled-components": "^2.0.0", "styled-components-grid": "^1.0.0-preview.15", + "styled-normalize": "^2.2.1", "url-loader": "0.5.7", "uuid": "2.0.2", "validator": "5.2.0", diff --git a/server/pages/components/Layout.js b/server/pages/components/Layout.js index 17738152..3f873c08 100644 --- a/server/pages/components/Layout.js +++ b/server/pages/components/Layout.js @@ -2,12 +2,15 @@ import React from 'react'; import { Helmet } from 'react-helmet'; import Navigation from './Navigation'; +import globalStyles from '../../../shared/styles/globals'; type Props = { children?: React$Element<*>, }; export default function Layout({ children }: Props) { + globalStyles(); + return ( diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js index 7aefe5fc..fc2ce553 100644 --- a/server/pages/components/Navigation.js +++ b/server/pages/components/Navigation.js @@ -1,10 +1,12 @@ // @flow import React from 'react'; +import styled from 'styled-components'; +import { color } from '../../../shared/styles/constants'; -export default function Navigation() { +function Navigation() { return ( ); } + +const Brand = styled.a` + font-weight: 600; + font-size: 20px; + text-decoration: none; + color: ${color.black}; +`; + +export default Navigation; diff --git a/app/styles/animations.js b/shared/styles/animations.js similarity index 100% rename from app/styles/animations.js rename to shared/styles/animations.js diff --git a/shared/styles/base.js b/shared/styles/base.js new file mode 100644 index 00000000..8335ad9d --- /dev/null +++ b/shared/styles/base.js @@ -0,0 +1,83 @@ +// @flow +import { color } from './constants'; + +export default ` + * { + box-sizing: border-box; + } + + html, + body { + width: 100%; + min-height: 100vh; + margin: 0; + padding: 0; + } + + body, + button, + input, + optgroup, + select, + textarea { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, + Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } + + body { + font-size: 16px; + line-height: 1.5; + color: ${color.text}; + + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } + + a { + color: ${color.blue}; + text-decoration: none; + cursor: pointer; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: 500; + line-height: 1.25; + margin-top: 1em; + margin-bottom: 0.5em; + color: ${color.text}; + } + h1 { font-size: 2em; } + h2 { font-size: 1.5em; } + h3 { font-size: 1.25em; } + h4 { font-size: 1em; } + h5 { font-size: 0.875em; } + h6 { font-size: 0.75em; } + + p, + dl, + ol, + ul, + pre, + blockquote { + margin-top: 1em; + margin-bottom: 1em; + } + + .activeDropZone { + background: #4E5C6E; + } + + .activeDropZone a { + color: #FFF !important; + } + + .ReactModal__Body--open { + overflow: hidden; + } +`; diff --git a/app/styles/constants.js b/shared/styles/constants.js similarity index 97% rename from app/styles/constants.js rename to shared/styles/constants.js index 24b53ab6..9bd4f6f4 100644 --- a/app/styles/constants.js +++ b/shared/styles/constants.js @@ -1,5 +1,4 @@ // @flow - export const layout = { padding: '1.5vw 1.875vw', vpadding: '1.5vw', @@ -60,6 +59,5 @@ export const color = { /* Misc */ white: '#FFFFFF', black: '#000000', - - /* Alert colors */ + blue: '#16B3FF', }; diff --git a/shared/styles/globals.js b/shared/styles/globals.js new file mode 100644 index 00000000..6bdb1a67 --- /dev/null +++ b/shared/styles/globals.js @@ -0,0 +1,9 @@ +// @flow +import styledNormalize from 'styled-normalize'; +import { injectGlobal } from 'styled-components'; +import base from './base'; + +export default () => injectGlobal` + ${styledNormalize} + ${base} +`; diff --git a/webpack.config.js b/webpack.config.js index 56349829..53e855a8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -50,9 +50,9 @@ module.exports = { noParse: [new RegExp('node_modules/localforage/dist/localforage.js')], }, resolve: { - root: path.join(__dirname, 'app'), - // you can now require('file') instead of require('file.json') + root: path.resolve(__dirname, 'app'), extensions: ['', '.js', '.json'], + alias: { shared: path.resolve(__dirname, 'shared') } }, plugins: [ definePlugin, diff --git a/yarn.lock b/yarn.lock index 16383256..f5accbea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8435,6 +8435,10 @@ styled-components@^2.0.0: stylis "^3.2.1" supports-color "^3.2.3" +styled-normalize@^2.2.1: + version "2.2.1" + resolved "https://registry.npmjs.org/styled-normalize/-/styled-normalize-2.2.1.tgz#c93a007c0339a69e3254eeef8cb6a5a96e5ca4eb" + stylis@^3.2.1: version "3.2.15" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.15.tgz#1800f829fdf3cf0d647ae6cdb5fb70a1fd81c3e2"