Sharing global styles
This commit is contained in:
parent
4863680d86
commit
fc45d6a180
|
@ -21,6 +21,8 @@ module.system.node.resolve_dirname=app
|
||||||
|
|
||||||
module.name_mapper='^\(.*\)\.s?css$' -> 'empty/object'
|
module.name_mapper='^\(.*\)\.s?css$' -> 'empty/object'
|
||||||
module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
|
module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
|
||||||
|
module.name_mapper='^shared\/\(.*\)$' -> '<PROJECT_ROOT>/shared/\1'
|
||||||
|
|
||||||
module.file_ext=.js
|
module.file_ext=.js
|
||||||
module.file_ext=.scss
|
module.file_ext=.scss
|
||||||
module.file_ext=.md
|
module.file_ext=.md
|
||||||
|
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
children: React.Element<*>,
|
children: React.Element<*>,
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import { darken, lighten } from 'polished';
|
import { darken, lighten } from 'polished';
|
||||||
|
|
||||||
const RealButton = styled.button`
|
const RealButton = styled.button`
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import Tooltip from 'components/Tooltip';
|
import Tooltip from 'components/Tooltip';
|
||||||
import Document from 'models/Document';
|
import Document from 'models/Document';
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import Document from 'models/Document';
|
import Document from 'models/Document';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import StarredIcon from 'components/Icon/StarredIcon';
|
import StarredIcon from 'components/Icon/StarredIcon';
|
||||||
import PublishingInfo from './components/PublishingInfo';
|
import PublishingInfo from './components/PublishingInfo';
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import Collection from 'models/Collection';
|
import Collection from 'models/Collection';
|
||||||
import Document from 'models/Document';
|
import Document from 'models/Document';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
|
|
|
@ -6,8 +6,8 @@ import { observer } from 'mobx-react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import Portal from 'react-portal';
|
import Portal from 'react-portal';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import { fadeAndScaleIn } from 'styles/animations';
|
import { fadeAndScaleIn } from 'shared/styles/animations';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
label: React.Element<*>,
|
label: React.Element<*>,
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
const DropdownMenuItem = ({
|
const DropdownMenuItem = ({
|
||||||
onClick,
|
onClick,
|
||||||
|
|
|
@ -6,7 +6,7 @@ import Portal from 'react-portal';
|
||||||
import { observable } from 'mobx';
|
import { observable } from 'mobx';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import PlusIcon from 'components/Icon/PlusIcon';
|
import PlusIcon from 'components/Icon/PlusIcon';
|
||||||
import BlockMenu from 'menus/BlockMenu';
|
import BlockMenu from 'menus/BlockMenu';
|
||||||
import type { State } from '../types';
|
import type { State } from '../types';
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import CopyButton from './CopyButton';
|
import CopyButton from './CopyButton';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import type { Props } from '../types';
|
import type { Props } from '../types';
|
||||||
|
|
||||||
export default function Code({ children, node, readOnly, attributes }: Props) {
|
export default function Code({ children, node, readOnly, attributes }: Props) {
|
||||||
|
|
|
@ -3,7 +3,7 @@ import React, { Component } from 'react';
|
||||||
import { observable } from 'mobx';
|
import { observable } from 'mobx';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import { List } from 'immutable';
|
import { List } from 'immutable';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import headingToSlug from '../headingToSlug';
|
import headingToSlug from '../headingToSlug';
|
||||||
import type { State, Block } from '../types';
|
import type { State, Block } from '../types';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { observable } from 'mobx';
|
import { observable } from 'mobx';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import CopyToClipboard from 'components/CopyToClipboard';
|
import CopyToClipboard from 'components/CopyToClipboard';
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import type { Props } from '../types';
|
import type { Props } from '../types';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
function HorizontalRule(props: Props) {
|
function HorizontalRule(props: Props) {
|
||||||
const { state, node } = props;
|
const { state, node } = props;
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import type { Props } from '../types';
|
import type { Props } from '../types';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
class Image extends Component {
|
class Image extends Component {
|
||||||
props: Props;
|
props: Props;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
const InlineCode = styled.code`
|
const InlineCode = styled.code`
|
||||||
padding: .25em;
|
padding: .25em;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import type { Props } from '../types';
|
import type { Props } from '../types';
|
||||||
|
|
||||||
export default class TodoItem extends Component {
|
export default class TodoItem extends Component {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { fontWeight, color } from 'styles/constants';
|
import { fontWeight, color } from 'shared/styles/constants';
|
||||||
import Document from 'models/Document';
|
import Document from 'models/Document';
|
||||||
import NextIcon from 'components/Icon/NextIcon';
|
import NextIcon from 'components/Icon/NextIcon';
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
children: string,
|
children: string,
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
const HelpText = styled.p`
|
const HelpText = styled.p`
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
export type Props = {
|
export type Props = {
|
||||||
className?: string,
|
className?: string,
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import { size, color } from 'styles/constants';
|
import { size, color } from 'shared/styles/constants';
|
||||||
|
|
||||||
const RealTextarea = styled.textarea`
|
const RealTextarea = styled.textarea`
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
const Key = styled.kbd`
|
const Key = styled.kbd`
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { size } from 'styles/constants';
|
import { size } from 'shared/styles/constants';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
label: React.Element<*> | string,
|
label: React.Element<*> | string,
|
||||||
|
|
|
@ -6,7 +6,7 @@ import styled from 'styled-components';
|
||||||
import { observer, inject } from 'mobx-react';
|
import { observer, inject } from 'mobx-react';
|
||||||
import keydown from 'react-keydown';
|
import keydown from 'react-keydown';
|
||||||
import Flex from 'components/Flex';
|
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 { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
|
||||||
|
|
||||||
import Avatar from 'components/Avatar';
|
import Avatar from 'components/Avatar';
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import type { User, Team } from 'types';
|
import type { User, Team } from 'types';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
|
|
||||||
|
@ -28,7 +28,6 @@ const UserName = styled.div`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TeamName = styled.div`
|
const TeamName = styled.div`
|
||||||
font-family: 'Atlas Grotesk';
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: ${color.text};
|
color: ${color.text};
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { observable } from 'mobx';
|
||||||
import { observer, inject } from 'mobx-react';
|
import { observer, inject } from 'mobx-react';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color, fontWeight } from 'styles/constants';
|
import { color, fontWeight } from 'shared/styles/constants';
|
||||||
|
|
||||||
import SidebarLink from './SidebarLink';
|
import SidebarLink from './SidebarLink';
|
||||||
import DropToImport from 'components/DropToImport';
|
import DropToImport from 'components/DropToImport';
|
||||||
|
|
|
@ -3,7 +3,7 @@ import React, { Component } from 'react';
|
||||||
import { observable, action } from 'mobx';
|
import { observable, action } from 'mobx';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import { NavLink } from 'react-router-dom';
|
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 styled from 'styled-components';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import CollapsedIcon from 'components/Icon/CollapsedIcon';
|
import CollapsedIcon from 'components/Icon/CollapsedIcon';
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { pulsate } from 'styles/animations';
|
import { pulsate } from 'shared/styles/animations';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
|
|
||||||
import { randomInteger } from 'utils/random';
|
import { randomInteger } from 'utils/random';
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { pulsate } from 'styles/animations';
|
import { pulsate } from 'shared/styles/animations';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import { randomInteger } from 'utils/random';
|
import { randomInteger } from 'utils/random';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
|
|
||||||
|
|
|
@ -3,8 +3,8 @@ import React from 'react';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import ReactModal from 'react-modal';
|
import ReactModal from 'react-modal';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import { fadeAndScaleIn } from 'styles/animations';
|
import { fadeAndScaleIn } from 'shared/styles/animations';
|
||||||
import CloseIcon from 'components/Icon/CloseIcon';
|
import CloseIcon from 'components/Icon/CloseIcon';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { inject, observer } from 'mobx-react';
|
import { inject, observer } from 'mobx-react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { layout } from 'styles/constants';
|
import { layout } from 'shared/styles/constants';
|
||||||
import Toast from './components/Toast';
|
import Toast from './components/Toast';
|
||||||
|
|
||||||
@observer class Toasts extends Component {
|
@observer class Toasts extends Component {
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { darken } from 'polished';
|
import { darken } from 'polished';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import { fadeAndScaleIn } from 'styles/animations';
|
import { fadeAndScaleIn } from 'shared/styles/animations';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
onRequestClose: () => void,
|
onRequestClose: () => void,
|
||||||
|
|
|
@ -14,10 +14,8 @@ import stores from 'stores';
|
||||||
import DocumentsStore from 'stores/DocumentsStore';
|
import DocumentsStore from 'stores/DocumentsStore';
|
||||||
import CollectionsStore from 'stores/CollectionsStore';
|
import CollectionsStore from 'stores/CollectionsStore';
|
||||||
import CacheStore from 'stores/CacheStore';
|
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/transitions.css';
|
||||||
import 'styles/prism.css';
|
import 'styles/prism.css';
|
||||||
|
|
||||||
|
@ -103,6 +101,8 @@ const RedirectDocument = ({ match }: { match: Object }) => (
|
||||||
<Redirect to={`/doc/${match.params.documentSlug}`} />
|
<Redirect to={`/doc/${match.params.documentSlug}`} />
|
||||||
);
|
);
|
||||||
|
|
||||||
|
globalStyles();
|
||||||
|
|
||||||
render(
|
render(
|
||||||
<div style={{ display: 'flex', flex: 1, height: '100%' }}>
|
<div style={{ display: 'flex', flex: 1, height: '100%' }}>
|
||||||
<Provider {...stores}>
|
<Provider {...stores}>
|
||||||
|
|
|
@ -7,7 +7,7 @@ import { observer, inject } from 'mobx-react';
|
||||||
import { withRouter, Prompt } from 'react-router';
|
import { withRouter, Prompt } from 'react-router';
|
||||||
import keydown from 'react-keydown';
|
import keydown from 'react-keydown';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import { color, layout } from 'styles/constants';
|
import { color, layout } from 'shared/styles/constants';
|
||||||
import {
|
import {
|
||||||
collectionUrl,
|
collectionUrl,
|
||||||
updateDocumentUrl,
|
updateDocumentUrl,
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { Search } from 'js-search';
|
||||||
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
|
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { size } from 'styles/constants';
|
import { size } from 'shared/styles/constants';
|
||||||
|
|
||||||
import Modal from 'components/Modal';
|
import Modal from 'components/Modal';
|
||||||
import Input from 'components/Input';
|
import Input from 'components/Input';
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
|
||||||
import invariant from 'invariant';
|
import invariant from 'invariant';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import GoToIcon from 'components/Icon/GoToIcon';
|
import GoToIcon from 'components/Icon/GoToIcon';
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { pulsate } from 'styles/animations';
|
import { pulsate } from 'shared/styles/animations';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
|
|
||||||
import { randomInteger } from 'utils/random';
|
import { randomInteger } from 'utils/random';
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import SearchIcon from 'components/Icon/SearchIcon';
|
import SearchIcon from 'components/Icon/SearchIcon';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
class SearchField extends Component {
|
class SearchField extends Component {
|
|
@ -1,3 +0,0 @@
|
||||||
// @flow
|
|
||||||
import SearchField from './SearchField';
|
|
||||||
export default SearchField;
|
|
|
@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import ApiKeyRow from './components/ApiKeyRow';
|
import ApiKeyRow from './components/ApiKeyRow';
|
||||||
import SettingsStore from './SettingsStore';
|
import SettingsStore from './SettingsStore';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import Button from 'components/Button';
|
import Button from 'components/Button';
|
||||||
|
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
||||||
import { observable } from 'mobx';
|
import { observable } from 'mobx';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
id: string,
|
id: string,
|
|
@ -1,3 +0,0 @@
|
||||||
// @flow
|
|
||||||
import ApiKeyRow from './ApiKeyRow';
|
|
||||||
export default ApiKeyRow;
|
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -167,6 +167,7 @@
|
||||||
"style-loader": "^0.18.2",
|
"style-loader": "^0.18.2",
|
||||||
"styled-components": "^2.0.0",
|
"styled-components": "^2.0.0",
|
||||||
"styled-components-grid": "^1.0.0-preview.15",
|
"styled-components-grid": "^1.0.0-preview.15",
|
||||||
|
"styled-normalize": "^2.2.1",
|
||||||
"url-loader": "0.5.7",
|
"url-loader": "0.5.7",
|
||||||
"uuid": "2.0.2",
|
"uuid": "2.0.2",
|
||||||
"validator": "5.2.0",
|
"validator": "5.2.0",
|
||||||
|
|
|
@ -2,12 +2,15 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import Navigation from './Navigation';
|
import Navigation from './Navigation';
|
||||||
|
import globalStyles from '../../../shared/styles/globals';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
children?: React$Element<*>,
|
children?: React$Element<*>,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Layout({ children }: Props) {
|
export default function Layout({ children }: Props) {
|
||||||
|
globalStyles();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { color } from '../../../shared/styles/constants';
|
||||||
|
|
||||||
export default function Navigation() {
|
function Navigation() {
|
||||||
return (
|
return (
|
||||||
<nav>
|
<nav>
|
||||||
<a href="/">Atlas</a>
|
<Brand href="/">Atlas</Brand>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/about">About</a></li>
|
<li><a href="/about">About</a></li>
|
||||||
<li><a href="/pricing">Pricing</a></li>
|
<li><a href="/pricing">Pricing</a></li>
|
||||||
|
@ -12,3 +14,12 @@ export default function Navigation() {
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Brand = styled.a`
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: ${color.black};
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
`;
|
|
@ -1,5 +1,4 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
export const layout = {
|
export const layout = {
|
||||||
padding: '1.5vw 1.875vw',
|
padding: '1.5vw 1.875vw',
|
||||||
vpadding: '1.5vw',
|
vpadding: '1.5vw',
|
||||||
|
@ -60,6 +59,5 @@ export const color = {
|
||||||
/* Misc */
|
/* Misc */
|
||||||
white: '#FFFFFF',
|
white: '#FFFFFF',
|
||||||
black: '#000000',
|
black: '#000000',
|
||||||
|
blue: '#16B3FF',
|
||||||
/* Alert colors */
|
|
||||||
};
|
};
|
|
@ -0,0 +1,9 @@
|
||||||
|
// @flow
|
||||||
|
import styledNormalize from 'styled-normalize';
|
||||||
|
import { injectGlobal } from 'styled-components';
|
||||||
|
import base from './base';
|
||||||
|
|
||||||
|
export default () => injectGlobal`
|
||||||
|
${styledNormalize}
|
||||||
|
${base}
|
||||||
|
`;
|
|
@ -50,9 +50,9 @@ module.exports = {
|
||||||
noParse: [new RegExp('node_modules/localforage/dist/localforage.js')],
|
noParse: [new RegExp('node_modules/localforage/dist/localforage.js')],
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
root: path.join(__dirname, 'app'),
|
root: path.resolve(__dirname, 'app'),
|
||||||
// you can now require('file') instead of require('file.json')
|
|
||||||
extensions: ['', '.js', '.json'],
|
extensions: ['', '.js', '.json'],
|
||||||
|
alias: { shared: path.resolve(__dirname, 'shared') }
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
definePlugin,
|
definePlugin,
|
||||||
|
|
|
@ -8435,6 +8435,10 @@ styled-components@^2.0.0:
|
||||||
stylis "^3.2.1"
|
stylis "^3.2.1"
|
||||||
supports-color "^3.2.3"
|
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:
|
stylis@^3.2.1:
|
||||||
version "3.2.15"
|
version "3.2.15"
|
||||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.15.tgz#1800f829fdf3cf0d647ae6cdb5fb70a1fd81c3e2"
|
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.15.tgz#1800f829fdf3cf0d647ae6cdb5fb70a1fd81c3e2"
|
||||||
|
|
Reference in New Issue