From 1656041886fb4ce11c4cdbe1211e9a44a95c208b Mon Sep 17 00:00:00 2001
From: Joshua Comeau <joshwcomeau@gmail.com>
Date: Sat, 9 Jan 2021 11:20:08 -0500
Subject: [PATCH] Work on initial stab at solution

---
 .eslintcache                                  |   1 +
 .new-component-config.json                    |   8 ++
 package.json                                  |   2 +
 public/index.html                             |  29 +++--
 src/App.css                                   |  38 -------
 src/App.js                                    |  25 -----
 src/App.test.js                               |   8 --
 src/components/App/App.js                     |  25 +++++
 src/components/App/index.js                   |   1 +
 src/components/Breadcrumbs/Breadcrumbs.js     |  45 ++++++++
 src/components/Breadcrumbs/index.js           |   1 +
 src/components/GlobalStyles/GlobalStyles.js   |  75 +++++++++++++
 src/components/GlobalStyles/index.js          |   1 +
 src/components/Header/Header.js               | 102 ++++++++++++++++++
 src/components/Header/index.js                |   1 +
 src/components/Icon/Icon.js                   |  38 +++++++
 src/components/Icon/index.js                  |   1 +
 src/components/Logo/Logo.js                   |  15 +++
 src/components/Logo/index.js                  |   1 +
 src/components/SearchInput/SearchInput.js     |  50 +++++++++
 src/components/SearchInput/index.js           |   1 +
 src/components/Select/Select.js               |  88 +++++++++++++++
 src/components/Select/index.js                |   1 +
 src/components/ShoeIndex/ShoeIndex.js         |  63 +++++++++++
 src/components/ShoeIndex/index.js             |   1 +
 src/components/ShoeSidebar/ShoeSidebar.js     |  40 +++++++
 src/components/ShoeSidebar/index.js           |   1 +
 src/components/Spacer/Spacer.js               |  18 ++++
 src/components/Spacer/index.js                |   1 +
 .../UnstyledButton/UnstyledButton.js          |  21 ++++
 src/components/UnstyledButton/index.js        |   1 +
 .../VisuallyHidden/VisuallyHidden.js          |  47 ++++++++
 src/components/VisuallyHidden/index.js        |   1 +
 src/constants.js                              |  18 ++++
 src/index.css                                 |  13 ---
 src/index.js                                  |  12 +--
 src/logo.svg                                  |   1 -
 src/reportWebVitals.js                        |  13 ---
 src/setupTests.js                             |   5 -
 yarn.lock                                     |  99 ++++++++++++++++-
 40 files changed, 782 insertions(+), 130 deletions(-)
 create mode 100644 .eslintcache
 create mode 100644 .new-component-config.json
 delete mode 100644 src/App.css
 delete mode 100644 src/App.js
 delete mode 100644 src/App.test.js
 create mode 100644 src/components/App/App.js
 create mode 100644 src/components/App/index.js
 create mode 100644 src/components/Breadcrumbs/Breadcrumbs.js
 create mode 100644 src/components/Breadcrumbs/index.js
 create mode 100644 src/components/GlobalStyles/GlobalStyles.js
 create mode 100644 src/components/GlobalStyles/index.js
 create mode 100644 src/components/Header/Header.js
 create mode 100644 src/components/Header/index.js
 create mode 100644 src/components/Icon/Icon.js
 create mode 100644 src/components/Icon/index.js
 create mode 100644 src/components/Logo/Logo.js
 create mode 100644 src/components/Logo/index.js
 create mode 100644 src/components/SearchInput/SearchInput.js
 create mode 100644 src/components/SearchInput/index.js
 create mode 100644 src/components/Select/Select.js
 create mode 100644 src/components/Select/index.js
 create mode 100644 src/components/ShoeIndex/ShoeIndex.js
 create mode 100644 src/components/ShoeIndex/index.js
 create mode 100644 src/components/ShoeSidebar/ShoeSidebar.js
 create mode 100644 src/components/ShoeSidebar/index.js
 create mode 100644 src/components/Spacer/Spacer.js
 create mode 100644 src/components/Spacer/index.js
 create mode 100644 src/components/UnstyledButton/UnstyledButton.js
 create mode 100644 src/components/UnstyledButton/index.js
 create mode 100644 src/components/VisuallyHidden/VisuallyHidden.js
 create mode 100644 src/components/VisuallyHidden/index.js
 create mode 100644 src/constants.js
 delete mode 100644 src/index.css
 delete mode 100644 src/logo.svg
 delete mode 100644 src/reportWebVitals.js
 delete mode 100644 src/setupTests.js

