formatting code

src/components/AdminToolbar/index.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
 import { checkUserIsAdmin } from "../../utils";
 import "./styles.scss";
 

src/components/AdminToolbar/styles.scss

@@ -12,10 +12,13 @@
     margin: 0;
     padding: 0;
   }
+
   ul {
     float: right;
+
     li {
       display: inline-block;
+
       a {
         display: block;
         font-size: 1.6rem;

src/components/AuthWrapper/styles.scss

@@ -15,8 +15,8 @@
       text-transform: uppercase;
       text-align: center;
       display: block;
-      padding: 0;
       width: 100%;
+      padding: 0;
       margin: 0 auto 3rem;
     }
   }

src/components/Checkout/Item/index.js

@@ -49,7 +49,7 @@ const Item = (product) => {
               {` >`}
             </span>
           </td>
-          <td>£{productPrice}</td>
+          <td>${productPrice}</td>
           <td align="center">
             <span
               className="cartBtn remove"

src/components/Checkout/index.js

@@ -1,14 +1,15 @@
 import React from "react";
+import { useHistory } from "react-router-dom";
 import { useSelector } from "react-redux";
 import {
   selectCartItems,
   selectCartTotal,
 } from "./../../redux/Cart/cart.selectors";
 import { createStructuredSelector } from "reselect";
-import { useHistory } from "react-router-dom";
-import "./styles.scss";
+
 import Button from "../forms/Button";
 import Item from "./Item";
+import "./styles.scss";
 
 const Checkout = () => {
   const history = useHistory();
@@ -83,7 +84,9 @@ const Checkout = () => {
                             </Button>
                           </td>
                           <td>
-                            <Button onClick={() => history.push('/payment')} >Checkout</Button>
+                            <Button onClick={() => history.push("/payment")}>
+                              Checkout
+                            </Button>
                           </td>
                         </tr>
                       </tbody>

src/components/Checkout/styles.scss

@@ -51,3 +51,26 @@
     cursor: pointer;
   }
 }
+
+@media only screen and (max-width: 980px) {
+  .checkoutHeader {
+    display: none;
+  }
+
+  .cartItem {
+    border: 1px solid black;
+  }
+
+  .checkout .cart td {
+    display: block;
+    width: 100%;
+  }
+
+  .checkout .cartBtn.remove {
+    display: block;
+    width: 100%;
+    padding: 1rem;
+    background-color: black;
+    color: white;
+  }
+}

src/components/Directory/index.js

@@ -3,7 +3,7 @@ import ShopMen from "./../../assets/shopMens.jpg";
 import ShopWomen from "./../../assets/shopWomens.jpg";
 import "./styles.scss";
 
-const Directory = (props) => {
+const Directory = () => {
   return (
     <div className="directory">
       <div className="wrap">

src/components/Directory/styles.scss

@@ -1,14 +1,16 @@
 .directory {
   height: 100%;
+
   .wrap {
-    display: inline;
+    display: inline-block;
     width: 100%;
     height: 100%;
+
     .item {
       position: relative;
       width: 50%;
-      float: left;
       height: 100%;
+      float: left;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
@@ -18,7 +20,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        background: rgba(0, 0, 0, 0.3);
+        background-color: rgba(0, 0, 0, 0.3);
         width: 100%;
         height: 100%;
         z-index: 1;
@@ -36,10 +38,26 @@
         line-height: 1;
         font-weight: 400;
         text-transform: uppercase;
-        background: white;
-        padding: 8px 10px;
+        color: black;
+        background: rgba(255, 255, 255, 0.9);
+        padding: 10px 15px;
         border: 1px solid black;
+
+        &:hover {
+          background: rgba(255, 255, 255, 1);
+        }
       }
     }
   }
 }
+
+@media only screen and (max-width: 980px) {
+  .directory .wrap .item {
+    width: 100%;
+    height: 50%;
+
+    a {
+      font-size: 1.5rem;
+    }
+  }
+}

src/components/EmailPassword/index.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
+import { useHistory } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import {
   resetPasswordStart,
   resetUserState,
 } from "./../../redux/User/user.actions";
-import { useHistory } from "react-router-dom";
-import "./styles.scss";
+
 import AuthWrapper from "./../AuthWrapper";
 import FormInput from "./../forms/FormInput";
 import Button from "./../forms/Button";

src/components/Footer/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./styles.scss";
+
+const Footer = () => {
+  return (
+    <footer className="footer">
+      <div className="wrap">Github: FacuEM</div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Footer/styles.scss

@@ -0,0 +1,7 @@
+.footer {
+  .wrap {
+    max-width: 1450px;
+    padding: 20px 10px;
+    margin: 0 auto;
+  }
+}

src/components/Header/index.js

@@ -3,8 +3,9 @@ import { Link } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { signOutUserStart } from "./../../redux/User/user.actions";
 import { selectCartItemsCount } from "./../../redux/Cart/cart.selectors";
-import "./styles.scss";
+
 import Logo from "./../../assets/logo.png";
+import "./styles.scss";
 
 const Header = () => {
   const dispatch = useDispatch();

src/components/Header/styles.scss

@@ -23,6 +23,7 @@
         margin: 0;
       }
     }
+
     nav {
       display: block;
       width: 100%;
@@ -57,6 +58,7 @@
         }
       }
     }
+
     .callToActions {
       position: absolute;
       top: 50%;
@@ -65,11 +67,16 @@
       -moz-transform: translateY(-50%);
       transform: translateY(-50%);
 
+      i {
+        display: none;
+      }
+
       ul,
       li {
         margin: 0;
         padding: 0;
       }
+
       li {
         display: inline-block;
         list-style-type: none;
@@ -92,3 +99,64 @@
     }
   }
 }
+
+.mobileMenu {
+  display: none;
+}
+
+@media only screen and (max-width: 980px) {
+  .mobileMenu {
+    display: block;
+  }
+
+  .header .wrap {
+    .callToActions {
+      i {
+        display: inline-block;
+      }
+
+      ul li {
+        &.hideOnMobile {
+          display: none;
+        }
+
+        a,
+        span {
+          font-size: 0;
+
+          i {
+            font-size: 1.8rem;
+          }
+        }
+      }
+    }
+
+    .mainMenu {
+      display: none;
+      position: absolute;
+      height: auto;
+      top: 100%;
+      left: 0;
+      z-index: 10;
+      background-color: white;
+      border-bottom: 1px solid lightgray;
+
+      &.active {
+        display: block;
+      }
+
+      ul li {
+        width: 100%;
+        margin: 0;
+        border-top: 1px solid lightgray;
+
+        a {
+          display: block;
+          width: 100%;
+          text-align: left;
+          padding: 0 10px;
+        }
+      }
+    }
+  }
+}

src/components/Modal/index.js

@@ -1,16 +1,15 @@
-import React, { useState } from 'react';
-import './styles.scss';
+import React from "react";
+import "./styles.scss";
 
 const Modal = ({ hideModal, toggleModal, children }) => {
   if (hideModal) return null;
 
   return (
     <>
-<div className="modalOverlay" onClick={() => toggleModal()} />      <div className="modal">
-        {children}
-      </div>
+      <div className="modalOverlay" onClick={() => toggleModal()} />{" "}
+      <div className="modal">{children}</div>
     </>
   );
-}
+};
 
-export default Modal; 
+export default Modal;

src/components/Modal/styles.scss

@@ -7,18 +7,30 @@
   background-color: rgba(0, 0, 0, 0.3);
 }
 
-.modal {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  -moz-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  background-color: white;
-  width: 95%;
-  padding: 2rem;
-  max-width: 60rem;
-  height: auto;
-  min-height: 40rem;
-  pointer-events: all;
+.modalWrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 100;
+
+  .modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    background-color: white;
+    width: 95%;
+    padding: 2rem;
+    max-width: 60rem;
+    height: auto;
+    min-height: 40rem;
+    pointer-events: all;
+    max-height: 95vh;
+    overflow: auto;
+  }
 }

src/components/OrderDetails/index.js

@@ -1,4 +1,6 @@
 import React, { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { setOrderDetails } from "./../../redux/Orders/orders.actions";
 import {
   TableContainer,
   Table,
@@ -7,8 +9,6 @@ import {
   TableRow,
   TableCell,
 } from "@material-ui/core";
-import { useDispatch } from "react-redux";
-import { setOrderDetails } from "./../../redux/Orders/orders.actions";
 
 const columns = [
   { id: "productThumbnail", label: "" },