scaled containers to match window size, added css, updated outfits (W…

…IP still)
Recharewky · Nov 12, 2021 · 8d89b2f · 8d89b2f
1 parent 4db9131
commit 8d89b2f
Show file tree

Hide file tree

Showing 7 changed files with 677 additions and 149 deletions.
diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx
@@ -6,6 +6,11 @@ import RelatedProduct from './RelatedProducts/RelatedProducts.jsx';
 import QA from './QA/QA.jsx';
 import Reviews from './Reviews/Reviews.jsx';
 
+const Container = styled.div`
+  font-family: 'Roboto', sans-serif;
+  font-style: normal;
+`;
+
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -17,10 +22,6 @@ class App extends React.Component {
 
   render() {
     const { id } = this.state;
-    const Container = styled.div`
-      font-family: 'Roboto', sans-serif;
-      font-style: normal;
-    `;
     return (
       <Container>
         Hello World

diff --git a/client/src/components/RelatedProducts/Modal.jsx b/client/src/components/RelatedProducts/Modal.jsx
@@ -14,7 +14,6 @@ const Modal = (props) => {
   const { compareProdName } = props;
   const { currentProductFeatures } = props;
   const { currentProductName } = props;
-  const [finalCompareProducts, compareDisplay] = useState([]);
   console.log(props);
 
   const compareFunc = () => {
@@ -26,6 +25,15 @@ const Modal = (props) => {
     for (let i = 0; i < currentProductFeatures.length; i++) {
       setFeatures[currentProductFeatures[i].feature] = [currentProductFeatures[i].value];
     }
+    /*
+    map -> returns new array
+    foreach -> alters something to each item in old array
+      currentProductFeatures.map( (item) => {
+        return(
+          setFeatures
+        )
+      })
+    */
 
     for (let i = 0; i < compareProdFeatures.length; i++) {
       if (setFeatures[compareProdFeatures[i].feature] === undefined) {
@@ -73,93 +81,6 @@ const Modal = (props) => {
     }
   };
 
-  const Background = styled.div`
-  width: 100%;
-  height: 100vh;
-  overflow-y: hidden;
-  top: 0px;
-  left: 0px;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.8);
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-  const ModalWrapper = styled.div`
-  width: 70vw;
-  height: 500px;
-  left: -32vw;
-  top: -28vh;
-  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
-  background: #fff;
-  color: #000;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  position: absolute;
-  z-index: 10;
-  border-radius: 10px;
-
-  & i {
-    padding: 4px;
-  }
-`;
-
-  const ModalContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  line-height: 1.8;
-  color: #141414;
-  p {
-    margin-bottom: 1rem;
-  }
-  div {
-    padding: 4px;
-    margin: 0px;
-  }
-  button {
-    padding: 10px 24px;
-    background: #141414;
-    color: #fff;
-    border: none;
-    margin-top: 20px;
-  }
-
-  & .hide {
-    visibility: hidden;
-  }
-  & h1 {
-    top: 3rem;
-  }
-
-  & .fas.fa-check {
-    color: navy;
-    transform: scale(1.5);
-  }
-`;
-
-  const CloseModalButton = styled(MdClose)`
-  cursor: pointer;
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  z-index: 10;
-
-  & :hover {
-    transform: scale(1.1, 1.1);
-  }
-
-  & :active {
-    transform: scale(-0.9, 0.9);
-  }
-`;
-
   return (
     <>
       {showModal ? (
@@ -210,4 +131,91 @@ const Modal = (props) => {
   );
 };
 
+const Background = styled.div`
+width: 100%;
+height: 100vh;
+overflow-y: hidden;
+top: 0px;
+left: 0px;
+z-index: 10;
+background: rgba(0, 0, 0, 0.8);
+position: fixed;
+display: flex;
+justify-content: center;
+align-items: center;
+`;
+
+const ModalWrapper = styled.div`
+width: 70vw;
+height: 500px;
+left: -32vw;
+top: -28vh;
+box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
+background: #fff;
+color: #000;
+display: grid;
+grid-template-columns: 1fr 1fr 1fr;
+position: absolute;
+z-index: 10;
+border-radius: 10px;
+
+& i {
+  padding: 4px;
+}
+`;
+
+const ModalContent = styled.div`
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+line-height: 1.8;
+color: #141414;
+p {
+  margin-bottom: 1rem;
+}
+div {
+  padding: 4px;
+  margin: 0px;
+}
+button {
+  padding: 10px 24px;
+  background: #141414;
+  color: #fff;
+  border: none;
+  margin-top: 20px;
+}
+
+& .hide {
+  visibility: hidden;
+}
+& h1 {
+  top: 3rem;
+}
+
+& .fas.fa-check {
+  color: navy;
+  transform: scale(1.5);
+}
+`;
+
+const CloseModalButton = styled(MdClose)`
+cursor: pointer;
+position: absolute;
+top: 20px;
+right: 20px;
+width: 32px;
+height: 32px;
+padding: 0;
+z-index: 10;
+
+& :hover {
+  transform: scale(1.1, 1.1);
+}
+
+& :active {
+  transform: scale(-0.9, 0.9);
+}
+`;
+
 export default Modal;