From 05cede84173c5baf73eb8f921653cbc562e58613 Mon Sep 17 00:00:00 2001
From: Yuliya Kursevich <54816946+YulikK@users.noreply.github.com>
Date: Wed, 12 Jun 2024 11:09:18 +0200
Subject: [PATCH] feat(RSS-ECOMM-5_94): cart styles (#362)

* feat: cart styles

* feat: resize cart

* feat: style total
---
 .../Coupon/view/couponView.module.scss        |  4 ++
 .../Summary/view/summaryView.module.scss      |  4 ++
 src/pages/CartPage/view/CartPageView.ts       |  9 ++--
 .../CartPage/view/cartPageView.module.scss    | 43 ++++++++++++++++---
 .../ProductOrder/view/ProductOrderView.ts     |  7 +++
 .../view/productOrderView.module.scss         |  4 +-
 6 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/src/entities/Coupon/view/couponView.module.scss b/src/entities/Coupon/view/couponView.module.scss
index 6c587c7c..2dfe2d18 100644
--- a/src/entities/Coupon/view/couponView.module.scss
+++ b/src/entities/Coupon/view/couponView.module.scss
@@ -34,4 +34,8 @@
   font: var(--regular-font);
   color: var(--noble-gray-800);
   transition: all 0.2s;
+
+  @media (max-width: 768px) {
+    color: var(--noble-gray-1100);
+  }
 }
diff --git a/src/entities/Summary/view/summaryView.module.scss b/src/entities/Summary/view/summaryView.module.scss
index c161e29d..91daba57 100644
--- a/src/entities/Summary/view/summaryView.module.scss
+++ b/src/entities/Summary/view/summaryView.module.scss
@@ -26,6 +26,10 @@
   font: var(--regular-font);
   color: var(--noble-gray-800);
   transition: all 0.2s;
