From 012c70ce36d66f9679c49452ef7f0b6d0d1c6f8a Mon Sep 17 00:00:00 2001
From: Tetiana Veremchuk <tetianaverem@gmail.com>
Date: Sat, 15 Jun 2024 01:36:48 +0300
Subject: [PATCH] fix cart

---
 src/pages/CartPage/CartItem/CartItem.scss | 56 ++++++++++++++++++++---
 src/pages/CartPage/CartItem/CartItem.tsx  |  9 ++++
 src/pages/CartPage/CartPage.scss          | 20 ++++----
 3 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/src/pages/CartPage/CartItem/CartItem.scss b/src/pages/CartPage/CartItem/CartItem.scss
index 2e6546f..6aee6db 100644
--- a/src/pages/CartPage/CartItem/CartItem.scss
+++ b/src/pages/CartPage/CartItem/CartItem.scss
@@ -52,11 +52,15 @@
 
   &__product-link {
     display: flex;
-    flex-basis: 25%;
+    //  flex-basis: 25%;
     text-decoration: none;
 
     &--name {
-      flex-basis: 60%;
+      //  flex-basis: 60%;
+
+      @include on-mobile {
+        //  flex-basis: 45%
+      }
     }
   }
 
@@ -68,26 +72,64 @@
     &:hover {
       text-decoration: underline;
     }
+    @include on-mobile {
+      // flex-basis: 100%;
+    }
   }
 
   &__count-buttons {
-    margin-right: 40px;
+    // margin-right: 40px;
     width: 96px;
     height: 32px;
-    display: flex;
+    display: grid;
     justify-content: space-between;
     align-items: center;
-    gap: 14px;
+    // gap: 14px;
+    flex-direction: column;
+    grid-template-columns: 1fr 32px 1fr;
+    justify-items: center;
     @include body-text;
-  }
+   }
 
   &__button {
-    width: 32px;
+    min-width: 32px;
     height: 100%;
     background-color: var(--color-white);
   }
 
   &__price {
+    min-width: 90px;
     @include h3;
+
+    @include on-mobile {
+      text-align: end;
+    }
+  }
+  .sum {
+    width: 50%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    @include on-mobile {
+      width: 100%;
+      // gap: 16px;
+      // justify-content: space-between;
+    }
+  }
+  .gadget {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 24px;
+    @include on-mobile {
+      // width: 100%;
+      gap: 16px;
+    }
   }
 }
diff --git a/src/pages/CartPage/CartItem/CartItem.tsx b/src/pages/CartPage/CartItem/CartItem.tsx
index 59ce7bc..f14a45d 100644
--- a/src/pages/CartPage/CartItem/CartItem.tsx
+++ b/src/pages/CartPage/CartItem/CartItem.tsx
@@ -27,6 +27,7 @@ export const CartItem: React.FC<Props> = ({
 }) => {
   return (
     <div className="cart-item">
+      <div className="gadget">
       <button
         type="button"
         aria-label="delete button"
@@ -50,6 +51,12 @@ export const CartItem: React.FC<Props> = ({
       >
         <h2 className="cart-item__name">{product.name}</h2>
       </Link>
+      </div>
+
+
+
+      <div className="sum">
+
       <div className="cart-item__count-buttons">
         <button
           type="button"
@@ -69,6 +76,8 @@ export const CartItem: React.FC<Props> = ({
         />
       </div>
       <span className="cart-item__price">${product.price * quantity}</span>
+
+      </div>
     </div>
   );
 };
diff --git a/src/pages/CartPage/CartPage.scss b/src/pages/CartPage/CartPage.scss
index fd251aa..1194b78 100644
--- a/src/pages/CartPage/CartPage.scss
+++ b/src/pages/CartPage/CartPage.scss
@@ -57,16 +57,16 @@
     text-align: center;
   }
 
-  &__items-count {
-    padding-bottom: 24px;
-    margin-bottom: 24px;
-    border-bottom: 1px solid var(--color-elements);
-    color: var(--color-secondary);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 21px;
-    text-align: center;
-  }
+   &__items-count {
+      padding-bottom: 24px;
+      margin-bottom: 24px;
+      border-bottom: 1px solid var(--color-elements);
+      color: var(--color-secondary);
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 21px;
+      text-align: center;
+   }
 
   &__checkout {
     display: flex;