Used styled-components to apply styling (#3)

* Used styled-components to apply styling * Combine styles for wrapped icon * Align styled names
2026-05-31 15:41:04 +00:00 · 2018-12-05 14:40:01 +01:00
parent d0909796f5
commit 4a8c697890
6 changed files with 232 additions and 110 deletions
@@ -24,7 +24,7 @@
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
-    "@polkadot/dev-react": "^0.22.6",
+    "@polkadot/dev-react": "^0.22.8",
    "@polkadot/ts": "^0.1.40",
    "empty": "^0.10.1"
  }
@@ -1,33 +0,0 @@
-/* Copyright 2017-2018 @polkadot/ui-identicon authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.ui--IdentityIcon {
-  cursor: copy;
-  display: inline-block;
-  line-height: 0;
-
-  .container {
-    position: relative;
-
-    > div,
-    > svg {
-      position: relative;
-    }
-
-    &:before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 50%;
-      box-shadow: 0 0 5px 2px #e0e0e0;
-      content: '';
-    }
-  }
-
-  &.highlight > div:before {
-    box-shadow: 0 0 5px 2px red;
-  }
-}
@@ -5,10 +5,9 @@
 import { Prefix } from '@polkadot/keyring/address/types';
 import { IdentityProps as Props } from './types';

-import './IdentityIcon.css';
-
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import styled from 'styled-components';
 import { decodeAddress, encodeAddress } from '@polkadot/keyring';
 import settings from '@polkadot/ui-settings/index';
 import { isHex, isU8a } from '@polkadot/util';
@@ -26,6 +25,35 @@ const Components: { [index: string]: React.ComponentType<any> } = {
  'polkadot': Polkadot,
  'substrate': Substrate
 };
+const Wrapper = styled.div`
+  cursor: copy;
+  display: inline-block;
+  line-height: 0;
+
+  .container {
+    position: relative;
+
+    > div,
+    > svg {
+      position: relative;
+    }
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 50%;
+      box-shadow: 0 0 5px 2px #e0e0e0;
+      content: '';
+    }
+
+    &.highlight:before {
+      box-shadow: 0 0 5px 2px red;
+    }
+  }
+`;

 export default class IdentityIcon extends React.PureComponent<Props, State> {
  state: State = {
@@ -66,16 +94,17 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
      ? Empty
      : Components[theme] || Substrate;
    const wrapped = (
-      <div
-        className={['ui--IdentityIcon', isHighlight ? 'highlight' : '', className].join(' ')}
+      <Wrapper
+        className={['ui--IdentityIcon', className].join(' ')}
        key={address || ''}
        style={style}
      >
        <Component
+          className={isHighlight ? 'highlight' : ''}
          size={size}
          value={address || ''}
        />
-      </div>
+      </Wrapper>
    );

    if (!address) {
@@ -1,47 +0,0 @@
-/* Copyright 2017-2018 @polkadot/ui-keyring authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.ui--KeyPair {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  position: relative;
-  white-space: nowrap;
-}
-
-.ui--KeyPair-icon {
-  position: absolute;
-  top: -9px;
-  left: 0;
-}
-
-.ui--KeyPair-address,
-.ui--KeyPair-name {
-  display: inline-block;
-}
-
-.ui--KeyPair-address {
-  flex: 1;
-  font-family: monospace;
-  margin-left: 1rem;
-  opacity: 0.5;
-  overflow: hidden;
-  text-align: right;
-  text-overflow: ellipsis;
-}
-
-.ui--KeyPair-name {
-  flex: 1 0;
-  margin-left: 3rem;
-  overflow: hidden;
-  text-transform: uppercase;
-  text-overflow: ellipsis;
-}
-
-.ui.dropdown .menu > .disabled.item.ui--KeyPair-header {
-  font-size: .75em;
-  font-weight: 700;
-  opacity: 1;
-  text-transform: uppercase;
-}
@@ -2,9 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import './KeyPair.css';
-
 import React from 'react';
+import styled from 'styled-components';
 import IdentityIcon from '@polkadot/ui-identicon/index';

 type Props = {
@@ -16,27 +15,61 @@ type Props = {
  }
 };

+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  position: relative;
+  white-space: nowrap;
+
+  .address {
+    display: inline-block;
+    flex: 1;
+    font-family: monospace;
+    margin-left: 1rem;
+    opacity: 0.5;
+    overflow: hidden;
+    text-align: right;
+    text-overflow: ellipsis;
+  }
+
+  .icon {
+    position: absolute;
+    top: -9px;
+    left: 0;
+  }
+
+  .name {
+    display: inline-block;
+    flex: 1 0;
+    margin-left: 3rem;
+    overflow: hidden;
+    text-transform: uppercase;
+    text-overflow: ellipsis;
+  }
+`;
+
 export default class KeyPair extends React.PureComponent<Props> {
  render () {
    const { address, className, name, style } = this.props;

    return (
-      <div
+      <Wrapper
        className={['ui--KeyPair', className].join(' ')}
        style={style}
      >
        <IdentityIcon
-          className='ui--KeyPair-icon'
+          className='icon'
          size={32}
          value={address}
        />
-        <div className='ui--KeyPair-name'>
+        <div className='name'>
          {name}
        </div>
-        <div className='ui--KeyPair-address'>
+        <div className='address'>
          {address}
        </div>
-      </div>
+      </Wrapper>
    );
  }
 }
@@ -754,6 +754,23 @@
    lodash "^4.17.10"
    to-fast-properties "^2.0.0"

+"@emotion/is-prop-valid@^0.6.8":
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz#68ad02831da41213a2089d2cab4e8ac8b30cbd85"
+  integrity sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==
+  dependencies:
+    "@emotion/memoize" "^0.6.6"
+
+"@emotion/memoize@^0.6.6":
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
+  integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==
+
+"@emotion/unitless@^0.7.0":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
+  integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==
+
 "@lerna/add@^3.5.0":
  version "3.5.0"
  resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.5.0.tgz#3518b3d4afc3743b7227b1ee3534114eb9575888"
@@ -1332,17 +1349,20 @@
  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
  integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==

-"@polkadot/dev-react@^0.22.6":
-  version "0.22.6"
-  resolved "https://registry.yarnpkg.com/@polkadot/dev-react/-/dev-react-0.22.6.tgz#8674edc3b8006ff7b70b7c3419f54556873db16f"
-  integrity sha512-zhI3wwfprcoV/PGUb77e/EJP9Trr4ZyrSKHyyuZRczKcqTzh09V8sc//N68634oLt52lLFTFb8IVcglfQmCa8A==
+"@polkadot/dev-react@^0.22.8":
+  version "0.22.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/dev-react/-/dev-react-0.22.8.tgz#921e7bbec5222bb2336b2a57c08cf830c35ee853"
+  integrity sha512-x7eBtUbOtt/8EYnjLO6aWlViSt0lKAlTJohxWdEjom0NGd2ENzZ9Rzem87e7n0C5m9xhjDlP2SH1YVIO+rQHDA==
  dependencies:
    "@babel/core" "^7.1.6"
    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
    "@babel/preset-react" "^7.0.0"
-    "@polkadot/dev" "^0.22.6"
-    "@types/react-dom" "^16.0.10"
+    "@polkadot/dev" "^0.22.8"
+    "@types/react" "^16.7.13"
+    "@types/react-dom" "^16.0.11"
+    "@types/styled-components" "^4.1.3"
    babel-loader "^8.0.2"
+    babel-plugin-styled-components "^1.9.2"
    browserslist "^4.3.5"
    copy-webpack-plugin "^4.6.0"
    css-loader "^1.0.1"
@@ -1355,6 +1375,7 @@
    react-dom "^16.6.3"
    react-hot-loader "^4.3.12"
    style-loader "^0.23.0"
+    styled-components "^4.1.2"
    stylelint "^9.9.0"
    stylelint-config-standard "^18.2.0"
    thread-loader "^1.2.0"
@@ -1367,10 +1388,10 @@
    webpack-serve "^2.0.3"
    worker-loader "^2.0.0"

-"@polkadot/dev@^0.22.6":
-  version "0.22.6"
-  resolved "https://registry.yarnpkg.com/@polkadot/dev/-/dev-0.22.6.tgz#96a0930815eb687a1050428f8951ac4ad53b3c81"
-  integrity sha512-+WSlRZ/CkCa582ETaCetpLWb9BzpZH+RVPdb9EH3jiYPm3w2XEAw3aXn2xGbMZOCH8fnEpAfHbmgITTcfldxyw==
+"@polkadot/dev@^0.22.8":
+  version "0.22.8"
+  resolved "https://registry.yarnpkg.com/@polkadot/dev/-/dev-0.22.8.tgz#635f370ba7c0e0965838b3385dc9bdda5d47e143"
+  integrity sha512-crjvBNllleaXIqr+99ru39iJ9sw8ZmLt5xMmP61yet+A4OYwPGHS7fYjh9WmgXVZcrm0zqtzSnfguswvBd1Lzw==
  dependencies:
    "@babel/cli" "^7.1.5"
    "@babel/core" "^7.1.6"
@@ -1617,14 +1638,14 @@
  dependencies:
    "@types/react" "*"

-"@types/react-dom@^16.0.10":
+"@types/react-dom@^16.0.11":
  version "16.0.11"
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.11.tgz#bd10ccb0d9260343f4b9a49d4f7a8330a5c1f081"
  integrity sha512-x6zUx9/42B5Kl2Vl9HlopV8JF64wLpX3c+Pst9kc1HgzrsH+mkehe/zmHMQTplIrR48H2gpU7ZqurQolYu8XBA==
  dependencies:
    "@types/react" "*"

-"@types/react@*":
+"@types/react@*", "@types/react@^16.7.13":
  version "16.7.13"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.13.tgz#d2369ae78377356d42fb54275d30218e84f2247a"
  integrity sha512-WhqrQLAE9z65hfcvWqZfR6qUtIazFRyb8LXqHo8440R53dAQqNkt2OlVJ3FXwqOwAXXg4nfYxt0qgBvE18o5XA==
@@ -1640,6 +1661,15 @@
    "@types/glob" "*"
    "@types/node" "*"

+"@types/styled-components@^4.1.3":
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.3.tgz#8d33a8e782e795c1da411b71a0e911a82968dd95"
+  integrity sha512-KufaiYcIbfm9z5ikqCJuhjXPCfTdv1GXLe4Ad1Qb12LjeE8FWocuwqMnIgYMMkflsqVAIv7xckcK5eU1l2qHdA==
+  dependencies:
+    "@types/node" "*"
+    "@types/react" "*"
+    csstype "^2.2.0"
+
 "@types/xxhashjs@^0.1.1":
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/@types/xxhashjs/-/xxhashjs-0.1.1.tgz#980709096c7138713b7777f49dccd4b8f93908e5"
@@ -2190,7 +2220,7 @@ arrify@^1.0.0, arrify@^1.0.1:
  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=

-asap@^2.0.0:
+asap@^2.0.0, asap@~2.0.3:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -2393,6 +2423,20 @@ babel-plugin-module-resolver@^3.1.1:
    reselect "^3.0.1"
    resolve "^1.4.0"

+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.9.2:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.9.2.tgz#0e6a6587454dcb1c9a362a8fd31fc0b075ccd260"
+  integrity sha512-McnheW8RkBkur/mQw7rEwQO/oUUruQ/nIIj5LIRpsVL8pzG1oo1Y53xyvAYeOfamIrl4/ta7g1G/kuTR1ekO3A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.10"
+
+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.13.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"
@@ -3569,6 +3613,11 @@ copy-webpack-plugin@^4.6.0:
    p-limit "^1.0.0"
    serialize-javascript "^1.4.0"

+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.4.0, core-js@^2.5.7:
  version "2.5.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
@@ -3705,6 +3754,11 @@ crypto-random-string@^1.0.0:
  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
  integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=

+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-loader@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.1.tgz#6885bb5233b35ec47b006057da01cc640b6b79fe"
@@ -3742,6 +3796,15 @@ css-selector-tokenizer@^0.7.0:
    fastparse "^1.1.1"
    regexpu-core "^1.0.0"

+css-to-react-native@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.2.tgz#c077d0f7bf3e6c915a539e7325821c9dd01f9965"
+  integrity sha512-w99Fzop1FO8XKm0VpbQp3y5mnTnaS+rtCvS+ylSEOK76YXO5zoHQx/QMB1N54Cp+Ya9jB9922EHrh14ld4xmmw==
+  dependencies:
+    css-color-keywords "^1.0.0"
+    fbjs "^0.8.5"
+    postcss-value-parser "^3.3.0"
+
 css-what@2.1:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
@@ -4729,6 +4792,19 @@ fb-watchman@^2.0.0:
  dependencies:
    bser "^2.0.0"

+fbjs@^0.8.5:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 figgy-pudding@^3.1.0, figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
  version "3.5.1"
  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
@@ -6356,7 +6432,7 @@ is-retry-allowed@^1.0.0:
  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
  integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=

-is-stream@^1.0.0, is-stream@^1.1.0:
+is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -6447,6 +6523,14 @@ isobject@^3.0.0, isobject@^3.0.1:
  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=

+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@0.1.x, isstream@~0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -7637,6 +7721,11 @@ mem@^4.0.0:
    mimic-fn "^1.0.0"
    p-is-promise "^1.1.0"

+memoize-one@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.0.3.tgz#cdfdd942853f1a1b4c71c5336b8c49da0bf0273c"
+  integrity sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==
+
 memory-fs@^0.4.0, memory-fs@~0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -8112,6 +8201,14 @@ node-fetch-npm@^2.0.2:
    json-parse-better-errors "^1.0.0"
    safe-buffer "^5.1.1"

+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-gyp@^3.8.0:
  version "3.8.0"
  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
@@ -9533,6 +9630,13 @@ promise-retry@^1.1.1:
    err-code "^1.0.0"
    retry "^0.10.0"

+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 prompts@^0.1.9:
  version "0.1.14"
  resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.14.tgz#a8e15c612c5c9ec8f8111847df3337c9cbd443b2"
@@ -9548,7 +9652,7 @@ promzard@^0.3.0:
  dependencies:
    read "1"

-prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2:
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@@ -9784,7 +9888,7 @@ react-hot-loader@^4.3.12:
    react-lifecycles-compat "^3.0.4"
    shallowequal "^1.0.2"

-react-is@^16.6.1, react-is@^16.6.3:
+react-is@^16.6.0, react-is@^16.6.1, react-is@^16.6.3:
  version "16.6.3"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
  integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==
@@ -10602,7 +10706,7 @@ set-value@^2.0.0:
    is-plain-object "^2.0.3"
    split-string "^3.0.1"

-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -11177,6 +11281,22 @@ style-search@^0.1.0:
  resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
  integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=

+styled-components@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.1.2.tgz#f8a685e3b2bcd03c5beac7f2c02bb6ad237da9b3"
+  integrity sha512-NdvWatJ2WLqZxAvto+oH0k7GAC/TlAUJTrHoXJddjbCrU6U23EmVbb9LXJBF+d6q6hH+g9nQYOWYPUeX/Vlc2w==
+  dependencies:
+    "@emotion/is-prop-valid" "^0.6.8"
+    "@emotion/unitless" "^0.7.0"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^2.2.2"
+    memoize-one "^4.0.0"
+    prop-types "^15.5.4"
+    react-is "^16.6.0"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
+    supports-color "^5.5.0"
+
 stylelint-config-recommended@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-2.1.0.tgz#f526d5c771c6811186d9eaedbed02195fee30858"
@@ -11243,6 +11363,16 @@ stylelint@^9.9.0:
    svg-tags "^1.0.0"
    table "^5.0.0"

+stylis-rule-sheet@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
+
+stylis@^3.5.0:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
 subarg@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
@@ -11797,6 +11927,11 @@ typescript@3.1.x, typescript@^3.2.1:
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.1.tgz#0b7a04b8cf3868188de914d9568bd030f0c56192"
  integrity sha512-jw7P2z/h6aPT4AENXDGjcfHTu5CSqzsbZc6YlUIebTyBAq8XaKp78x7VcSh30xwSCcsu5irZkYZUSFP1MrAMbg==

+ua-parser-js@^0.7.18:
+  version "0.7.19"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
+  integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
+
 uglify-es@^3.3.4:
  version "3.3.9"
  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
@@ -12390,6 +12525,11 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
  dependencies:
    iconv-lite "0.4.24"

+whatwg-fetch@>=0.10.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
+  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
+
 whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"