before switching from sass to styled components

web/package.json

@@ -9,7 +9,9 @@
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.3.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

web/src/App.jsx

@@ -1,70 +1,27 @@
-import "./App.sass"
+import {
-
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+import {CreateUserWidget, RecentActivityWidget, SystemStatusWidget} from './components'
+import {AccountManager, AdminUI, Logger} from './views'
 function App() {
   return (
-    <>
+    <Router>
-      <div id="header">
+      <AdminUI>
-        <h1>Doorlock Systems</h1>
+        <Switch>
-        <div id="header__search"><input id="header__search__input" type="text" placeholder="..."></input><button>Search</button></div>
+          <Route path="/" exact>
-        <div id="header__menu">
+            <CreateUserWidget />
-          <ul>
+            <RecentActivityWidget />
-            <li><a>User Settings</a></li>
+            <SystemStatusWidget />
-            <li><a>Logout</a></li>
+          </Route>
-          </ul>
+          <Route path="/accounts">
-        </div>
+            <AccountManager/>
-      </div>
+          </Route>
-      <div id="menu">
+        </Switch>
-        <h3>Menu</h3>
+      </AdminUI>
-        <ul>
+    </Router>
-          <li><a className="menu__active">Status</a></li>
-          <li><a>Account</a></li>
-          <li><a>Log</a></li>
-          <li><a>Backup</a></li>
-          <li><a>Admin</a></li>
-        </ul>
-      </div>
-      <div id="main">
-      <div className="main__card">
-          <h4>Add User</h4>
-          <hr />
-          <p>Add new user</p>
-          <p><label>First Name</label><input type="text"></input></p>
-          <p><label>Last Name</label><input type="text"></input></p>
-          <p><label>PIN</label><input type="text"></input></p>
-          <p><label>RFID</label><input type="text"></input><button>Scan</button></p>
-          <p><label>Expire Date</label><input type="date"></input></p>
-          <button>Add</button>
-        </div>
-        <div className="main__card">
-          <h4>Recent Activity</h4>
-          <hr />
-          <table>
-            <thead>
-              <tr>
-                <td>Name</td>
-                <td>Method</td>
-                <td>Time</td>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Max Mustermann</td>
-                <td>RFID</td>
-                <td>1.10.2020 08:30</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div className="main__card">
-          <h4>System Status</h4>
-          <hr />
-          <p>Uptime: since 3days 15hours</p>
-          <p>LastDB Update: before 7hours</p>
-          <p>Last administrator login: Admin (12.9.2021 09:30)</p>
-        </div>
-      </div>
-      <div id="footer">Footer</div>
-    </>
   );
 }
 

web/src/components/Card.css

@@ -0,0 +1 @@
+/* No CSS *//*# sourceMappingURL=Card.css.map */

web/src/components/Card.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "",
+    "sources": [
+        "Card.sass"
+    ],
+    "names": [],
+    "file": "Card.css"
+}

web/src/components/Card.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import styled from 'styled-components'
+import { theme } from '../theme';
+const CardDiv = styled.div`
+flex-grow: 1;
+color: ${theme.color6};
+background: ${theme.color1};
+border-radius: 1em;
+padding: 1em;
+margin: 1em;
+h4 {
+    margin: 0;
+  }
+`;
+export default function Card({children}) {
+    return (
+        <CardDiv theme={theme}>
+            {children}
+        </CardDiv>
+    )
+}

web/src/components/Card.sass

