feat(home): adicionando Header mobile

home
2022-12-29 14:16:04 -03:00 · 2022-12-29 14:16:04 -03:00 · c89199f762
commit c89199f762
parent 3ea66a1d21
13 changed files with 436 additions and 86 deletions
--- a/package.json
+++ b/package.json
@ -10,10 +10,12 @@
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
    "node-sass": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
+    "styled-components": "^5.3.6",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
@ -40,5 +42,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "resolutions": {
+    "styled-components": "^5"
  }
 }
--- a/src/_variaveis.scss
+++ b/src/_variaveis.scss
@ -4,6 +4,7 @@ $font-family: 'Roboto', sans-serif;

 /* Colors */
 $color-black: #000;
+$color-black-transparent: rgba(69, 69, 69, 0.7);

 $color-white: #fff;
 $color-primary-700: #F2F2F2;
--- a/src/assets/imgs/close-menu-mobile.png
+++ b/src/assets/imgs/close-menu-mobile.png
--- a/src/assets/imgs/menu-hamburger-header.png
+++ b/src/assets/imgs/menu-hamburger-header.png
--- a/src/components/Container/Container.tsx
+++ b/src/components/Container/Container.tsx
@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const Container = styled.main`
+position: absolute;
+backdrop-filter: blur(1px);
+width: 100%;
+height: 100%;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+z-index: 5;
+
+background: $color-black-transparent;
+`;
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@ -1,104 +1,108 @@
@import '../../_variaveis.scss';