diff --git a/.eslintcache b/.eslintcache
new file mode 100644
index 00000000..e4ccdc86
--- /dev/null
+++ b/.eslintcache
@@ -0,0 +1 @@
+[{"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/index.js":"1","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/GlobalStyles/index.js":"2","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/App/index.js":"3","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/GlobalStyles/GlobalStyles.js":"4","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/App/App.js":"5","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Header/index.js":"6","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Header/Header.js":"7","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/constants.js":"8","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/SearchInput/index.js":"9","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/SearchInput/SearchInput.js":"10","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/VisuallyHidden/index.js":"11","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/VisuallyHidden/VisuallyHidden.js":"12","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/UnstyledButton/index.js":"13","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/UnstyledButton/UnstyledButton.js":"14","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Icon/index.js":"15","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Icon/Icon.js":"16","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Logo/index.js":"17","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Logo/Logo.js":"18","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Breadcrumbs/index.js":"19","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Breadcrumbs/Breadcrumbs.js":"20","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeIndex/index.js":"21","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeIndex/ShoeIndex.js":"22","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Select/index.js":"23","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Select/Select.js":"24","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeSidebar/index.js":"25","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeSidebar/ShoeSidebar.js":"26","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Spacer/index.js":"27","/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Spacer/Spacer.js":"28"},{"size":284,"mtime":1610198851033,"results":"29","hashOfConfig":"30"},{"size":42,"mtime":1610198753919,"results":"31","hashOfConfig":"30"},{"size":33,"mtime":1610197732524,"results":"32","hashOfConfig":"30"},{"size":1606,"mtime":1610199532638,"results":"33","hashOfConfig":"30"},{"size":456,"mtime":1610208525780,"results":"34","hashOfConfig":"30"},{"size":36,"mtime":1610198168530,"results":"35","hashOfConfig":"30"},{"size":2217,"mtime":1610208525780,"results":"36","hashOfConfig":"30"},{"size":385,"mtime":1610204914556,"results":"37","hashOfConfig":"30"},{"size":41,"mtime":1610199634866,"results":"38","hashOfConfig":"30"},{"size":992,"mtime":1610208525780,"results":"39","hashOfConfig":"30"},{"size":44,"mtime":1610199826658,"results":"40","hashOfConfig":"30"},{"size":1043,"mtime":1610208525827,"results":"41","hashOfConfig":"30"},{"size":44,"mtime":1610200177243,"results":"42","hashOfConfig":"30"},{"size":373,"mtime":1610208525780,"results":"43","hashOfConfig":"30"},{"size":34,"mtime":1610200791134,"results":"44","hashOfConfig":"30"},{"size":715,"mtime":1610208525827,"results":"45","hashOfConfig":"30"},{"size":34,"mtime":1610204428694,"results":"46","hashOfConfig":"30"},{"size":308,"mtime":1610208525780,"results":"47","hashOfConfig":"30"},{"size":41,"mtime":1610205618937,"results":"48","hashOfConfig":"30"},{"size":820,"mtime":1610208740005,"results":"49","hashOfConfig":"30"},{"size":39,"mtime":1610206381586,"results":"50","hashOfConfig":"30"},{"size":1491,"mtime":1610209159112,"results":"51","hashOfConfig":"30"},{"size":36,"mtime":1610206889900,"results":"52","hashOfConfig":"30"},{"size":1776,"mtime":1610208650648,"results":"53","hashOfConfig":"30"},{"size":41,"mtime":1610208844815,"results":"54","hashOfConfig":"30"},{"size":1084,"mtime":1610209179865,"results":"55","hashOfConfig":"30"},{"size":36,"mtime":1610209049792,"results":"56","hashOfConfig":"30"},{"size":391,"mtime":1610209143553,"results":"57","hashOfConfig":"30"},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},"d0tfeb",{"filePath":"61","messages":"62","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"63","messages":"64","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"65","messages":"66","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"67","messages":"68","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"69","messages":"70","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"71","messages":"72","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"73","messages":"74","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"75","messages":"76","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"77","messages":"78","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"79","messages":"80","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"81","messages":"82","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"83","messages":"84","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"85","messages":"86","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"87","messages":"88","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"89","messages":"90","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"91","messages":"92","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"93","messages":"94","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"95","messages":"96","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"60"},{"filePath":"97","messages":"98","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"99","messages":"100","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"101","messages":"102","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"103","messages":"104","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"105","messages":"106","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"107","messages":"108","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"109","messages":"110","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"111","messages":"112","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"113","messages":"114","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/index.js",[],["115","116"],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/GlobalStyles/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/App/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/GlobalStyles/GlobalStyles.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/App/App.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Header/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Header/Header.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/constants.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/SearchInput/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/SearchInput/SearchInput.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/VisuallyHidden/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/VisuallyHidden/VisuallyHidden.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/UnstyledButton/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/UnstyledButton/UnstyledButton.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Icon/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Icon/Icon.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Logo/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Logo/Logo.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Breadcrumbs/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Breadcrumbs/Breadcrumbs.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeIndex/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeIndex/ShoeIndex.js",["117"],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Select/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Select/Select.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeSidebar/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/ShoeSidebar/ShoeSidebar.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Spacer/index.js",[],"/Users/joshuacomeau/work/course-projects/sole-and-ankle/src/components/Spacer/Spacer.js",[],{"ruleId":"118","replacedBy":"119"},{"ruleId":"120","replacedBy":"121"},{"ruleId":"122","severity":1,"message":"123","line":4,"column":19,"nodeType":"124","messageId":"125","endLine":4,"endColumn":25},"no-native-reassign",["126"],"no-negated-in-lhs",["127"],"no-unused-vars","'COLORS' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/.new-component-config.json b/.new-component-config.json
new file mode 100644
index 00000000..48441184
--- /dev/null
+++ b/.new-component-config.json
@@ -0,0 +1,8 @@
+{
+  "type": "functional",
+  "prettierConfig": {
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  }
+}
diff --git a/package.json b/package.json
index ed2515b7..39435649 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-feather": "^2.0.9",
     "react-scripts": "4.0.1",
+    "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
diff --git a/public/index.html b/public/index.html
index aa069f27..067690eb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,31 +3,30 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@500;600;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>Sole&Ankle — CSS for JavaScript Developers</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript
+      >You need to enable JavaScript to run this app.</noscript
+    >
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e053..00000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 37845757..00000000
--- a/src/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afee..00000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/components/App/App.js b/src/components/App/App.js
new file mode 100644
index 00000000..0cabed88
--- /dev/null
+++ b/src/components/App/App.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+
+import Header from '../Header';
+import ShoeIndex from '../ShoeIndex';
+
+const App = () => {
+  const [sortId, setSortId] = React.useState('newest');
+
+  console.log(sortId);
+  return (
+    <>
+      <Header />
+      <Main>
+        <ShoeIndex sortId={sortId} setSortId={setSortId} />
+      </Main>
+    </>
+  );
+};
+
+const Main = styled.main`
+  padding: 64px 32px;
+`;
+
+export default App;
diff --git a/src/components/App/index.js b/src/components/App/index.js
new file mode 100644
index 00000000..9122fa1a
--- /dev/null
+++ b/src/components/App/index.js
@@ -0,0 +1 @@
+export { default } from './App';
diff --git a/src/components/Breadcrumbs/Breadcrumbs.js b/src/components/Breadcrumbs/Breadcrumbs.js
new file mode 100644
index 00000000..eb904957
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { COLORS } from '../../constants';
+
+const Breadcrumbs = ({ children }) => {
+  return <Wrapper>{children}</Wrapper>;
+};
+
+Breadcrumbs.Crumb = ({ href, children, delegated }) => {
+  return (
+    <CrumbWrapper>
+      <CrumbLink href={href} {...delegated}>
+        {children}
+      </CrumbLink>
+    </CrumbWrapper>
+  );
+};
+
+const CrumbWrapper = styled.div`
+  &:not(:first-of-type) {
+    margin-left: 8px;
+
+    &::before {
+      content: '/';
+      margin-right: 8px;
+      color: ${COLORS.gray[300]};
+    }
+  }
+`;
+
+const CrumbLink = styled.a`
+  color: ${COLORS.gray[700]};
+  text-decoration: none;
+
+  &:hover {
+    color: ${COLORS.gray[900]};
+  }
+`;
+
+const Wrapper = styled.nav`
+  display: flex;
+  font-size: 0.875rem;
+`;
+export default Breadcrumbs;
diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js
new file mode 100644
index 00000000..3ff68ca5
--- /dev/null
+++ b/src/components/Breadcrumbs/index.js
@@ -0,0 +1 @@
+export { default } from './Breadcrumbs';
diff --git a/src/components/GlobalStyles/GlobalStyles.js b/src/components/GlobalStyles/GlobalStyles.js
new file mode 100644
index 00000000..f142babc
--- /dev/null
+++ b/src/components/GlobalStyles/GlobalStyles.js
@@ -0,0 +1,75 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+  font-size: 100%;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+
+/* GLOBAL STYLES */
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  line-height: 1.45;
+  font-family: 'Raleway', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
+#root {
+  /*
+    Create a stacking context, without a z-index.
+    This ensures that all portal content (modals and tooltips) will
+    float above the app.
+  */
+  isolation: isolate;
+}
+
+
+html, body, #root {
+  height: 100%;
+}
+`;
+
+export default GlobalStyles;
diff --git a/src/components/GlobalStyles/index.js b/src/components/GlobalStyles/index.js
new file mode 100644
index 00000000..48e20189
--- /dev/null
+++ b/src/components/GlobalStyles/index.js
@@ -0,0 +1 @@
+export { default } from './GlobalStyles';
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 00000000..08740559
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+
+import { COLORS, WEIGHTS } from '../../constants';
+import SearchInput from '../SearchInput';
+import UnstyledButton from '../UnstyledButton';
+import Icon from '../Icon';
+import Logo from '../Logo';
+
+const Header = () => {
+  return (
+    <header>
+      <SuperHeader>
+        <MarketingMessage>
+          Free shipping on domestic orders over $75!
+        </MarketingMessage>
+        <SearchInput />
+        <HelpLink href="/help">Help</HelpLink>
+        <UnstyledButton>
+          <Icon id="shopping-bag" strokeWidth={1} />
+        </UnstyledButton>
+      </SuperHeader>
+      <MainHeader>
+        <Side>
+          <Logo />
+        </Side>
+        <Nav>
+          <NavLink href="/sale">Sale</NavLink>
+          <NavLink href="/new">New&nbsp;Releases</NavLink>
+          <NavLink href="/men">Men</NavLink>
+          <NavLink href="/women">Women</NavLink>
+          <NavLink href="/kids">Kids</NavLink>
+          <NavLink href="/collections">Collections</NavLink>
+        </Nav>
+        <Side />
+      </MainHeader>
+    </header>
+  );
+};
+
+const SuperHeader = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 24px;
+  padding: 0px 32px;
+  height: 40px;
+  font-size: 0.875rem;
+  color: ${COLORS.gray[300]};
+  background-color: ${COLORS.gray[900]};
+`;
+
+const MarketingMessage = styled.span`
+  color: ${COLORS.white};
+  margin-right: auto;
+`;
+
+const HelpLink = styled.a`
+  color: inherit;
+  text-decoration: none;
+  outline-offset: 2px;
+
+  &:not(:focus-visible) {
+    outline: none;
+  }
+`;
+
+const MainHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  height: 72px;
+  padding: 0 32px;
+  border-bottom: 1px solid ${COLORS.gray[300]};
+`;
+
+const Side = styled.div`
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+`;
+
+const Nav = styled.nav`
+  display: flex;
+  margin: 0 48px;
+  gap: 48px;
+`;
+
+const NavLink = styled.a`
+  font-size: 1.125rem;
+  line-height: 72px;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: ${COLORS.gray[900]};
+  font-weight: ${WEIGHTS.medium};
+
+  &:first-of-type {
+    color: ${COLORS.secondary};
+  }
+`;
+
+export default Header;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
new file mode 100644
index 00000000..579f1ac2
--- /dev/null
+++ b/src/components/Header/index.js
@@ -0,0 +1 @@
+export { default } from './Header';
diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js
new file mode 100644
index 00000000..4dee368c
--- /dev/null
+++ b/src/components/Icon/Icon.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+import {
+  Search,
+  Menu,
+  ShoppingBag,
+  ChevronDown,
+} from 'react-feather';
+
+const icons = {
+  search: Search,
+  menu: Menu,
+  'shopping-bag': ShoppingBag,
+  'chevron-down': ChevronDown,
+};
+
+const Icon = ({ id, color, size, strokeWidth, ...delegated }) => {
+  const Component = icons[id];
+
+  if (!Component) {
+    throw new Error(`No icon found for ID: ${id}`);
+  }
+
+  return (
+    <Wrapper strokeWidth={strokeWidth} {...delegated}>
+      <Component color={color} size={size} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  & > svg {
+    display: block;
+    stroke-width: ${(p) => p.strokeWidth}px;
+  }
+`;
+
+export default Icon;
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
new file mode 100644
index 00000000..dc6b45c3
--- /dev/null
+++ b/src/components/Icon/index.js
@@ -0,0 +1 @@
+export { default } from './Icon';
diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js
new file mode 100644
index 00000000..859d378e
--- /dev/null
+++ b/src/components/Logo/Logo.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+
+import { WEIGHTS } from '../../constants';
+
+const Logo = (props) => {
+  return <Wrapper {...props}>Sole&amp;Ankle</Wrapper>;
+};
+
+const Wrapper = styled.h1`
+  font-size: 1.5rem;
+  font-weight: ${WEIGHTS.bold};
+`;
+
+export default Logo;
diff --git a/src/components/Logo/index.js b/src/components/Logo/index.js
new file mode 100644
index 00000000..a5be7785
--- /dev/null
+++ b/src/components/Logo/index.js
@@ -0,0 +1 @@
+export { default } from './Logo';
diff --git a/src/components/SearchInput/SearchInput.js b/src/components/SearchInput/SearchInput.js
new file mode 100644
index 00000000..5d80cd20
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+
+import { COLORS } from '../../constants';
+import VisuallyHidden from '../VisuallyHidden';
+import Icon from '../Icon';
+
+const SearchInput = ({ label, ...delegated }) => {
+  return (
+    <Label>
+      <VisuallyHidden>Search</VisuallyHidden>
+      <Input {...delegated} placeholder="Search…" />
+      <SearchIcon id="search" strokeWidth={1} size={16} />
+    </Label>
+  );
+};
+
+const Label = styled.label`
+  position: relative;
+`;
+
+const Input = styled.input`
+  border: none;
+  background: transparent;
+  border-bottom: 1px solid ${COLORS.gray[300]};
+  padding-left: 24px;
+  font-size: 0.875rem;
+  color: ${COLORS.gray[100]};
+  outline-offset: 4px;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: ${COLORS.gray[500]};
+  }
+`;
+
+const SearchIcon = styled(Icon)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  width: 16px;
+  height: 16px;
+`;
+
+export default SearchInput;
diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js
new file mode 100644
index 00000000..7e9c713e
--- /dev/null
+++ b/src/components/SearchInput/index.js
@@ -0,0 +1 @@
+export { default } from './SearchInput';
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
new file mode 100644
index 00000000..e71ef128
--- /dev/null
+++ b/src/components/Select/Select.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { COLORS, WEIGHTS } from '../../constants';
+import Icon from '../Icon';
+
+const Select = ({ label, value, children, ...delegated }) => {
+  // We want to show the contents of
+  const childArray = React.Children.toArray(children);
+  const selectedChild = childArray.find(
+    (child) => child.props.value === value
+  );
+
+  const displayedValue = selectedChild.props.children;
+
+  return (
+    <Wrapper>
+      <VisibleLabel>{label}</VisibleLabel>
+
+      <SelectWrapper>
+        <NativeSelect {...delegated}>{children}</NativeSelect>
+
+        <DisplayedBit>
+          {displayedValue}
+          <ChevronIcon
+            id="chevron-down"
+            size={24}
+            strokeWidth={1.5}
+          />
+        </DisplayedBit>
+      </SelectWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.label`
+  display: flex;
+  align-items: baseline;
+`;
+
+const VisibleLabel = styled.span`
+  color: ${COLORS.gray[700]};
+  margin-right: 16px;
+`;
+
+const SelectWrapper = styled.div`
+  position: relative;
+`;
+
+const NativeSelect = styled.select`
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+`;
+
+const DisplayedBit = styled.span`
+  display: block;
+  background: ${COLORS.gray[100]};
+  font-size: 1rem;
+  font-weight: ${WEIGHTS.medium};
+  color: ${COLORS.gray[900]};
+  padding: 12px 42px 12px 16px;
+  border-radius: 8px;
+  pointer-events: none;
+
+  ${NativeSelect}:focus ~ & {
+    outline: 1px dotted #212121;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+`;
+
+const ChevronIcon = styled(Icon)`
+  position: absolute;
+  top: 0;
+  right: 9px;
+  bottom: 0;
+  margin: auto;
+  width: 24px;
+  height: 24px;
+`;
+
+export default Select;
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
new file mode 100644
index 00000000..22ae8193
--- /dev/null
+++ b/src/components/Select/index.js
@@ -0,0 +1 @@
+export { default } from './Select';
diff --git a/src/components/ShoeIndex/ShoeIndex.js b/src/components/ShoeIndex/ShoeIndex.js
new file mode 100644
index 00000000..be31bb24
--- /dev/null
+++ b/src/components/ShoeIndex/ShoeIndex.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { WEIGHTS, COLORS } from '../../constants';
+
+import Breadcrumbs from '../Breadcrumbs';
+import Select from '../Select';
+import Spacer from '../Spacer';
+import ShoeSidebar from '../ShoeSidebar';
+
+const ShoeIndex = ({ sortId, setSortId }) => {
+  return (
+    <>
+      <Header>
+        <LeftColumn>
+          <Breadcrumbs>
+            <Breadcrumbs.Crumb href="/">Home</Breadcrumbs.Crumb>
+            <Breadcrumbs.Crumb href="/sale">Sale</Breadcrumbs.Crumb>
+            <Breadcrumbs.Crumb href="/sale/shoes">
+              Shoes
+            </Breadcrumbs.Crumb>
+          </Breadcrumbs>
+          <Spacer size={36} />
+          <ShoeSidebar />
+        </LeftColumn>
+        <HeaderMainColumn>
+          <Title>Running</Title>
+          <Select
+            label="Sort"
+            value={sortId}
+            onChange={(ev) => setSortId(ev.target.value)}
+          >
+            <option value="newest">Newest Releases</option>
+            <option value="price">Price</option>
+          </Select>
+        </HeaderMainColumn>
+      </Header>
+    </>
+  );
+};
+
+const Header = styled.header`
+  display: flex;
+  align-items: baseline;
+`;
+
+const LeftColumn = styled.div`
+  width: 248px;
+`;
+
+const HeaderMainColumn = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+`;
+
+const Title = styled.h2`
+  font-size: 1.5rem;
+  font-weight: ${WEIGHTS.medium};
+`;
+
+export default ShoeIndex;
diff --git a/src/components/ShoeIndex/index.js b/src/components/ShoeIndex/index.js
new file mode 100644
index 00000000..98cd7986
--- /dev/null
+++ b/src/components/ShoeIndex/index.js
@@ -0,0 +1 @@
+export { default } from './ShoeIndex';
diff --git a/src/components/ShoeSidebar/ShoeSidebar.js b/src/components/ShoeSidebar/ShoeSidebar.js
new file mode 100644
index 00000000..46f2acc8
--- /dev/null
+++ b/src/components/ShoeSidebar/ShoeSidebar.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { COLORS, WEIGHTS } from '../../constants';
+
+const Sidebar = () => {
+  return (
+    <Wrapper>
+      <Link href="/lifestyle">Lifestyle</Link>
+      <Link href="/jordan">Jordan</Link>
+      <ActiveLink href="/running">Running</ActiveLink>
+      <Link href="/basketball">Basketball</Link>
+      <Link href="/training">Training &amp; Gym</Link>
+      <Link href="/football">Football</Link>
+      <Link href="/skateboarding">Skateboarding</Link>
+      <Link href="/us-football">American Football</Link>
+      <Link href="/baseball">Baseball</Link>
+      <Link href="/golf">Golf</Link>
+      <Link href="/tennis">Tennis</Link>
+      <Link href="/athletics">Athletics</Link>
+      <Link href="/walking">Walking</Link>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.aside``;
+
+const Link = styled.a`
+  display: block;
+  text-decoration: none;
+  font-weight: ${WEIGHTS.medium};
+  color: ${COLORS.gray[900]};
+  line-height: 2;
+`;
+
+const ActiveLink = styled(Link)`
+  color: ${COLORS.primary};
+`;
+
+export default Sidebar;
diff --git a/src/components/ShoeSidebar/index.js b/src/components/ShoeSidebar/index.js
new file mode 100644
index 00000000..ac0586d5
--- /dev/null
+++ b/src/components/ShoeSidebar/index.js
@@ -0,0 +1 @@
+export { default } from './ShoeSidebar';
diff --git a/src/components/Spacer/Spacer.js b/src/components/Spacer/Spacer.js
new file mode 100644
index 00000000..da200abf
--- /dev/null
+++ b/src/components/Spacer/Spacer.js
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+function getHeight({ axis, size }) {
+  return axis === 'horizontal' ? 1 : size;
+}
+function getWidth({ axis, size }) {
+  return axis === 'vertical' ? 1 : size;
+}
+
+const Spacer = styled.span`
+  display: inline-block;
+  width: ${getWidth}px;
+  min-width: ${getWidth}px;
+  height: ${getHeight}px;
+  min-height: ${getHeight}px;
+`;
+
+export default Spacer;
diff --git a/src/components/Spacer/index.js b/src/components/Spacer/index.js
new file mode 100644
index 00000000..e4d7bd8c
--- /dev/null
+++ b/src/components/Spacer/index.js
@@ -0,0 +1 @@
+export { default } from './Spacer';
diff --git a/src/components/UnstyledButton/UnstyledButton.js b/src/components/UnstyledButton/UnstyledButton.js
new file mode 100644
index 00000000..d326b0a2
--- /dev/null
+++ b/src/components/UnstyledButton/UnstyledButton.js
@@ -0,0 +1,21 @@
+import styled from 'styled-components/macro';
+
+export default styled.button`
+  display: ${(props) => props.display || 'block'};
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+
+  &:focus {
+    outline-offset: 2px;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+`;
diff --git a/src/components/UnstyledButton/index.js b/src/components/UnstyledButton/index.js
new file mode 100644
index 00000000..49382635
--- /dev/null
+++ b/src/components/UnstyledButton/index.js
@@ -0,0 +1 @@
+export { default } from './UnstyledButton';
diff --git a/src/components/VisuallyHidden/VisuallyHidden.js b/src/components/VisuallyHidden/VisuallyHidden.js
new file mode 100644
index 00000000..40d09dcb
--- /dev/null
+++ b/src/components/VisuallyHidden/VisuallyHidden.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+
+const VisuallyHidden = ({ children, ...delegated }) => {
+  const [forceShow, setForceShow] = React.useState(false);
+
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      const handleKeyDown = (ev) => {
+        if (ev.key === 'Alt') {
+          setForceShow(true);
+        }
+      };
+
+      const handleKeyUp = () => {
+        setForceShow(false);
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      window.addEventListener('keyup', handleKeyUp);
+
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('keydown', handleKeyUp);
+      };
+    }
+  }, []);
+
+  if (forceShow) {
+    return children;
+  }
+
+  return <Wrapper {...delegated}>{children}</Wrapper>;
+};
+
+const Wrapper = styled.div`
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+`;
+
+export default VisuallyHidden;
diff --git a/src/components/VisuallyHidden/index.js b/src/components/VisuallyHidden/index.js
new file mode 100644
index 00000000..1ecb6922
--- /dev/null
+++ b/src/components/VisuallyHidden/index.js
@@ -0,0 +1 @@
+export { default } from './VisuallyHidden';
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 00000000..27a91953
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,18 @@
+export const COLORS = {
+  white: 'hsl(0deg, 0%, 100%)',
+  gray: {
+    100: 'hsl(185deg, 5%, 95%)',
+    300: 'hsl(190deg, 5%, 80%)',
+    500: 'hsl(196deg, 4%, 60%)',
+    700: 'hsl(220deg, 5%, 40%)',
+    900: 'hsl(220deg, 3%, 20%)',
+  },
+  primary: 'hsl(340deg, 65%, 47%)',
+  secondary: 'hsl(240deg, 60%, 63%)',
+};
+
+export const WEIGHTS = {
+  normal: 500,
+  medium: 600,
+  bold: 800,
+};
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
index ef2edf8e..4a1d11f0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+
+import App from './components/App';
+import GlobalStyles from './components/GlobalStyles';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
+    <GlobalStyles />
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c05..00000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3ad..00000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b7..00000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/yarn.lock b/yarn.lock
index 6a4aef5d..25015463 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -112,7 +112,7 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10":
+"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d"
   integrity sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==
@@ -1318,7 +1318,7 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
-"@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5":
+"@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5", "@babel/traverse@^7.4.5":
   version "7.12.12"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.12.tgz#d0cd87892704edd8da002d674bc811ce64743376"
   integrity sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==
@@ -1374,6 +1374,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.2.2":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76"
@@ -2860,6 +2882,21 @@ babel-plugin-named-asset-import@^0.3.7:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
   integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
 
+"babel-plugin-styled-components@>= 1":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9"
+  integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -3339,6 +3376,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"
@@ -3899,6 +3941,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"
@@ -3970,6 +4017,15 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -5754,6 +5810,13 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.0.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -9398,7 +9461,14 @@ react-error-overlay@^6.0.8:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
   integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
 
-react-is@^16.8.1:
+react-feather@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.9.tgz#6e42072130d2fa9a09d4476b0e61b0ed17814480"
+  integrity sha512-yMfCGRkZdXwIs23Zw/zIWCJO3m3tlaUvtHiXlW+3FH7cIT6fiK1iJ7RJWugXq7Fso8ZaQyUm92/GOOHXvkiVUw==
+  dependencies:
+    prop-types "^15.7.2"
+
+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==
@@ -10209,6 +10279,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+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"
@@ -10734,6 +10809,22 @@ style-loader@1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+styled-components@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
+  integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -10743,7 +10834,7 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==