@@ -0,0 +1,74 @@
+.main
+    &__card
+        flex-grow: 1
+        color: $color6
+        background: $color1
+        border-radius: 1em
+        padding: 1em
+        margin: 1em
+        h4
+            margin: 0
+        &__input
+            padding: 1em .2em .1em 0.2em
+            display: inline-block
+            flex-grow: 1
+            with: auto
+            z-index: 1
+            border: none
+            background: none
+            outline: none
+            font-size: 1em
+            &__box
+                font-size: 1.1em
+                overflow: hidden
+                position: relative
+                margin: 0.2em 0
+                display: flex
+                flex-direction: row
+                align-items: stretch
+                background: $color6
+                border-bottom: .3em solid $color5
+                &:hover
+                    border-bottom: .3em solid $color3
+                    outline: auto
+                >button
+                    position: relative
+                    background: $color2
+                    color: $color6
+                    border: none
+                    font-size: 0.8em
+                    font-weight: bold
+                    padding: 0 .5em
+                    transition: ease all 300ms
+                    z-index: 1
+                    &::before
+                        position: absolute
+                        display: block
+                        content: ''
+                        clip-path: polygon(0% 0%, 100% 100%, 0% 100%)
+                        transform: translateX(-90%) rotate(45deg)
+                        height: 1em
+                        width: 1em
+                        background: $color2
+                        transition: ease all 300ms
+                    &:hover
+                        background: $color3
+                        &::before
+                            background: $color3
+                            transform: translateX(-90%) rotate(45deg) scale(1.2)
+
+            &__label
+                padding: 0
+                color: $color2
+                z-index: 0
+                position: absolute
+                left: 0.2em
+                padding-bottom: 0.2em
+                bottom: 0
+                transition: all ease-in-out 350ms
+            &:focus + &__label, &:not(:placeholder-shown) + &__label
+                color: $color5
+                font-size: 0.7em
+                transform: translateY(0)
+                bottom: 50%
+                font-weight: bold

web/src/components/CreateUserWidget.jsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import TextInput from './TextInput'
+export class CreateUserWidget extends Component {
+    render() {
+        return (
+            <div className="main__card">
+                <h4>Add User</h4>
+                <hr />
+                <p>Add new user</p>
+                <div className="main__card__input__box"><input id="main__card__input__box__0" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__0" className="main__card__input__label">First Name</label></div>
+                <div className="main__card__input__box"><input id="main__card__input__box__1" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__1" className="main__card__input__label">Last Name</label></div>
+                <div className="main__card__input__box"><input id="main__card__input__box__2" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__2" className="main__card__input__label">PIN</label></div>
+                <div className="main__card__input__box"><input id="main__card__input__box__3" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__3" className="main__card__input__label">RFID</label><button>Scan</button></div>
+                <TextInput/>
+                <div className="main__card__input__box"><input id="main__card__input__box__4" placeholder=" " type="date" className="main__card__input"></input><label for="main__card__input__box__4" className="main__card__input__label">Expire Date</label></div>
+                <button>Add</button>
+            </div>
+        )
+    }
+}
+
+export default CreateUserWidget

web/src/components/RecentActivityWidget.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+
+export class RecentActivityWidget extends Component {
+    render() {
+        return (
+            <div className="main__card">
+            <h4>Recent Activity</h4>
+            <hr />
+            <table>
+                <thead>
+                    <tr>
+                        <td>Name</td>
+                        <td>Method</td>
+                        <td>Time</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Max Mustermann</td>
+                        <td>RFID</td>
+                        <td>1.10.2020 08:30</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        )
+    }
+}
+
+export default RecentActivityWidget

web/src/components/SystemStatusWidget.jsx

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import Card from './Card'
+export class SystemStatusWidget extends Component {
+    render() {
+        return (
+            <Card>
+                <h4>System Status</h4>
+                <hr />
+                <p>Uptime: since 3days 15hours</p>
+                <p>LastDB Update: before 7hours</p>
+                <p>Last administrator login: Admin (12.9.2021 09:30)</p>
+            </Card>
+        )
+    }
+}
+
+export default SystemStatusWidget

web/src/components/TextInput.jsx

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import { theme } from '../theme'
+const InputWrapper = styled.div`
+font-size: 1.1em;
+overflow: hidden;
+position: relative;
+margin: 0.2em 0;
+display: -webkit-box;
+display: -ms-flexbox;
+display: flex;
+-webkit-box-orient: horizontal;
+-webkit-box-direction: normal;
+    -ms-flex-direction: row;
+        flex-direction: row;
+-webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+        align-items: stretch;
+background: #ddd9ebbf;
+border-bottom: 0.3em solid #490428c6;
+`;
+
+export class TextInput extends Component {
+    render() {
+        return (
+            <InputWrapper>
+                <input id="main__card__input__box__3" placeholder=" " type="text" className="main__card__input"></input>
+                <label for="main__card__input__box__3" className="main__card__input__label">RFID</label>
+                <button>Scan</button>
+            </InputWrapper>
+
+        )
+    }
+}
+
+export default TextInput

web/src/components/index.js

