Fix mobile post listing font colors, add Block component

2 years ago · 6cdd0ba592
13 changed files with 242 additions and 82 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,4 +1,5 @@
 fuse.js
 translation_report.ts
 src/api_tests
-jest.config.js
+jest.config.js
+vite.config.ts
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -20,10 +20,6 @@
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": "./tsconfig.json",
-    "warnOnUnsupportedTypeScriptVersion": false
-  },
  "rules": {
    "@typescript-eslint/camelcase": 0,
    "@typescript-eslint/member-delimiter-style": 0,
--- a/index.html
+++ b/index.html
@ -34,6 +34,7 @@
  <link rel="manifest" href="/site.webmanifest">

  <!-- Styles -->
+  <link href="https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/css/tribute.css" />
  <link rel="stylesheet" type="text/css" href="/css/toastify.css" />
  <link rel="stylesheet" type="text/css" href="/css/choices.min.css" />
--- a/package.json
+++ b/package.json
@ -62,6 +62,7 @@
    "reconnecting-websocket": "^4.4.0",
    "register-service-worker": "^1.7.1",
    "rxjs": "^6.6.2",
+    "styled-components": "^5.1.1",
    "terser": "^5.0.0",
    "theme-ui": "^0.3.1",
    "tippy.js": "^6.2.6",
@ -80,6 +81,7 @@
    "@testing-library/user-event": "^12.1.1",
    "@types/jest": "^26.0.10",
    "@types/node-fetch": "^2.5.7",
+    "@types/styled-components": "^5.1.2",
    "@typescript-eslint/eslint-plugin": "^3.9.0",
    "babel-jest": "^26.3.0",
    "babel-loader": "^8.1.0",
--- a/src/components/elements/Block.tsx
+++ b/src/components/elements/Block.tsx
@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import StyledSystem, {
+  background,
+  border,
+  color,
+  flexbox,
+  grid,
+  layout,
+  position,
+  shadow,
+  space,
+  typography,
+  compose,
+} from 'styled-system';
+
+const systemProps = compose(
+  layout,
+  color,
+  space,
+  background,
+  border,
+  grid,
+  position,
+  shadow,
+  typography,
+  flexbox
+);
+
+type StyledSystemProps = StyledSystem.LayoutProps &
+  StyledSystem.ColorProps &
+  StyledSystem.SpaceProps &
+  StyledSystem.BordersProps &
+  StyledSystem.BackgroundProps &
+  StyledSystem.PositionProps &
+  StyledSystem.FlexboxProps &
+  StyledSystem.ShadowProps &
+  StyledSystem.GridProps &
+  StyledSystem.OpacityProps &
+  StyledSystem.OverflowProps;
+
+const Block = styled('div')<StyledSystemProps>({}, systemProps);
+
+export const Flex = styled(Block)(
+  {
+    display: 'flex',
+  },
+  systemProps
+);
+
+export default Block;
--- a/src/components/post-listing.tsx
+++ b/src/components/post-listing.tsx
@ -44,6 +44,7 @@ import { RoleBadge } from './RoleBadge';
 import { linkEvent } from '../linkEvent';
 import { Box, Flex, Heading, Text, Link as StyledLink } from 'theme-ui';
 import Button from './elements/Button';
+import Block from './elements/Block';

 const ENABLE_NEW_POST_LISTING = true;

@ -151,7 +152,7 @@ const VoteButtons = ({
 );

 const PostActionButton = props => (
-  <Button p={2} variant="muted" bg="transparent" {...props} />
+  <Button p={2} variant="muted" color="#999" bg="transparent" {...props} />
 );

 const PostIcon = props => (
@ -195,16 +196,21 @@ const MobilePostListing = ({
    setContentExpanded(prevState => !prevState);
  }

-  const longPost = post.body && post.body.length > 200;
+  const longPost = post.body && post.body.length > 300;

  return (
    <Flex css={{ flexDirection: 'column', overflow: 'hidden' }}>
      <Link to={`/post/${post.id}`}>
        <Heading
          as="h5"
-          my={2}
+          mt={3}
          color="#dedede"
-          css={{ fontWeight: 400, fontSize: '18px', wordBreak: 'break-word' }}
+          css={{
+            fontWeight: 400,
+            fontSize: '18px',
+            wordBreak: 'break-word',
+            lineHeight: '22px',
+          }}
        >
          {post.name}
        </Heading>
@ -227,8 +233,8 @@ const MobilePostListing = ({
        </StyledLink>
      )}
      {isImage(post.url) && (
-        <Box
-          css={{ position: 'relative' }}
+        <Block
+          position="relative"
          className={`collapsed-content collapsed-image ${
            contentExpanded && 'expanded'
          }`}
@ -237,10 +243,13 @@ const MobilePostListing = ({
        >
          <img className="img-fluid" alt={post.name} src={post.url} />
          <MobilePostIcon post={post} />
-        </Box>
+        </Block>
      )}
-      <Box css={{ fontSize: '12px' }}>
-        <span> {i18n.t('to')} </span>
+      <Box css={{ fontSize: '14px' }} mt={2}>
+        {/* <span> {i18n.t('to')} </span> */}
+        <Block as="span" color="#999">
+          {i18n.t('to')}{' '}
+        </Block>
        <CommunityLink
          community={{
            name: post.community_name,
@ -249,7 +258,9 @@ const MobilePostListing = ({
            actor_id: post.community_actor_id,
          }}
        />{' '}
-        {i18n.t('by')}{' '}
+        <Block as="span" color="#999">
+          {i18n.t('by')}{' '}
+        </Block>
        <UserListing
          user={{
            name: post.creator_name,
@ -288,28 +299,40 @@ const MobilePostListing = ({
            borderRadius: '4px',
            fontSize: '14px',
          }}
+          color="#999"
          my={2}
        >
          <PostBody body={post.body} />
        </Text>
      )}
-      <Flex css={{ alignItems: 'center' }} mt={1}>
-        <PostActionButton
-          onClick={handlePostLike}
-          color={my_vote === 1 ? '#fffc00' : 'inherit'}
-        >
-          <Icon name="upvote" className="icon upvote" />
-        </PostActionButton>
-        <Box css={{ fontSize: '14px', fontWeight: 600 }} mx={2}>
-          {score}
-        </Box>
-        <PostActionButton
-          disabled={!enableDownvotes}
-          onClick={handlePostDisLike}
-          color={my_vote === -1 ? '#dd17b9' : 'inherit'}
-        >
-          <Icon name="downvote" className="icon downvote" />
-        </PostActionButton>
+      <Flex
+        css={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          borderTop: '1px solid #303030',
+          borderBottom: '1px solid #303030',
+        }}
+        py={1}
+        mt={1}
+      >
+        <Flex css={{ alignItems: 'center' }}>
+          <PostActionButton
+            onClick={handlePostLike}
+            color={my_vote === 1 ? '#fffc00' : 'inherit'}
+          >
+            <Icon name="upvote" className="icon upvote" />
+          </PostActionButton>
+          <Box css={{ fontSize: '14px', fontWeight: 600 }} mx={2}>
+            {score}
+          </Box>
+          <PostActionButton
+            disabled={!enableDownvotes}
+            onClick={handlePostDisLike}
+            color={my_vote === -1 ? '#dd17b9' : 'inherit'}
+          >
+            <Icon name="downvote" className="icon downvote" />
+          </PostActionButton>
+        </Flex>
        <PostActionButton
          onClick={handleSavePostClick}
          data-tippy-content={post.saved ? i18n.t('unsave') : i18n.t('save')}
@ -336,7 +359,7 @@ const MobilePostListing = ({
            showBody ? handleShowAdvanced() : setActionsVisible(prev => !prev)
          }
          mx={2}
-          css={{ marginLeft: 'auto' }}
+          // css={{ marginLeft: 'auto' }}
        >
          <Icon name="more" />
        </PostActionButton>
--- a/src/components/post-listings.tsx
+++ b/src/components/post-listings.tsx
@ -28,7 +28,7 @@ export class PostListings extends Component<
    scrollPos: window.scrollY,
  };

-  state = this.emptyState
+  state = this.emptyState;

  //are we getting updated post array? save current scroll pos
  // UNSAFE_componentWillReceiveProps() {
@ -54,7 +54,6 @@ export class PostListings extends Component<
              enableDownvotes={this.props.enableDownvotes}
              enableNsfw={this.props.enableNsfw}
            />
-            <hr className="my-2" />
          </div>
        ))}
      </div>
--- a/src/components/user-listing.tsx
+++ b/src/components/user-listing.tsx
@ -8,6 +8,7 @@ import {
  isCakeDay,
 } from '../utils';
 import { CakeDay } from './cake-day';
+import Block from './elements/Block';

 interface UserOther {
  name: string;
@ -65,7 +66,7 @@ export class UserListing extends Component<UserListingProps, any> {

    return (
      <>
-        <Link className="text-body font-weight-bold" to={link}>
+        <Link className="text-body" to={link}>
          {user.avatar && showAvatars() && (
            <img
              height="32"
@ -75,7 +76,14 @@ export class UserListing extends Component<UserListingProps, any> {
              className="rounded-circle mr-2"
            />
          )}
-          <span className={getTextColor({ isMod, isAdmin, isSitemod })}>{name_}</span>
+          <Block
+            display="inline"
+            color="#dedede"
+            style={{ fontWeight: 700 }}
+            className={getTextColor({ isMod, isAdmin, isSitemod })}
+          >
+            {name_}
+          </Block>
        </Link>

        {isCakeDay(user.published) && <CakeDay creatorName={name_} />}
--- a/src/components/user.tsx
+++ b/src/components/user.tsx
@ -48,6 +48,7 @@ import { linkEvent } from '../linkEvent';
 import { changeTheme, ThemeSelector } from '../theme';
 import Button from './elements/Button';
 import { Box } from 'theme-ui';
+import Block from './elements/Block';
 // import { Button } from 'theme-ui';
 // import { changeTheme } from './ThemeSystemProvider';

@ -376,7 +377,9 @@ class BaseUser extends Component<any, UserState> {
  selects() {
    return (
      <div className="mb-2">
-        <div className="mr-3 mb-2 user-view-toggle">{this.viewRadios()}</div>
+        <Block my={3}>
+          <div className="mr-3 mb-2 user-view-toggle">{this.viewRadios()}</div>
+        </Block>
        <SortSelect
          sort={this.state.sort}
          onChange={this.handleSortChange}
--- a/src/custom.css
+++ b/src/custom.css
@ -772,7 +772,7 @@ button:hover [type="button"]:hover {

 .collapsed-content {
  position: relative;
-  max-height: 55px;
+  max-height: 100px;
  overflow: hidden;
 }

@ -791,7 +791,7 @@ button:hover [type="button"]:hover {
  height:100%;
  position:absolute;
  left: 0;
-  top: 5px;
+  top: 10px;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, transparent, var(--theme-ui-colors-background,#222));
--- a/src/theme.tsx
+++ b/src/theme.tsx
@ -71,6 +71,12 @@ export const variants: any = {

 const defaultTheme: ThemeProviderProps<Theme> = {
  ...dark,
+  fonts: {
+    body:
+      'Lato, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    heading: 'inherit',
+    monospace: 'Menlo, monospace',
+  },
  colors: {
    ...dark.colors,
    background: '#222',
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,5 +1,5 @@
-import * as reactPlugin from 'vite-plugin-react'
-import type { UserConfig } from 'vite'
+import * as reactPlugin from 'vite-plugin-react';
+import type { UserConfig } from 'vite';

 const config: UserConfig = {
  jsx: 'react',
@ -10,37 +10,38 @@ const config: UserConfig = {
      'markdown-it-container',
      'moment',
      'markdown-it-emoji',
-      "markdown-it-emoji/light",
-      "lodash.isequal",
-      "moment/locale/es",
-      "moment/locale/el",
-      "moment/locale/eu",
-      "moment/locale/eo",
-      "moment/locale/de",
-      "moment/locale/zh-cn",
-      "moment/locale/fr",
-      "moment/locale/sv",
-      "moment/locale/ru",
-      "moment/locale/nl",
-      "moment/locale/it",
-      "moment/locale/fi",
-      "moment/locale/ca",
-      "moment/locale/fa",
-      "moment/locale/pl",
-      "moment/locale/pt-br",
-      "moment/locale/ja",
-      "moment/locale/ka",
-      "moment/locale/hi",
-      "moment/locale/gl",
-      "moment/locale/tr",
-      "moment/locale/hu",
-      "moment/locale/uk",
-      "moment/locale/sq",
-      "moment/locale/km",
-      "moment/locale/ga",
-      "moment/locale/sr",
-    ]
-  }
-}
+      'markdown-it-emoji/light',
+      'lodash.isequal',
+      'moment/locale/es',
+      'moment/locale/el',
+      'moment/locale/eu',
+      'moment/locale/eo',
+      'moment/locale/de',
+      'moment/locale/zh-cn',
+      'moment/locale/fr',
+      'moment/locale/sv',
+      'moment/locale/ru',
+      'moment/locale/nl',
+      'moment/locale/it',
+      'moment/locale/fi',
+      'moment/locale/ca',
+      'moment/locale/fa',
+      'moment/locale/pl',
+      'moment/locale/pt-br',
+      'moment/locale/ja',
+      'moment/locale/ka',
+      'moment/locale/hi',
+      'moment/locale/gl',
+      'moment/locale/tr',
+      'moment/locale/hu',
+      'moment/locale/uk',
+      'moment/locale/sq',
+      'moment/locale/km',
+      'moment/locale/ga',
+      'moment/locale/sr',
+      'object-assign',
+    ],
+  },
+};

-export default config
+export default config;
--- a/yarn.lock
+++ b/yarn.lock
@ -100,7 +100,7 @@
    jsesc "^2.5.1"
    source-map "^0.5.0"

-"@babel/[email protected]^7.10.4":
+"@babel/[email protected]^7.0.0", "@babel/[email protected]^7.10.4":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
@ -1243,7 +1243,7 @@
    "@babel/parser" "^7.10.4"
    "@babel/types" "^7.10.4"

-"@babel/[email protected]^7.1.0", "@babel/[email protected]^7.10.4", "@babel/[email protected]^7.11.0", "@babel/[email protected]^7.4.3", "@babel/[email protected]^7.7.0", "@babel/[email protected]^7.9.0":
+"@babel/[email protected]^7.1.0", "@babel/[email protected]^7.10.4", "@babel/[email protected]^7.11.0", "@babel/[email protected]^7.4.3", "@babel/[email protected]^7.4.5", "@babel/[email protected]^7.7.0", "@babel/[email protected]^7.9.0":
  version "7.11.0"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.0.tgz#9b996ce1b98f53f7c3e4175115605d56ed07dd24"
  integrity sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==
@ -1321,7 +1321,7 @@
  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==

-"@emotion/[email protected]", "@emotion/[email protected]^0.8.1", "@emotion/[email protected]^0.8.6":
+"@emotion/[email protected]", "@emotion/[email protected]^0.8.1", "@emotion/[email protected]^0.8.6", "@emotion/[email protected]^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==
@ -1367,12 +1367,12 @@
    "@emotion/styled-base" "^10.0.27"
    babel-plugin-emotion "^10.0.27"

-"@emotion/[email protected]":
+"@emotion/[email protected]", "@emotion/[email protected]^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/[email protected]":
+"@emotion/[email protected]", "@emotion/[email protected]^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==
@ -2943,6 +2943,14 @@
  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.7.tgz#613957d900fab9ff84c8dfb24fa3eef0c2a40896"
  integrity sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==

+"@types/[email protected]*":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/[email protected]^5.0.0":
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
@ -3180,6 +3188,13 @@
  dependencies:
    "@types/react" "*"

+"@types/[email protected]*":
+  version "0.63.10"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.10.tgz#89234ace2f6a2b0ada4d902cc81fcdd973088596"
+  integrity sha512-9ZbfoWJFbxv7FVPTK7/Y8yRRViJ0bu62p3yKgeK3KqQmBKqQR14nvbIqBHkbBS1mtSWfGgBkPtxI2pmJni4VWQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/[email protected]^5.1.5":
  version "5.1.5"
  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090"
@ -3256,6 +3271,16 @@
  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==

+"@types/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.2.tgz#652af475b4af917b355ea1c3068acae63d46455f"
+  integrity sha512-HNocYLfrsnNNm8NTS/W53OERSjRA8dx5Bn6wBd2rXXwt4Z3s+oqvY6/PbVt3e6sgtzI63GX//WiWiRhWur08qQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    "@types/react-native" "*"
+    csstype "^3.0.2"
+
 "@types/[email protected]*":
  version "5.1.10"
  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.10.tgz#dcf5690dd837ca49b8de1f23cb99d510c7f4ecb3"
@ -4465,6 +4490,16 @@ [email protected]^4.1.0:
    react-docgen "^5.0.0"
    recast "^0.14.7"

+"[email protected]>= 1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz#5296a9e557d736c3186be079fff27c6665d63d76"
+  integrity sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==
+  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"
+
 [email protected]^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"
@ -5039,6 +5074,11 @@ [email protected]^6.0.0:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==

+[email protected]^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 [email protected]^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
@ -5714,6 +5754,11 @@ [email protected]^3.11.0:
    randombytes "^2.0.0"
    randomfill "^1.0.3"

+[email protected]^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=
+
 [email protected], [email protected]^0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@ -5771,6 +5816,15 @@ [email protected]^2.0.0:
    domutils "^1.7.0"
    nth-check "^1.0.2"

+[email protected]^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"
+
 [email protected]:
  version "1.0.0-alpha.37"
  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@ -8009,7 +8063,7 @@ [email protected]^1.0.0:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

-[email protected]^3.1.0, [email protected]^3.3.0:
+[email protected]^3.0.0, [email protected]^3.1.0, [email protected]^3.3.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==
@ -13696,6 +13750,22 @@ [email protected]^1.2.1:
    loader-utils "^2.0.0"
    schema-utils "^2.6.6"

+[email protected]^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d"
+  integrity sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==
+  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"
+
 [email protected]^5.1.5:
  version "5.1.5"
  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e"
@ -13729,7 +13799,7 @@ [email protected]^2.0.0:
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=

-[email protected]^5.3.0:
+[email protected]^5.3.0, [email protected]^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==