+
+  @media (max-width: 768px) {
+    color: var(--noble-gray-1100);
+  }
 }
 
 .couponsWrap:not(:empty)::after {
diff --git a/src/pages/CartPage/view/CartPageView.ts b/src/pages/CartPage/view/CartPageView.ts
index 596332e3..3af70fa8 100644
--- a/src/pages/CartPage/view/CartPageView.ts
+++ b/src/pages/CartPage/view/CartPageView.ts
@@ -128,6 +128,7 @@ class CartPageView {
   }
 
   private addTableHeader(): void {
+    const productsWrap = createBaseElement({ cssClasses: [styles.productsWrap], tag: 'div' });
     this.table = createBaseElement({ cssClasses: [styles.table], tag: 'table' });
     const thead = createBaseElement({ cssClasses: [styles.thead, styles.head], tag: 'thead' });
     const tr = createBaseElement({ cssClasses: [styles.tr, styles.head], tag: 'tr' });
@@ -161,10 +162,12 @@ class CartPageView {
     this.table.append(thead, this.tableBody);
     thead.append(tr);
     tr.append(thImage, thProduct, thPrice, thQuantity, thTotal, thDelete);
-    this.productWrap.append(this.table);
+    productsWrap.append(this.table);
+    this.productWrap.append(productsWrap);
   }
 
   private addTotalInfo(): void {
+    const totalBlockWrap = createBaseElement({ cssClasses: [styles.totalsWrap], tag: 'div' });
     const title = createBaseElement({
       cssClasses: [styles.totalTitle, styles.border, styles.mobileHide],
       innerContent: TITLE.CART_TOTAL[this.language],
@@ -189,19 +192,19 @@ class CartPageView {
     this.textElement.push({ element: finalButton, textItem: TITLE.BUTTON_CHECKOUT });
     const continueLink = this.createCatalogLinkHTML();
     continueLink.getHTML().classList.add(styles.mobileHide);
-    this.totalWrap.append(
+    totalBlockWrap.append(
       title,
       couponTitle,
       couponWrap,
       this.productCouponSummary.getHTML(),
       subtotalWrap,
-
       this.cartCouponSummary.getHTML(),
       discountWrap,
       totalWrap,
       finalButton,
       continueLink.getHTML(),
     );
+    this.totalWrap.append(totalBlockWrap);
   }
 
   private createCatalogLinkHTML(): LinkModel {
diff --git a/src/pages/CartPage/view/cartPageView.module.scss b/src/pages/CartPage/view/cartPageView.module.scss
index 2b799a64..778787f3 100644
--- a/src/pages/CartPage/view/cartPageView.module.scss
+++ b/src/pages/CartPage/view/cartPageView.module.scss
@@ -3,8 +3,6 @@
 .cartPage {
   display: flex;
   flex-grow: 1;
-  overflow: hidden;
-  padding: 0 var(--small-offset);
   animation: show 0.2s ease-out forwards;
   gap: 2%;
 
@@ -33,7 +31,10 @@
 }
 
 .total {
+  position: sticky;
+  top: calc(var(--extra-small-offset) * 3.5);
   flex-shrink: 1;
+  height: max-content;
 
   @media (max-width: 768px) {
     position: sticky;
@@ -41,11 +42,9 @@
     bottom: 0;
     z-index: 100;
     margin-bottom: var(--tiny-offset);
-    border-radius: var(--large-br);
     padding: var(--small-offset);
-    width: 100%;
     box-shadow: var(--mellow-shadow-700);
-    background-color: var(--white-tr);
+    background-color: var(--noble-gray-1000);
     backdrop-filter: blur(10px);
   }
 }
@@ -55,7 +54,14 @@
 }
 
 .thead {
+  position: sticky;
+  top: calc(var(--extra-small-offset) * 3.5);
   width: 100%;
+  background: var(--noble-white-100);
+
+  @media (max-width: 768px) {
+    position: static;
+  }
 }
 
 .mainText {
@@ -101,6 +107,10 @@
   padding: var(--tiny-offset) 0;
   font: var(--bold-font);
   color: var(--noble-gray-800);
+
+  @media (max-width: 768px) {
+    color: var(--noble-gray-1100);
+  }
 }
 
 .border {
@@ -112,6 +122,10 @@
   font: var(--regular-font);
   color: var(--noble-gray-800);
   transition: all 0.2s;
+
+  @media (max-width: 768px) {
+    color: var(--noble-gray-1100);
+  }
 }
 
 .totalWrap {
@@ -264,3 +278,22 @@ $color: var(--steam-green-800);
   display: flex;
   align-items: center;
 }
+
+.productsWrap {
+  padding-left: var(--small-offset);
+
+  @media (max-width: 768px) {
+    overflow: hidden;
+    padding: 0 var(--small-offset);
+  }
+}
+
+.totalsWrap {
+  display: flex;
+  flex-direction: column;
+  padding-right: var(--small-offset);
+
+  @media (max-width: 768px) {
+    padding: 0;
+  }
+}
diff --git a/src/widgets/ProductOrder/view/ProductOrderView.ts b/src/widgets/ProductOrder/view/ProductOrderView.ts
index 10081c36..35042631 100644
--- a/src/widgets/ProductOrder/view/ProductOrderView.ts
+++ b/src/widgets/ProductOrder/view/ProductOrderView.ts
@@ -112,6 +112,13 @@ class ProductOrderView {
         deleteCell.classList.add(styles.hide);
       }
     });
+    window.addEventListener('resize', () => {
+      if (window.innerWidth > TABLET_WIDTH) {
+        this.view.classList.remove(styles.swipeRow);
+        deleteCell.classList.remove(styles.swipeDelete);
+        deleteCell.classList.add(styles.hide);
+      }
+    });
     return this.view;
   }
 
diff --git a/src/widgets/ProductOrder/view/productOrderView.module.scss b/src/widgets/ProductOrder/view/productOrderView.module.scss
index 9b43f75d..33029a3e 100644
--- a/src/widgets/ProductOrder/view/productOrderView.module.scss
+++ b/src/widgets/ProductOrder/view/productOrderView.module.scss
@@ -18,11 +18,11 @@
 }
 
 .swipeRow {
-  transform: translateX(calc(var(--extra-large-offset) * -1));
+  transform: translateX(-25%);
 }
 
 .swipeDelete {
-  transform: translateX(calc(var(--extra-large-offset) * 1.5));
+  transform: translateX(85%);
 }
 
 .deleteCell {