add icon with ability to get guest promocode in cart

Turgunov · Oct 31, 2021 · 1406411 · 1406411
1 parent f29ddbb
commit 1406411
Show file tree

Hide file tree

Showing 8 changed files with 593 additions and 13 deletions.
diff --git a/public/promocodesList.json b/public/promocodesList.json
@@ -4,11 +4,16 @@
         "discountInPercentage": 5
     },
     {
-        "code":  "gtgtt90gt2",
+        "code": "gtgtt90gt2",
         "discountInPercentage": 10
     },
     {
-        "code":  "half",
+        "code": "half",
+        "discountInPercentage": 50
+    },
+    {
+        "promocodeType": "guest",
+        "code": "korgyland",
         "discountInPercentage": 50
     }
 ]
diff --git a/src/components/Modal/basicModal/Modal.module.css b/src/components/Modal/basicModal/Modal.module.css
@@ -1,7 +1,7 @@
 .modalBox {
     width: 520px;
     position: absolute;
-    z-index: 2;
+    z-index: 21;
     background-color: #fefefe;
     display: flex;
     flex-direction: column;
@@ -66,7 +66,7 @@
 }
 
 .overlay {
-    z-index: 1;
+    z-index: 20;
     width: 100%;
     position: fixed;
     top: 0;

diff --git a/src/components/OrderTotals/OrderTotals.module.css b/src/components/OrderTotals/OrderTotals.module.css
@@ -1,7 +1,3 @@
-.orderTotals {
-    grid-area: orderTotal;
-}
-
 .promocodeForm {
     margin-bottom: 25px;
 }
@@ -52,6 +48,7 @@
     background-color: #d3cdf94d;
     border-radius: 15px;
     padding: 20px;
+    margin-bottom: 30px;
     box-shadow: 0px 0px 10px 1px hsl(245deg, 76%, 97%);
 }
 

diff --git a/src/index.css b/src/index.css
@@ -3,6 +3,7 @@
     src: local('Alumatica'), url(./fonts/Alumatica-Regular.woff2) format('woff2');
 }
 
+@import url('../src/pages/Cart/DogIcon.css');
 body {
     margin: 0;
     font-family: sans-serif;
@@ -39,6 +40,15 @@ a {
     text-decoration: none;
 }
 
-input:focus, button:focus  {
+input:focus, button:focus {
     outline: 2px solid #667ad1;
+}
+
+.dogContainer {
+    background-color: #3f3456;
+    padding: 15px;
+    height: 220px;
+    border-radius: 15px;
+    position: relative;
+    cursor: pointer;
 }
diff --git a/src/pages/Cart/Cart.jsx b/src/pages/Cart/Cart.jsx
@@ -12,6 +12,7 @@ import { setCurrentArticul } from '../../store/currentCardArticul/actions';
 import Loader from '../../components/Loader/Loader';
 import { CartForm } from '../../components/CartForm/CartForm';
 import OrderTotals from '../../components/OrderTotals/OrderTotals'
+import DogIcon from './DogIcon';
 
 const Cart = () => {
     const isLoading = useSelector(({ cards }) => cards.isLoading);
@@ -56,7 +57,10 @@ const Cart = () => {
             <CartList
                 cards={filteredCards}
                 onClickHandler={onClickHandler} />
-            <OrderTotals  />
+            <div className={styles.totalBlock}>
+                <OrderTotals />
+                <div className={styles.dogIcon}><DogIcon /></div>
+            </div>
             <CartForm />
         </>)
     }

diff --git a/src/pages/Cart/Cart.module.css b/src/pages/Cart/Cart.module.css
@@ -7,8 +7,13 @@
 .cartInner {
     display: grid;
     grid-template-columns: 2.2fr 1fr;
-    grid-template-areas: 'listTitles orderTotal' 'list orderTotal' 'orderForm orderTotal';
+    grid-template-areas: 'listTitles totalBlock' 'list totalBlock' 'orderForm totalBlock';
     column-gap: 100px;
+    row-gap: 20px;
+}
+
+.totalBlock {
+    grid-area: totalBlock;
 }
 
 .cartTitle {
@@ -22,11 +27,11 @@
 .listTitles {
     grid-area: listTitles;
     display: grid;
-    grid-template-columns: 120px  1.5fr repeat(3, 1fr) 50px;
+    grid-template-columns: 120px 1.5fr repeat(3, 1fr) 50px;
     text-align: center;
     column-gap: 3%;
     justify-content: space-between;
-    margin-bottom: 50px;
+    margin-bottom: 34px;
     border-bottom: 1px solid #586ece26;
     padding-bottom: 30px;
 }
@@ -40,4 +45,8 @@
     font-family: "Alumatica", sans-serif;
     font-size: 20px;
     color: #667ad1;
+}
+
+.dogIcon {
+    position: relative;
 }