-.header-top {
-    width: calc(100% - 200px);
-    height: 32px;
-    padding: 22px 100px;
+.header {
+    width: 100%;

-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    border-bottom: 1px solid $color-primary-400;
-    background: $color-black;
-
-    &__logo {
-        width: 136px;
-        height: 26px;
+    @media #{$mq-tablet}, #{$mq-mobile} {
+        display: none;
    }

-    &__input {
+    .header-top {
+        width: calc(100% - 200px);
+        height: 32px;
+        padding: 22px 100px;
+
        display: flex;
        flex-direction: row;
+        justify-content: space-between;
        align-items: center;
-        padding: 7px 16px;
        gap: 10px;
+        border-bottom: 1px solid $color-primary-400;
+        background: $color-black;

-        background: $color-white;
-        border: 2px solid $color-primary-700;
-        border-radius: 5px;
+        &__logo {
+            width: 136px;
+            height: 26px;
+        }

-        width: 25%;
-        height: 12px;
+        &__input {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            padding: 7px 16px;
+            gap: 10px;

-        background-image: url("../../assets/imgs/search-icon-header.png");
-        background-size: 18px;
-        background-repeat: no-repeat;
-        background-position: bottom 50% right 16px;
+            background: $color-white;
+            border: 2px solid $color-primary-700;
+            border-radius: 5px;

-        font-family: $font-family;
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 16px;
-        color: $color-primary-500;
+            width: 25%;
+            height: 12px;
+
+            background-image: url("../../assets/imgs/search-icon-header.png");
+            background-size: 18px;
+            background-repeat: no-repeat;
+            background-position: bottom 50% right 16px;

-        &::placeholder {
            font-family: $font-family;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: $color-primary-500;
+
+            &::placeholder {
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 16px;
+                color: $color-primary-500;
+            }
+        }
+
+        &__log-cart {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &__log {
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            color: $color-white;
+            text-decoration: none;
+
+            margin-right: 55px;
+        }
+
+        &__cart {
+            width: 28px;
+            height: 28px;
        }
    }

-    &__log-cart {
+    .header-bottom {
+        width: calc(100% - 200px);
+        height: 16px;
+        padding: 14px 100px;
+        background-color: $color-black;
+
        display: flex;
-        align-items: center;
+        flex-direction: column;
        justify-content: center;
-    }
+        align-items: flex-start;

-    &__log {
-        font-family: $font-family;
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 16px;
-        color: $color-white;
-        text-decoration: none;
+        &__list {
+            display: flex;
+            align-items: center;
+            justify-content: center;

-        margin-right: 55px;
-    }
-
-    &__cart {
-        width: 28px;
-        height: 28px;
-    }
-}
-
-.header-bottom {
-    width: calc(100% - 200px);
-    height: 16px;
-    padding: 14px 100px;
-    background-color: $color-black;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-
-    &__list {
-        list-style: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &__items-menu {
-            margin-right: 55px;
-
-            a {
+            &__items-menu {
+                margin-right: 55px;
                font-family: $font-family;
                font-style: normal;
                font-weight: 500;
@ -107,6 +111,7 @@
                text-transform: uppercase;
                text-decoration: none;
                color: $color-white;
+
            }
        }
    }
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@ -19,11 +19,11 @@ const Header = () => {
                </div>
            </div>
            <div className={styles['header-bottom']}>
-                <ul className={styles['header-bottom__list']}>
-                    <li className={styles['header-bottom__list__items-menu']}><a href="/">CURSOS</a></li>
-                    <li className={styles['header-bottom__list__items-menu']}><a href="/">SAIBA MAIS</a></li>
-                    <li className={styles['header-bottom__list__items-menu']}><a href="/">INSTITUCIONAIS</a></li>
-                </ul>
+                <nav className={styles['header-bottom__list']}>
+                    <a href="/" className={styles['header-bottom__list__items-menu']}>CURSOS</a>
+                    <a href="/" className={styles['header-bottom__list__items-menu']}>SAIBA MAIS</a>
+                    <a href="/" className={styles['header-bottom__list__items-menu']}>INSTITUCIONAIS</a>
+                </nav>
            </div>
        </header>
    )
--- a/src/components/HeaderMobile/HeaderMobile.module.scss
+++ b/src/components/HeaderMobile/HeaderMobile.module.scss
@ -0,0 +1,62 @@
+@import '../../_variaveis.scss';
+
+.header-mobile {
+    display: none;
+    padding: 25px 16px;
+    background: $color-black;
+    width: calc(100% - 32px);
+    height: 89px;
+
+    @media  #{$mq-tablet}, #{$mq-mobile} {
+        display: block;
+
+    }
+
+    &__top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &__icon-hamburger {
+            background-color: transparent;
+            border: none;
+        }
+    }
+
+    &__input {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 7px 16px;
+        gap: 10px;
+
+        background: $color-white;
+        border: 2px solid $color-primary-700;
+        border-radius: 5px;
+
+        width: calc(100% - 32px);
+        height: 12px;
+        margin-top: 25px;
+
+        background-image: url("../../assets/imgs/search-icon-header.png");
+        background-size: 18px;
+        background-repeat: no-repeat;
+        background-position: bottom 50% right 16px;
+
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: $color-primary-500;
+
+        &::placeholder {
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            color: $color-primary-500;
+        }
+    }
+}
--- a/src/components/HeaderMobile/HeaderMobile.tsx
+++ b/src/components/HeaderMobile/HeaderMobile.tsx
@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import styles from './HeaderMobile.module.scss'
+
+import { MenuMobile } from '../MenuMobile/MenuMobile';
+import hamburger from '../../assets/imgs/menu-hamburger-header.png'
+import logo from '../../assets/imgs/m3-acdemy-logo.png'
+import cart from '../../assets/imgs/cart-icon-header.png'
+
+const HeaderMobile = () => {
+    const [menuIsVisible, setMenuIsVisible] = useState(false);
+
+    return (
+        <>
+            <header className={styles['header-mobile']}>
+                <div className={styles['header-mobile__top']}>
+                    <button onClick={() => setMenuIsVisible(true)} className={styles['header-mobile__top__icon-hamburger']}>
+                        <img src={hamburger} alt="Imagem Menu Hamburger"/>
+                    </button>
+                    <a href='/' className={styles['header-mobile__top__icons']}>
+                        <img src={logo} alt="Logo M3-ACADEMY" />
+                    </a>
+
+                    <a href='/' className={styles['header-mobile__top__icons']}>
+                            <img src={cart} alt='Img do Carrinho' />
+                    </a>
+                </div>
+                <input placeholder='Buscar...' className={styles['header-mobile__input']}/>
+                <MenuMobile
+                    menuIsVisible={menuIsVisible}
+                    setMenuIsVisible={setMenuIsVisible}
+                />
+            </ header>
+        </>
+    )
+}
+
+export { HeaderMobile }
--- a/src/components/MenuMobile/MenuMobile.scss
+++ b/src/components/MenuMobile/MenuMobile.scss
@ -0,0 +1,84 @@
+@import '../../variaveis';
+
+.container-menu {
+    position: absolute;
+    backdrop-filter: blur(1px);
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 5;
+
+    background: $color-black-transparent;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.4s ease-in-out;
+
+    &.opened {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    &__wrapper {
+        width: 90%;
+        background-color: $color-white;
+        height: 585px;
+    }
+
+    &__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        width: calc(100% - 32px);
+        height: 78px;
+        padding: 0 16px;
+
+        background: $color-black;
+
+        &__log {
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            color: $color-white;
+            text-decoration: none;
+
+            margin-right: 55px;
+        }
+
+        &__close {
+            background: transparent;
+            border: none;
+        }
+    }
+
+    &__bottom {
+        padding: 0 16px;
+        width: calc(100% - 32px);
+
+        &__list {
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            flex-direction: column;
+            margin-top: 31px;
+
+            &__items-menu {
+                margin-bottom: 12px;
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 16px;
+                text-transform: uppercase;
+                text-decoration: none;
+                color: $color-primary-400;
+
+            }
+        }
+    }
+}
--- a/src/components/MenuMobile/MenuMobile.tsx
+++ b/src/components/MenuMobile/MenuMobile.tsx
@ -0,0 +1,34 @@
+import './MenuMobile.scss'
+
+import close from '../../assets/imgs/close-menu-mobile.png'
+
+interface MenuMobileProps {
+    menuIsVisible: boolean;
+    setMenuIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const MenuMobile = ({menuIsVisible, setMenuIsVisible }: MenuMobileProps) => {
+    return (
+        <section className={`container-menu ${menuIsVisible && 'opened'} `}>
+            <div className={"container-menu__wrapper"}>
+                <div className={"container-menu__top"}>
+                    <a href='/' className={'container-menu__top__log'}>
+                        ENTRAR
+                    </a>
+                    <button className={'container-menu__top__close'} onClick={() => setMenuIsVisible(false)} >
+                        <img src={close} alt="Icone de Fechar Menu" />
+                    </button>
+                </div>
+                <div className={'container-menu__bottom'}>
+                    <nav className={'container-menu__bottom__list'}>
+                        <a href="/" className={'container-menu__bottom__list__items-menu'}>CURSOS</a>
+                        <a href="/" className={'container-menu__bottom__list__items-menu'}>SAIBA MAIS</a>
+                        <a href="/" className={'container-menu__bottom__list__items-menu'}>INSTITUCIONAIS</a>
+                    </nav>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export { MenuMobile }
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -1,12 +1,16 @@
 import React from 'react';

 import { Header } from '../components/Header/Header';
+import { HeaderMobile } from '../components/HeaderMobile/HeaderMobile';

 import './Home.scss';

 function Home() {
    return (
+        < >
            <Header />
+            <HeaderMobile />
+        </>
    );
 }

--- a/yarn.lock
+++ b/yarn.lock
@ -75,7 +75,7 @@
    "@jridgewell/gen-mapping" "^0.3.2"
    jsesc "^2.5.1"

-"@babel/helper-annotate-as-pure@^7.18.6":
+"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
@ -168,7 +168,7 @@
  dependencies:
    "@babel/types" "^7.20.7"

-"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@ -1052,7 +1052,7 @@
    "@babel/parser" "^7.20.7"
    "@babel/types" "^7.20.7"

-"@babel/traverse@^7.20.10", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.7.2":
+"@babel/traverse@^7.20.10", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
  version "7.20.10"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.10.tgz#2bf98239597fcec12f842756f186a9dde6d09230"
  integrity sha512-oSf1juCgymrSez8NI4A2sr4+uB/mFd9MXplYGPEBnfAuWmmyeVcHa6xLPiaRBcXkcb/28bgxmQLTVwFKE1yfsg==
@ -1193,6 +1193,28 @@
  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
  integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==

+"@emotion/is-prop-valid@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@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@^1.4.0":
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.0.tgz#8ec64e0df3e7a1971ee1ff5158da87389f167a63"
@ -1971,6 +1993,14 @@
  dependencies:
    "@types/node" "*"

+"@types/hoist-non-react-statics@*":
+  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/html-minifier-terser@^6.0.0":
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@ -2148,6 +2178,15 @@
  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==

+"@types/styled-components@^5.1.26":
+  version "5.1.26"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.26.tgz#5627e6812ee96d755028a98dae61d28e57c233af"
+  integrity sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/testing-library__jest-dom@^5.9.1":
  version "5.14.5"
  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz#d113709c90b3c75fdb127ec338dad7d5f86c974f"
@ -2850,6 +2889,22 @@ babel-plugin-polyfill-regenerator@^0.4.1:
  dependencies:
    "@babel/helper-define-polyfill-provider" "^0.3.3"

+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
+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 sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
 babel-plugin-transform-react-remove-prop-types@^0.4.24:
  version "0.4.24"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
@ -3128,6 +3183,11 @@ camelcase@^6.2.0, camelcase@^6.2.1:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==

+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
 caniuse-api@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@ -3480,6 +3540,11 @@ css-blank-pseudo@^3.0.3:
  dependencies:
    postcss-selector-parser "^6.0.9"

+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 sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
 css-declaration-sorter@^6.3.1:
  version "6.3.1"
  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz#be5e1d71b7a992433fb1c542c7a1b835e45682ec"
@ -3549,6 +3614,15 @@ css-select@^4.1.3:
    domutils "^2.8.0"
    nth-check "^2.0.1"

+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"
@ -5046,6 +5120,13 @@ he@^1.2.0:
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^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==
+  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"
@ -7253,7 +7334,7 @@ picocolors@^1.0.0:
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==

-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@ -7812,7 +7893,7 @@ postcss-unique-selectors@^5.1.1:
  dependencies:
    postcss-selector-parser "^6.0.5"

-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@ -8061,7 +8142,7 @@ react-error-overlay@^6.0.11:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==

-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -8619,6 +8700,11 @@ setprototypeof@1.2.0:
  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==

+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@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@ -8992,6 +9078,22 @@ style-loader@^3.3.1:
  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
  integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==

+styled-components@^5, styled-components@^5.3.6:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
+  integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
@ -9000,7 +9102,7 @@ stylehacks@^5.1.1:
    browserslist "^4.21.4"
    postcss-selector-parser "^6.0.4"

-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==