@@ -0,0 +1,4 @@
+import CreateUserWidget from "./CreateUserWidget";
+import RecentActivityWidget from "./RecentActivityWidget";
+import SystemStatusWidget from "./SystemStatusWidget";
+export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget }

web/src/theme/index.js

@@ -0,0 +1,10 @@
+const theme = {
+color1: "#1F1E2E",
+color2: "#27283A",
+color3: "#438AF4",
+color4: "rgba(2,0,36,0.7455182756696428)",
+color5: "#490428c6",
+color6: "#ddd9ebbf",
+}
+
+export {theme}

web/src/views/AccountManager.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import Card from '../components/Card'
+export class AccountManager extends Component {
+    render() {
+        return (
+            <Card>
+                <h4>Account Manager</h4>
+                <hr/>
+                Hello World
+            </Card>
+        )
+    }
+}
+
+export default AccountManager

web/src/views/AdminUI.css

@@ -0,0 +1,444 @@
+* {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+}
+
+#root {
+  min-height: 100vh;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: auto 1fr auto;
+      grid-template-columns: auto 1fr auto;
+  -ms-grid-rows: auto 1fr 2em;
+      grid-template-rows: auto 1fr 2em;
+      grid-template-areas: "header header header" " menu main ." "footer footer footer";
+  background: #27283A;
+  overflow: auto;
+}
+
+#header {
+  position: relative;
+  -ms-grid-row: 1;
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 3;
+  grid-area: header;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  min-height: auto;
+  padding: .5em;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: #1F1E2E;
+  color: #ddd9ebbf;
+}
+
+#header h1 {
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  white-space: nowrap;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 1.5em;
+}
+
+#header::after {
+  -ms-grid-column-align: start;
+      justify-self: start;
+  position: absolute;
+  display: block;
+  content: '';
+  left: 0;
+  right: 0;
+  top: 100%;
+  background: #438AF4;
+  height: .1em;
+}
+
+#header__search {
+  margin: .5em;
+  border-radius: .5rem;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  white-space: nowrap;
+  margin-left: auto;
+  -webkit-transition: ease-in-out all 500ms;
+  transition: ease-in-out all 500ms;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  max-width: 20em;
+}
+
+#header__search:hover {
+  -webkit-box-shadow: 0 0 1em #438AF4;
+          box-shadow: 0 0 1em #438AF4;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+
+#header__search:hover__input {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+
+#header__search__input {
+  height: 2rem;
+  -webkit-transition: ease all 500ms;
+  transition: ease all 500ms;
+  border-radius: .5rem 0 0 .5rem;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  background: #438AF4;
+  border: none;
+  outline: none;
+  color: #ddd9ebbf;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  margin-left: auto;
+  width: 100%;
+  -webkit-box-shadow: 0 0 0.2em #490428c6;
+          box-shadow: 0 0 0.2em #490428c6;
+  padding: .5em;
+}
+
+#header__search__input:hover, #header__search__input:not(:placeholder-shown) {
+  -webkit-transition: ease all 500ms;
+  transition: ease all 500ms;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+
+#header__search__input + button {
+  height: 2rem;
+  border: none;
+  color: #ddd9ebbf;
+  border-radius: 0 .5rem .5rem 0;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: #27283A;
+  font-size: 1em;
+  border: 0.1rem inset #438AF4;
+  border-style: solid;
+  padding: .5em;
+}
+
+#header__search__input + button:hover {
+  background: #ddd9ebbf;
+  color: #438AF4;
+}
+
+#header__menu {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
+}
+
+#header__menu ul {
+  list-style: none;
+  padding: 0;
+}
+
+#header__menu ul li {
+  display: inline;
+}
+
+#header__menu ul li a {
+  text-decoration: none;
+  color: #ddd9ebbf;
+  padding: .5em;
+  white-space: nowrap;
+}
+
+#header__menu ul li a:hover {
+  color: #438AF4;
+}
+
+#menu {
+  -ms-grid-row: 2;
+  -ms-grid-column: 1;
+  grid-area: menu;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 100;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: #1F1E2E;
+  padding: .5em 0;
+  overflow: visible;
+}
+
+#menu h3 {
+  margin: 0;
+  color: #ddd9ebbf;
+  -webkit-text-decoration: bold;
+          text-decoration: bold;
+}
+
+#menu ul {
+  list-style: none;
+  padding-left: 0;
+  margin: .4em 0;
+}
+
+#menu ul a {
+  position: relative;
+  display: block;
+  text-decoration: none;
+  margin-left: .4em;
+  color: #ddd9ebbf;
+  padding: .3em .5em;
+  font-size: 1.05em;
+  -webkit-transition: ease all 500ms;
+  transition: ease all 500ms;
+}
+
+#menu ul a::after {
+  -webkit-transition: ease all 500ms;
+  transition: ease all 500ms;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 100%;
+  width: 0em;
+  content: '';
+  background: #ddd9ebbf;
+}
+
+#menu ul a:hover {
+  background: #438AF4;
+}
+
+#menu ul a:hover::after {
+  width: 0.4em;
+}
+
+#menu ul a.menu__active {
+  color: #438AF4;
+}
+
+#menu ul a.menu__active::after {
+  width: 0.4em;
+  background: #27283A;
+}
+
+#menu ul a.menu__active:hover {
+  color: #fff;
+}
+
+#menu ul a.menu__active:hover::after {
+  width: 0.4em;
+  background: #ddd9ebbf;
+}
+
+#main {
+  position: relative;
+  -ms-grid-row: 2;
+  -ms-grid-column: 2;
+  grid-area: main;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-line-pack: start;
+      align-content: flex-start;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  padding: 1em;
+  border-top-left-radius: 1em;
+}
+
+.main__card {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  color: #ddd9ebbf;
+  background: #1F1E2E;
+  border-radius: 1em;
+  padding: 1em;
+  margin: 1em;
+}
+
+.main__card h4 {
+  margin: 0;
+}
+
+.main__card__input {
+  padding: 1em .2em .1em 0.2em;
+  display: inline-block;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  with: auto;
+  z-index: 1;
+  border: none;
+  background: none;
+  outline: none;
+  font-size: 1em;
+}
+
+.main__card__input__box {
+  font-size: 1.1em;
+  overflow: hidden;
+  position: relative;
+  margin: 0.2em 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  background: #ddd9ebbf;
+  border-bottom: 0.3em solid #490428c6;
+}
+
+.main__card__input__box:hover {
+  border-bottom: 0.3em solid #438AF4;
+  outline: auto;
+}
+
+.main__card__input__box > button {
+  position: relative;
+  background: #27283A;
+  color: #ddd9ebbf;
+  border: none;
+  font-size: 0.8em;
+  font-weight: bold;
+  padding: 0 .5em;
+  -webkit-transition: ease all 300ms;
+  transition: ease all 300ms;
+  z-index: 1;
+}
+
+.main__card__input__box > button::before {
+  position: absolute;
+  display: block;
+  content: '';
+  -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+          clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+  -webkit-transform: translateX(-90%) rotate(45deg);
+          transform: translateX(-90%) rotate(45deg);
+  height: 1em;
+  width: 1em;
+  background: #27283A;
+  -webkit-transition: ease all 300ms;
+  transition: ease all 300ms;
+}
+
+.main__card__input__box > button:hover {
+  background: #438AF4;
+}
+
+.main__card__input__box > button:hover::before {
+  background: #438AF4;
+  -webkit-transform: translateX(-90%) rotate(45deg) scale(1.2);
+          transform: translateX(-90%) rotate(45deg) scale(1.2);
+}
+
+.main__card__input__label {
+  padding: 0;
+  color: #27283A;
+  z-index: 0;
+  position: absolute;
+  left: 0.2em;
+  padding-bottom: 0.2em;
+  bottom: 0;
+  -webkit-transition: all ease-in-out 350ms;
+  transition: all ease-in-out 350ms;
+}
+
+.main__card__input:focus + .main__card__input__label, .main__card__input:not(:placeholder-shown) + .main__card__input__label {
+  color: #490428c6;
+  font-size: 0.7em;
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+  bottom: 50%;
+  font-weight: bold;
+}
+
+#footer {
+  position: relative;
+  -ms-grid-row: 3;
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 3;
+  grid-area: footer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: #ffffff67;
+  text-transform: uppercase;
+}
+
+#footer::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2em;
+  widht: 100vw;
+  opacity: 0.5;
+  background: #000;
+  background: -webkit-gradient(linear, left top, right top, from(#27283A), color-stop(#110d13), color-stop(50%, #490428c6), color-stop(65%, rgba(2, 0, 36, 0.745518)), to(#1F1E2E));
+  background: linear-gradient(90deg, #27283A 0%, #110d13, #490428c6 50%, rgba(2, 0, 36, 0.745518) 65%, #1F1E2E 100%);
+  content: '';
+}
+
+#footer::before {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  height: .2em;
+  opacity: 0.5;
+  content: '';
+  background: -webkit-gradient(linear, left top, left bottom, from(#27283A), to(#438AF4));
+  background: linear-gradient(#27283A, #438AF4);
+}
+/*# sourceMappingURL=AdminUI.css.map */

web/src/views/AdminUI.jsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import "./AdminUI.sass"
+import {Link, NavLink} from 'react-router-dom'
+
+export class AdminUI extends Component {
+    render() {
+        const children = this.props.children;
+        return (
+            <>
+                <div id="header">
+                    <h1>Doorlock Systems</h1>
+                    <div id="header__search"><input id="header__search__input" type="text" placeholder="..."></input><button>Search</button></div>
+                    <div id="header__menu">
+                        <ul>
+                            <li><Link to="/user_cp">User Settings</Link></li>
+                            <li><Link to="/logout">Logout</Link></li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="menu">
+                    <h3>Menu</h3>
+                    <ul>
+                        <li><NavLink activeClassName="menu__active" exact to="/">Status</NavLink></li>
+                        <li><NavLink activeClassName="menu__active" to="/accounts">Account</NavLink></li>
+                        <li><NavLink activeClassName="menu__active" to="/log">Log</NavLink></li>
+                        <li><NavLink activeClassName="menu__active" to="/backup">Backup</NavLink></li>
+                        <li><NavLink activeClassName="menu__active" to="/admin">Admin</NavLink></li>
+                    </ul>
+                </div>
+                <div id="main">
+                    {children}
+                </div>
+                <div id="footer">Footer</div>
+            </>
+        )
+    }
+}
+
+export default AdminUI

web/src/views/AdminUI.sass

@@ -2,7 +2,7 @@ $color1: #1F1E2E
 $color2: #27283A
 $color3: #438AF4
 $color4: rgba(2,0,36,0.7455182756696428)
-$color5: rgba(43,2,23,0.7763306005996149)
+$color5: #490428c6
 $color6: #ddd9ebbf
 *
     box-sizing: border-box
@@ -25,7 +25,7 @@ html, body
     flex-direction: row
     min-height: auto
     padding: .5em
-    justify-content: space-between
+    justify-content: flex-end
     align-items: center
     background: $color1
     color: $color6
@@ -48,26 +48,31 @@ html, body
 
     &__search
 
-        margin: 1em
+        margin: .5em
-        position: relative
         border-radius: .5rem
         display: inline-flex
+        white-space: nowrap
         margin-left: auto
-        transition: ease all 500ms
+        transition: ease-in-out all 500ms
+        flex-grow: 0
+        max-width: 20em 
         &:hover 
+            box-shadow: 0 0 1em $color3
+            flex-grow: 1
+            &__input
                 flex-grow: 1
         &__input
             height: 2rem
             transition: ease all 500ms
             border-radius: .5rem 0 0 .5rem
-            display: flex
+            display: inline-flex
             background: $color3
             border: none
             outline: none
             color: $color6
             flex-grow: 0
             margin-left: auto
-            max-width: 50%
+            width: 100%
             box-shadow: 0 0 .2em $color5
             padding: .5em
             &:hover, &:not(:placeholder-shown)
@@ -78,7 +83,7 @@ html, body
                 border: none
                 color: $color6
                 border-radius: 0 .5rem .5rem 0
-                display: flex
+                display: inline-flex
                 align-items: center
                 background: $color2
                 font-size: 1em
@@ -98,8 +103,12 @@ html, body
             li
                 display: inline
                 a
+                    text-decoration: none
+                    color: $color6
                     padding: .5em
                     white-space: nowrap
+                    &:hover
+                        color: $color3
 #menu
     grid-area: menu
     display: flex
@@ -153,20 +162,88 @@ html, body
                         background: $color6
 
 #main
+    position: relative
     grid-area: main
     display: flex
+    align-content: flex-start
+    align-items: flex-start
     flex-wrap: wrap
     padding: 1em
     border-top-left-radius: 1em
 .main
     &__card
         flex-grow: 1
-            background: $color6
+        color: $color6
+        background: $color1
         border-radius: 1em
         padding: 1em
         margin: 1em
         h4
             margin: 0
+        &__input
+            padding: 1em .2em .1em 0.2em
+            display: inline-block
+            flex-grow: 1
+            with: auto
+            z-index: 1
+            border: none
+            background: none
+            outline: none
+            font-size: 1em
+            &__box
+                font-size: 1.1em
+                overflow: hidden
+                position: relative
+                margin: 0.2em 0
+                display: flex
+                flex-direction: row
+                align-items: stretch
+                background: $color6
+                border-bottom: .3em solid $color5
+                &:hover
+                    border-bottom: .3em solid $color3
+                    outline: auto
+                >button
+                    position: relative
+                    background: $color2
+                    color: $color6
+                    border: none
+                    font-size: 0.8em
+                    font-weight: bold
+                    padding: 0 .5em
+                    transition: ease all 300ms
+                    z-index: 1
+                    &::before
+                        position: absolute
+                        display: block
+                        content: ''
+                        clip-path: polygon(0% 0%, 100% 100%, 0% 100%)
+                        transform: translateX(-90%) rotate(45deg)
+                        height: 1em
+                        width: 1em
+                        background: $color2
+                        transition: ease all 300ms
+                    &:hover
+                        background: $color3
+                        &::before
+                            background: $color3
+                            transform: translateX(-90%) rotate(45deg) scale(1.2)
+
+            &__label
+                padding: 0
+                color: $color2
+                z-index: 0
+                position: absolute
+                left: 0.2em
+                padding-bottom: 0.2em
+                bottom: 0
+                transition: all ease-in-out 350ms
+            &:focus + &__label, &:not(:placeholder-shown) + &__label
+                color: $color5
+                font-size: 0.7em
+                transform: translateY(0)
+                bottom: 50%
+                font-weight: bold
 #footer
     position: relative
     grid-area: footer

web/src/views/Logger.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+
+export class Logger extends Component {
+    render() {
+        return (
+            <div>
+                <div className="main__card">
+                    
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Logger

web/src/views/index.js

@@ -0,0 +1,4 @@
+import Logger from "./Logger";
+import AdminUI from "./AdminUI";
+import AccountManager from "./AccountManager";
+export {AccountManager, AdminUI, Logger}

web/yarn.lock

@@ -80,7 +80,7 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
+"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz#3d0e43b00c5e49fdb6c57e421601a7a658d5f835"
   integrity sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==
@@ -1157,7 +1157,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -1173,7 +1173,7 @@
     "@babel/parser" "^7.15.4"
     "@babel/types" "^7.15.4"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.7.0":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
   integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
@@ -1219,6 +1219,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.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -2771,6 +2793,21 @@ babel-plugin-polyfill-regenerator@^0.2.2:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
 
+"babel-plugin-styled-components@>= 1.12.0":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz#ebe0e6deff51d7f93fceda1819e9b96aeb88278d"
+  integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==
+  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"
@@ -3257,6 +3294,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"
@@ -3816,6 +3858,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"
@@ -3888,6 +3935,15 @@ css-select@^4.1.3:
     domutils "^2.6.0"
     nth-check "^2.0.0"
 
+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"
@@ -5750,6 +5806,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5759,6 +5827,13 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.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"
@@ -6485,6 +6560,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -7367,7 +7447,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7606,6 +7686,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -8454,6 +8542,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -9334,7 +9429,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9559,7 +9654,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.6.0, 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==
@@ -9574,6 +9669,35 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
+  integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.1"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
+  integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
@@ -9922,6 +10046,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz#3c16caebe0b9faea9c7cc252fa49d2353c412320"
@@ -10332,6 +10461,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"
@@ -10881,6 +11015,22 @@ style-loader@1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+styled-components@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.1.tgz#8a86dcd31bff7049c2ed408bae36fa23f03f071a"
+  integrity sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ==
+  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.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@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -10895,7 +11045,7 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-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==
@@ -11096,6 +11246,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmpl@1.0.x:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -11545,6 +11705,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"