add themes

2021-03-27 11:49:46 +00:00
parent ca6d42343b
commit c221e8756e
9 changed files with 488 additions and 123 deletions
--- a/package.json
+++ b/package.json
@@ -9,12 +9,14 @@
    "content-type-parser": "^1.0.2",
    "copy-to-clipboard": "^3.3.1",
    "history": "^5.0.0",
+    "local-storage": "^2.0.0",
    "pako": "^2.0.3",
    "prismjs": "^1.23.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
-    "react-simple-code-editor": "^0.11.0"
+    "react-simple-code-editor": "^0.11.0",
+    "styled-components": "^5.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -1,10 +1,30 @@
 import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import ls from 'local-storage';

 import EditorControls from './EditorControls';
 import EditorTextArea from './EditorTextArea';
+import themes from '../style/themes';

 export default function Editor({ content, setContent, contentType }) {
  const [language, setLanguage] = useState('plain');
+  const [theme, setTheme] = useState(() => {
+    const preference = ls.get('theme');
+    if (preference && themes[preference]) {
+      return preference;
+    } else {
+      return 'dark';
+    }
+  });
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      ls.remove('theme');
+    } else {
+      ls.set('theme', theme);
+    }
+  }, [theme])
+
  useEffect(() => {
    if (contentType) {
      setLanguage(contentType);
@@ -12,7 +32,9 @@ export default function Editor({ content, setContent, contentType }) {
  }, [contentType]);

  return <>
-    <EditorControls code={content} language={language} setLanguage={setLanguage} />
+    <ThemeProvider theme={themes[theme]}>
+      <EditorControls code={content} language={language} setLanguage={setLanguage} theme={theme} setTheme={setTheme} />
      <EditorTextArea code={content} setCode={setContent} language={language} />
+    </ThemeProvider>
  </>
 }
--- a/src/components/EditorControls.js
+++ b/src/components/EditorControls.js
@@ -1,11 +1,13 @@
 import { useState, useEffect } from 'react';
-import { languageIds } from '../highlighting';
+import styled from 'styled-components';
 import { gzip } from 'pako';
 import history from 'history/browser';
 import copy from 'copy-to-clipboard';

-export default function EditorControls({ code, language, setLanguage }) {
-  const [langMenuOpen, setLangMenuOpen] = useState(false);
+import { languageIds } from '../highlighting';
+import themes from '../style/themes';
+
+export default function EditorControls({ code, language, setLanguage, theme, setTheme }) {
  const [saving, setSaving] = useState(false);
  const [recentlySaved, setRecentlySaved] = useState(false);

@@ -30,39 +32,94 @@ export default function EditorControls({ code, language, setLanguage }) {
    });
  }

-  function toggleLangMenu() {
-    setLangMenuOpen(!langMenuOpen);
-  }
-
-  function selectLanguage(e, language) {
-    e.stopPropagation();
-    setLangMenuOpen(false);
-    setLanguage(language);
-  }
-
  return (
-    <header>
-      <div className="section">
-        <div className="button" onClick={save}>
+    <Header>
+      <Section>
+        <Button onClick={save}>
          {recentlySaved
            ? '[link copied!]'
            : saving ? '[saving...]' : '[save]'
          }
-        </div>
-        <div className="button" onClick={toggleLangMenu}>
-          [language: {language}]
-          {langMenuOpen && (
-            <ul>  
-              {languageIds.map(id => <li key={id} onClick={e => selectLanguage(e, id)}>{id}</li>)}
-            </ul>
+        </Button>
+        <MenuButton label="language" value={language} setValue={setLanguage} ids={languageIds} />
+      </Section>
+      <Section>
+        <MenuButton label="theme" value={theme} setValue={setTheme} ids={Object.keys(themes)} />
+        <Button as="a" href="https://github.com/lucko/paste" target="_blank" rel="noreferrer">[about]</Button>
+      </Section>
+    </Header>
+  )
+}
+
+const Header = styled.header`
+  position: fixed;
+  z-index: 2;
+  width: 100%;
+  height: 2em;
+  color: ${props => props.theme.primary};
+  background: ${props => props.theme.secondary};
+  display: flex;
+  justify-content: space-between;
+`;
+
+const Section = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Button = styled.div`
+  cursor: pointer;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 .25em;
+  color: inherit;
+  text-decoration: none;
+
+  :hover {
+    background: ${props => props.theme.highlight};
+  }
+`;
+
+const Menu = styled.ul`
+  position: absolute;
+  top: 2em;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: ${props => props.theme.highlight};
+
+  > li {
+    padding: .15em .5em;
+  }
+
+  > li:hover {
+    background-color: ${props => props.theme.secondary};
+  }
+`;
+
+const MenuButton = ({ label, ids, value, setValue }) => {
+  const [open, setOpen] = useState(false);
+
+  function toggleOpen() {
+    setOpen(!open);
+  }
+
+  function select(e, id) {
+    e.stopPropagation();
+    setOpen(false);
+    setValue(id);
+  }
+
+  return (
+    <Button onClick={toggleOpen}>
+      [{label}: {value}]
+      {open && (
+        <Menu>  
+          {ids.map(id => <li key={id} onClick={e => select(e, id)}>{id}</li>)}
+        </Menu>
      )}
-        </div>
-      </div>
-      <div className="section">
-        <a className="button" href="https://bytebin.lucko.me/" target="_blank" rel="noreferrer">[not pasting code?]</a>
-        <a className="button" href="https://github.com/lucko/paste" target="_blank" rel="noreferrer">[about paste]</a>
-      </div>
-    </header>
+    </Button>
  )
 }

--- a/src/components/EditorPrismStyle.js
+++ b/src/components/EditorPrismStyle.js
@@ -0,0 +1,155 @@
+import styled from 'styled-components';
+
+export default function EditorPrismStyle({ children }) {
+  return <Main>{children}</Main>
+}
+
+const Main = styled.main`
+  padding-top: 2em;
+  color: ${props => props.theme.editor.primary};
+  background: ${props => props.theme.editor.background};
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: 0 1px white;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: ${props => props.theme.editor.selection};
+  }
+
+  pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+  code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: ${props => props.theme.editor.selection};
+  }
+
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+
+  /* Code blocks */
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: ${props => props.theme.editor.comment};
+  }
+
+  .token.punctuation {
+    color: ${props => props.theme.editor.punctuation};
+  }
+
+  .token.annotation {
+    color: ${props => props.theme.editor.annotation};
+  }
+
+  .token.namespace {
+    color: ${props => props.theme.editor.namespace};
+  }
+
+  .token.property,
+  .token.tag {
+    color: ${props => props.theme.editor.property};
+  }
+
+  .token.boolean {
+    color: ${props => props.theme.editor.keyword};
+  }
+  
+  .token.constant {
+    color: ${props => props.theme.editor.constant};
+  }
+
+  .token.number,
+  .token.symbol,
+  .token.deleted {
+    color: ${props => props.theme.editor.number};
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: ${props => props.theme.editor.selector};
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: ${props => props.theme.editor.operator};
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: ${props => props.theme.editor.keyword};
+  }
+
+  .token.comment .token.keyword {
+    color: ${props => props.theme.editor.primary};
+  }
+
+  .token.comment .token.tag,
+  .token.comment .token.tag > .token.punctuation {
+    color: ${props => props.theme.editor.commentTag};
+  }
+
+  .token.function {
+    color: ${props => props.theme.editor.function};
+  }
+
+  .token.class-name {
+    color: ${props => props.theme.editor.className};
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: ${props => props.theme.editor.variable};
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+`;
--- a/src/components/EditorTextArea.js
+++ b/src/components/EditorTextArea.js
@@ -1,8 +1,8 @@
+import styled from 'styled-components';
 import ReactEditor from 'react-simple-code-editor';
+import EditorPrismStyle from './EditorPrismStyle';
 import { getHighlighter } from '../highlighting';

-import 'prismjs/themes/prism.css';
-
 export default function EditorTextArea({ code, setCode, language }) {
  const highlight = getHighlighter(language);

@@ -14,16 +14,40 @@ export default function EditorTextArea({ code, setCode, language }) {
  }

  return (
-    <main>
-      <ReactEditor
+    <EditorPrismStyle>
+      <StyledReactEditor
        value={code}
        onValueChange={setCode}
        highlight={highlightWithLineNumbers}
        placeholder={'Type some code...'}
        padding={10}
        textareaId='code-area'
-        className='editor'
      />
-    </main>
+    </EditorPrismStyle>
  )
 }
+
+const StyledReactEditor = styled(ReactEditor)`
+  counter-reset: line;
+  font-size: 16px;
+  outline: 0;
+  min-height: calc(100vh - 2em);
+
+  #code-area {
+    outline: none;
+    padding-left: 60px !important;
+  }
+
+  pre {
+    padding-left: 60px !important;
+  }
+
+  .editorLineNumber {
+    position: absolute;
+    left: 0px;
+    color: ${props => props.theme.editor.lineNumber};
+    text-align: right;
+    width: 40px;
+    font-weight: 100;
+  }
+`;
--- a/src/highlighting.js
+++ b/src/highlighting.js
@@ -11,6 +11,8 @@ import 'prismjs/components/prism-go';
 import 'prismjs/components/prism-groovy';
 import 'prismjs/components/prism-haskell';
 import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-javadoclike';
+import 'prismjs/components/prism-javadoc';
 import 'prismjs/components/prism-javastacktrace';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-json';
@@ -61,6 +63,6 @@ export const languageIds = [
 ]

 export function getHighlighter(language) {
-  const grammar = language === 'plain' ? {} : languages[language];
+  const grammar = languages[language] || {};
  return (input) => highlight(input, grammar);
 }
--- a/src/style/base.css
+++ b/src/style/base.css
@@ -10,82 +10,3 @@ body {
 * {
  box-sizing: border-box;
 }
-
-header {
-  position: fixed;
-  z-index: 2;
-  width: 100%;
-  height: 2em;
-  background: #025;
-  color: #adf;
-  display: flex;
-  justify-content: space-between;
-}
-
-header > div {
-  display: flex;
-  align-items: center;
-}
-
-header .button {
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 .25em;
-}
-
-header a {
-  color: inherit;
-  text-decoration: none;
-}
-
-header .button:hover {
-  background: #36368c;
-}
-
-header .button > ul {
-  position: absolute;
-  top: 2em;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  background-color: #36368c;
-}
-
-header .button > ul > li {
-  padding: .15em .5em;
-}
-
-header .button > ul > li:hover {
-  background-color: #025;
-}
-
-main {
-  padding-top: 2em;
-}
-
-.editor {
-  counter-reset: line;
-  font-size: 16px;
-  outline: 0;
-  min-height: calc(100vh - 2em);
-}
-
-.editor #code-area {
-  outline: none;
-  padding-left: 60px !important;
-}
-
-.editor pre {
-  padding-left: 60px !important;
-}
-
-.editor .editorLineNumber {
-  position: absolute;
-  left: 0px;
-  color: #cccccc;
-  text-align: right;
-  width: 40px;
-  font-weight: 100;
-}
--- a/src/style/themes.js
+++ b/src/style/themes.js
@@ -0,0 +1,56 @@
+const themes = {
+  light: {
+    primary: '#aaddff',
+    secondary: '#022550',
+    highlight: '#36368c',
+
+    editor: {
+      background: 'none',
+      lineNumber: '#cccccc',
+      primary: 'black',
+      selection: '#b3d4fc',
+      comment: 'slategray',
+      commentTag: '#A082BD',
+      punctuation: '#999',
+      annotation: '#999',
+      namespace: 'slategray',
+      property: '#e90',
+      constant: '#905',
+      number: '#905',
+      selector: '#690',
+      operator: '#9a6e3a',
+      keyword: '#07a',
+      function: '#DD4A68',
+      className: '#DD4A68',
+      variable: '#e90'
+    }
+  },
+  dark: {
+    primary: '#aaddff',
+    secondary: '#022550',
+    highlight: '#36368c',
+
+    editor: {
+      background: '#041f29',
+      lineNumber: '#81969A',
+      primary: '#E0E2E4',
+      selection: '#E0E2E4',
+      comment: '#7D8C93',
+      commentTag: '#A082BD',
+      punctuation: '#E8E2B7',
+      annotation: '#00FFF8',
+      namespace: '#7CA8CF',
+      property: '#ee9900',
+      constant: '#F77669',
+      number: '#FFCD22',
+      selector: '#E2B671',
+      operator: '#E8E2B7',
+      keyword: '#1CCBEF',
+      function: '#BCBCBC',
+      className: '#82CF75',
+      variable: '#ee9900'
+    }
+  }
+};
+
+export default themes;
--- a/yarn.lock
+++ b/yarn.lock
@@ -80,7 +80,16 @@
    jsesc "^2.5.1"
    source-map "^0.5.0"

-"@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.13":
+"@babel/generator@^7.13.9":
+  version "7.13.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.9.tgz#3a7aa96f9efb8e2be42d38d80e2ceb4c64d8de39"
+  integrity sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==
+  dependencies:
+    "@babel/types" "^7.13.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.13":
  version "7.12.13"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz#0f58e86dfc4bb3b1fcd7db806570e177d439b6ab"
  integrity sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==
@@ -278,6 +287,11 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.17.tgz#bc85d2d47db38094e5bb268fc761716e7d693848"
  integrity sha512-r1yKkiUTYMQ8LiEI0UcQx5ETw5dpTLn9wijn9hk6KkTtOK95FndDN10M+8/s6k/Ymlbivw0Av9q4SlgF80PtHg==

+"@babel/parser@^7.13.13":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.13.tgz#42f03862f4aed50461e543270916b47dd501f0df"
+  integrity sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==
+
 "@babel/plugin-proposal-async-generator-functions@^7.12.1", "@babel/plugin-proposal-async-generator-functions@^7.12.13":
  version "7.12.13"
  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.13.tgz#d1c6d841802ffb88c64a2413e311f7345b9e66b5"
@@ -1129,6 +1143,20 @@
    globals "^11.1.0"
    lodash "^4.17.19"

+"@babel/traverse@^7.4.5":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.13.tgz#39aa9c21aab69f74d948a486dd28a2dbdbf5114d"
+  integrity sha512-CblEcwmXKR6eP43oQGG++0QMTtCjAsa3frUuzHoiIJWpaIIi8dwMyEFUJoXRLxagGqCK+jALRwIO+o3R9p/uUg==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.13.9"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+    "@babel/parser" "^7.13.13"
+    "@babel/types" "^7.13.13"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.12.17", "@babel/types@^7.12.6", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
  version "7.12.17"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.17.tgz#9d711eb807e0934c90b8b1ca0eb1f7230d150963"
@@ -1138,6 +1166,15 @@
    lodash "^4.17.19"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.13.0", "@babel/types@^7.13.13":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.13.tgz#dcd8b815b38f537a3697ce84c8e3cc62197df96f"
+  integrity sha512-kt+EpC6qDfIaqlP+DIbIJOclYy/A1YXs9dAf/ljbi+39Bcbc073H6jKVpXEr/EoIh5anGn5xq/yRVzKl+uIc9w==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
  version "0.2.3"
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1161,6 +1198,28 @@
  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
  integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==

+"@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@eslint/eslintrc@^0.3.0":
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.3.0.tgz#d736d6963d7003b6514e6324bec9c602ac340318"
@@ -2584,6 +2643,21 @@ babel-plugin-named-asset-import@^0.3.7:
  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
  integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==

+"babel-plugin-styled-components@>= 1":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9"
+  integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
  version "6.13.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -3060,6 +3134,11 @@ camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==

+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -3619,6 +3698,11 @@ css-blank-pseudo@^0.1.4:
  dependencies:
    postcss "^7.0.5"

+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -3680,6 +3764,15 @@ css-select@^2.0.0, css-select@^2.0.2:
    domutils "^1.7.0"
    nth-check "^1.0.2"

+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
  version "1.0.0-alpha.37"
  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -5435,6 +5528,13 @@ hmac-drbg@^1.0.1:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

+hoist-non-react-statics@^3.0.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -6883,6 +6983,11 @@ loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
    emojis-list "^3.0.0"
    json5 "^1.0.1"

+local-storage@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/local-storage/-/local-storage-2.0.0.tgz#748b7d041b197f46f3ec7393640851c175b64db8"
+  integrity sha512-/0sRoeijw7yr/igbVVygDuq6dlYCmtsuTmmpnweVlVtl/s10pf5BCq8LWBxW/AMyFJ3MhMUuggMZiYlx6qr9tw==
+
 locate-path@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -9003,7 +9108,7 @@ react-error-overlay@^6.0.9:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
  integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

-react-is@^16.8.1:
+react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9776,6 +9881,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
    inherits "^2.0.1"
    safe-buffer "^5.0.1"

+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -10279,6 +10389,22 @@ style-loader@1.3.0:
    loader-utils "^2.0.0"
    schema-utils "^2.7.0"

+styled-components@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
+  integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^4.0.0:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -10288,7 +10414,7 @@ stylehacks@^4.0.0:
    postcss "^7.0.0"
    postcss-selector-parser "^3.0.0"

-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==