starter files

12 files changed, 417 insertions, 0 deletions

diff --git a/finished-application/frontend/components/styles/CartStyles.js b/finished-application/frontend/components/styles/CartStyles.js
new file mode 100644
index 0000000..d5ee93a
--- /dev/null
+++ b/finished-application/frontend/components/styles/CartStyles.js
@@ -0,0 +1,47 @@
+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/finished-application/frontend/components/styles/CloseButton.js b/finished-application/frontend/components/styles/CloseButton.js
new file mode 100644
index 0000000..69fd55c
--- /dev/null
+++ b/finished-application/frontend/components/styles/CloseButton.js
@@ -0,0 +1,13 @@
+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/finished-application/frontend/components/styles/Form.js b/finished-application/frontend/components/styles/Form.js
new file mode 100644
index 0000000..5717130
--- /dev/null
+++ b/finished-application/frontend/components/styles/Form.js
@@ -0,0 +1,71 @@
+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/finished-application/frontend/components/styles/ItemStyles.js b/finished-application/frontend/components/styles/ItemStyles.js
new file mode 100644
index 0000000..b117d5f
--- /dev/null
+++ b/finished-application/frontend/components/styles/ItemStyles.js
@@ -0,0 +1,39 @@
+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/finished-application/frontend/components/styles/NavStyles.js b/finished-application/frontend/components/styles/NavStyles.js
new file mode 100644
index 0000000..41523df
--- /dev/null
+++ b/finished-application/frontend/components/styles/NavStyles.js
@@ -0,0 +1,64 @@
+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/finished-application/frontend/components/styles/OrderItemStyles.js b/finished-application/frontend/components/styles/OrderItemStyles.js
new file mode 100644
index 0000000..292c75d
--- /dev/null
+++ b/finished-application/frontend/components/styles/OrderItemStyles.js
@@ -0,0 +1,44 @@
+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/finished-application/frontend/components/styles/OrderStyles.js b/finished-application/frontend/components/styles/OrderStyles.js
new file mode 100644
index 0000000..4a2d804
--- /dev/null
+++ b/finished-application/frontend/components/styles/OrderStyles.js
@@ -0,0 +1,38 @@
+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/finished-application/frontend/components/styles/PriceTag.js b/finished-application/frontend/components/styles/PriceTag.js
new file mode 100644
index 0000000..9116681
--- /dev/null
+++ b/finished-application/frontend/components/styles/PriceTag.js
@@ -0,0 +1,17 @@
+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/finished-application/frontend/components/styles/SickButton.js b/finished-application/frontend/components/styles/SickButton.js
new file mode 100644
index 0000000..5b5352e
--- /dev/null
+++ b/finished-application/frontend/components/styles/SickButton.js
@@ -0,0 +1,20 @@
+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/finished-application/frontend/components/styles/Supreme.js b/finished-application/frontend/components/styles/Supreme.js
new file mode 100644
index 0000000..d946ccd
--- /dev/null
+++ b/finished-application/frontend/components/styles/Supreme.js
@@ -0,0 +1,13 @@
+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/finished-application/frontend/components/styles/Table.js b/finished-application/frontend/components/styles/Table.js
new file mode 100644
index 0000000..e9d0673
--- /dev/null
+++ b/finished-application/frontend/components/styles/Table.js
@@ -0,0 +1,31 @@
+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/finished-application/frontend/components/styles/Title.js b/finished-application/frontend/components/styles/Title.js
new file mode 100644
index 0000000..e1901ec
--- /dev/null
+++ b/finished-application/frontend/components/styles/Title.js
@@ -0,0 +1,20 @@
+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;