Video 21

12 files changed, 0 insertions, 417 deletions

diff --git a/stepped-solutions/05/frontend/components/styles/CartStyles.js b/stepped-solutions/05/frontend/components/styles/CartStyles.js
deleted file mode 100644
index d5ee93a..0000000
--- a/stepped-solutions/05/frontend/components/styles/CartStyles.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from 'styled-components';
-
-const CartStyles = styled.div`
-  padding: 20px;
-  position: relative;
-  background: white;
-  position: fixed;
-  height: 100%;
-  top: 0;
-  right: 0;
-  width: 40%;
-  min-width: 500px;
-  bottom: 0;
-  transform: translateX(100%);
-  transition: all 0.3s;
-  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
-  z-index: 5;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  ${props => props.open && `transform: translateX(0);`};
-  header {
-    border-bottom: 5px solid ${props => props.theme.black};
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
-  }
-  footer {
-    border-top: 10px double ${props => props.theme.black};
-    margin-top: 2rem;
-    padding-top: 2rem;
-    display: grid;
-    grid-template-columns: auto auto;
-    align-items: center;
-    font-size: 3rem;
-    font-weight: 900;
-    p {
-      margin: 0;
-    }
-  }
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    overflow: scroll;
-  }
-`;
-
-export default CartStyles;
diff --git a/stepped-solutions/05/frontend/components/styles/CloseButton.js b/stepped-solutions/05/frontend/components/styles/CloseButton.js
deleted file mode 100644
index 69fd55c..0000000
--- a/stepped-solutions/05/frontend/components/styles/CloseButton.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const CloseButton = styled.button`
-  background: black;
-  color: white;
-  font-size: 3rem;
-  border: 0;
-  position: absolute;
-  z-index: 2;
-  right: 0;
-`;
-
-export default CloseButton;
diff --git a/stepped-solutions/05/frontend/components/styles/Form.js b/stepped-solutions/05/frontend/components/styles/Form.js
deleted file mode 100644
index 5717130..0000000
--- a/stepped-solutions/05/frontend/components/styles/Form.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-const loading = keyframes`
-  from {
-    background-position: 0 0;
-    /* rotate: 0; */
-  }
-
-  to {
-    background-position: 100% 100%;
-    /* rotate: 360deg; */
-  }
-`;
-
-const Form = styled.form`
-  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05);
-  background: rgba(0, 0, 0, 0.02);
-  border: 5px solid white;
-  padding: 20px;
-  font-size: 1.5rem;
-  line-height: 1.5;
-  font-weight: 600;
-  label {
-    display: block;
-    margin-bottom: 1rem;
-  }
-  input,
-  textarea,
-  select {
-    width: 100%;
-    padding: 0.5rem;
-    font-size: 1rem;
-    border: 1px solid black;
-    &:focus {
-      outline: 0;
-      border-color: ${props => props.theme.red};
-    }
-  }
-  button,
-  input[type='submit'] {
-    width: auto;
-    background: red;
-    color: white;
-    border: 0;
-    font-size: 2rem;
-    font-weight: 600;
-    padding: 0.5rem 1.2rem;
-  }
-  fieldset {
-    border: 0;
-    padding: 0;
-
-    &[disabled] {
-      opacity: 0.5;
-    }
-    &::before {
-      height: 10px;
-      content: '';
-      display: block;
-      background-image: linear-gradient(to right, #ff3019 0%, #e2b04a 50%, #ff3019 100%);
-    }
-    &[aria-busy='true']::before {
-      background-size: 50% auto;
-      animation: ${loading} 0.5s linear infinite;
-    }
-  }
-`;
-
-Form.displayName = 'Form';
-
-export default Form;
diff --git a/stepped-solutions/05/frontend/components/styles/ItemStyles.js b/stepped-solutions/05/frontend/components/styles/ItemStyles.js
deleted file mode 100644
index b117d5f..0000000
--- a/stepped-solutions/05/frontend/components/styles/ItemStyles.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from 'styled-components';
-
-const Item = styled.div`
-  background: white;
-  border: 1px solid ${props => props.theme.offWhite};
-  box-shadow: ${props => props.theme.bs};
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  img {
-    width: 100%;
-    height: 400px;
-    object-fit: cover;
-  }
-  p {
-    font-size: 12px;
-    line-height: 2;
-    font-weight: 300;
-    flex-grow: 1;
-    padding: 0 3rem;
-    font-size: 1.5rem;
-  }
-  .buttonList {
-    display: grid;
-    width: 100%;
-    border-top: 1px solid ${props => props.theme.lightgrey};
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    grid-gap: 1px;
-    background: ${props => props.theme.lightgrey};
-    & > * {
-      background: white;
-      border: 0;
-      font-size: 1rem;
-      padding: 1rem;
-    }
-  }
-`;
-
-export default Item;
diff --git a/stepped-solutions/05/frontend/components/styles/NavStyles.js b/stepped-solutions/05/frontend/components/styles/NavStyles.js
deleted file mode 100644
index 41523df..0000000
--- a/stepped-solutions/05/frontend/components/styles/NavStyles.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-
-const NavStyles = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  justify-self: end;
-  font-size: 2rem;
-  a,
-  button {
-    padding: 1rem 3rem;
-    display: flex;
-    align-items: center;
-    position: relative;
-    text-transform: uppercase;
-    font-weight: 900;
-    font-size: 1em;
-    background: none;
-    border: 0;
-    cursor: pointer;
-    @media (max-width: 700px) {
-      font-size: 10px;
-      padding: 0 10px;
-    }
-    &:before {
-      content: '';
-      width: 2px;
-      background: ${props => props.theme.lightgrey};
-      height: 100%;
-      left: 0;
-      position: absolute;
-      transform: skew(-20deg);
-      top: 0;
-      bottom: 0;
-    }
-    &:after {
-      height: 2px;
-      background: red;
-      content: '';
-      width: 0;
-      position: absolute;
-      transform: translateX(-50%);
-      transition: width 0.4s;
-      transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
-      left: 50%;
-      margin-top: 2rem;
-    }
-    &:hover,
-    &:focus {
-      outline: none;
-      &:after {
-        width: calc(100% - 60px);
-      }
-    }
-  }
-  @media (max-width: 1300px) {
-    border-top: 1px solid ${props => props.theme.lightgrey};
-    width: 100%;
-    justify-content: center;
-    font-size: 1.5rem;
-  }
-`;
-
-export default NavStyles;
diff --git a/stepped-solutions/05/frontend/components/styles/OrderItemStyles.js b/stepped-solutions/05/frontend/components/styles/OrderItemStyles.js
deleted file mode 100644
index 292c75d..0000000
--- a/stepped-solutions/05/frontend/components/styles/OrderItemStyles.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-
-const OrderItemStyles = styled.li`
-  box-shadow: ${props => props.theme.bs};
-  list-style: none;
-  padding: 2rem;
-  border: 1px solid ${props => props.theme.offWhite};
-  h2 {
-    border-bottom: 2px solid red;
-    margin-top: 0;
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
-  }
-
-  .images {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    margin-top: 1rem;
-    img {
-      height: 200px;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-  .order-meta {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
-    display: grid;
-    grid-gap: 1rem;
-    text-align: center;
-    & > * {
-      margin: 0;
-      background: rgba(0, 0, 0, 0.03);
-      padding: 1rem 0;
-    }
-    strong {
-      display: block;
-      margin-bottom: 1rem;
-    }
-  }
-`;
-
-export default OrderItemStyles;
diff --git a/stepped-solutions/05/frontend/components/styles/OrderStyles.js b/stepped-solutions/05/frontend/components/styles/OrderStyles.js
deleted file mode 100644
index 4a2d804..0000000
--- a/stepped-solutions/05/frontend/components/styles/OrderStyles.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-const OrderStyles = styled.div`
-  max-width: 1000px;
-  margin: 0 auto;
-  border: 1px solid ${props => props.theme.offWhite};
-  box-shadow: ${props => props.theme.bs};
-  padding: 2rem;
-  border-top: 10px solid red;
-  & > p {
-    display: grid;
-    grid-template-columns: 1fr 5fr;
-    margin: 0;
-    border-bottom: 1px solid ${props => props.theme.offWhite};
-    span {
-      padding: 1rem;
-      &:first-child {
-        font-weight: 900;
-        text-align: right;
-      }
-    }
-  }
-  .order-item {
-    border-bottom: 1px solid ${props => props.theme.offWhite};
-    display: grid;
-    grid-template-columns: 300px 1fr;
-    align-items: center;
-    grid-gap: 2rem;
-    margin: 2rem 0;
-    padding-bottom: 2rem;
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-`;
-export default OrderStyles;
diff --git a/stepped-solutions/05/frontend/components/styles/PriceTag.js b/stepped-solutions/05/frontend/components/styles/PriceTag.js
deleted file mode 100644
index 9116681..0000000
--- a/stepped-solutions/05/frontend/components/styles/PriceTag.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-const PriceTag = styled.span`
-  background: ${props => props.theme.red};
-  transform: rotate(3deg);
-  color: white;
-  font-weight: 600;
-  padding: 5px;
-  line-height: 1;
-  font-size: 3rem;
-  display: inline-block;
-  position: absolute;
-  top: -3px;
-  right: -3px;
-`;
-
-export default PriceTag;
diff --git a/stepped-solutions/05/frontend/components/styles/SickButton.js b/stepped-solutions/05/frontend/components/styles/SickButton.js
deleted file mode 100644
index 5b5352e..0000000
--- a/stepped-solutions/05/frontend/components/styles/SickButton.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const SickButton = styled.button`
-  background: red;
-  color: white;
-  font-weight: 500;
-  border: 0;
-  border-radius: 0;
-  text-transform: uppercase;
-  font-size: 2rem;
-  padding: 0.8rem 1.5rem;
-  transform: skew(-2deg);
-  display: inline-block;
-  transition: all 0.5s;
-  &[disabled] {
-    opacity: 0.5;
-  }
-`;
-
-export default SickButton;
diff --git a/stepped-solutions/05/frontend/components/styles/Supreme.js b/stepped-solutions/05/frontend/components/styles/Supreme.js
deleted file mode 100644
index d946ccd..0000000
--- a/stepped-solutions/05/frontend/components/styles/Supreme.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const Supreme = styled.h3`
-  background: ${props => props.theme.red};
-  color: white;
-  display: inline-block;
-  padding: 4px 5px;
-  transform: skew(-3deg);
-  margin: 0;
-  font-size: 4rem;
-`;
-
-export default Supreme;
diff --git a/stepped-solutions/05/frontend/components/styles/Table.js b/stepped-solutions/05/frontend/components/styles/Table.js
deleted file mode 100644
index e9d0673..0000000
--- a/stepped-solutions/05/frontend/components/styles/Table.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-const Table = styled.table`
-  border-spacing: 0;
-  width: 100%;
-  border: 1px solid ${props => props.theme.offWhite};
-  thead {
-    font-size: 10px;
-  }
-  td,
-  th {
-    border-bottom: 1px solid ${props => props.theme.offWhite};
-    border-right: 1px solid ${props => props.theme.offWhite};
-    padding: 10px 5px;
-    position: relative;
-    &:last-child {
-      border-right: none;
-      width: 150px;
-      button {
-        width: 100%;
-      }
-    }
-  }
-  tr {
-    &:hover {
-      background: ${props => props.theme.offWhite};
-    }
-  }
-`;
-
-export default Table;
diff --git a/stepped-solutions/05/frontend/components/styles/Title.js b/stepped-solutions/05/frontend/components/styles/Title.js
deleted file mode 100644
index e1901ec..0000000
--- a/stepped-solutions/05/frontend/components/styles/Title.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const Title = styled.h3`
-  margin: 0 1rem;
-  text-align: center;
-  transform: skew(-5deg) rotate(-1deg);
-  margin-top: -3rem;
-  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
-  a {
-    background: ${props => props.theme.red};
-    display: inline;
-    line-height: 1.3;
-    font-size: 4rem;
-    text-align: center;
-    color: white;
-    padding: 0 1rem;
-  }
-`;
-
-export default Title;