From c1535cb8a6d4fe4c98e00fa8d6ff69dabe772a1d Mon Sep 17 00:00:00 2001
From: Bel Curcio <curciobel@gmail.com>
Date: Tue, 1 Jun 2021 17:40:39 -0300
Subject: [PATCH] Sidebar Styling issues with Mobile

---
 .../cart/CartSidebarView/CartSidebarView.tsx  |  4 +-
 .../CheckoutSidebarView.tsx                   |  2 +-
 .../PaymentMethodView/PaymentMethodView.tsx   |  2 +-
 .../checkout/ShippingView/ShippingView.tsx    |  2 +-
 .../ProductSlider/ProductSlider.module.css    | 48 +++++++++++++++----
 .../product/ProductSlider/ProductSlider.tsx   |  3 +-
 .../ProductView/ProductView.module.css        | 16 +++----
 .../product/ProductView/ProductView.tsx       |  1 -
 components/ui/Sidebar/Sidebar.module.css      |  5 ++
 components/ui/Sidebar/Sidebar.tsx             |  4 +-
 10 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index f37183bf8..d9a6dd6fb 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -38,13 +38,13 @@ const CartSidebarView: FC = () => {
         [s.empty]: error || success || isLoading || isEmpty,
       })}
     >
-      <header className="px-4 pt-6 pb-4 sm:px-6">
+      <header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button
               onClick={handleClose}
               aria-label="Close panel"
-              className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
+              className="hover:text-accent-3 transition ease-in-out duration-150 flex items-center focus:outline-none"
             >
               <Cross className="h-6 w-6" />
               <span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
index bff5e347d..c78a4174f 100644
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
+++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
@@ -45,7 +45,7 @@ const CheckoutSidebarView: FC = () => {
         [s.empty]: error || success || isLoading || isEmpty,
       })}
     >
-      <header className="px-4 pt-6 pb-4 sm:px-6">
+      <header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
index 28c1d0ff7..909108802 100644
--- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx
+++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
@@ -11,7 +11,7 @@ const PaymentMethodView: FC = () => {
 
   return (
     <div className={s.root}>
-      <header className="px-4 pt-6 pb-4 sm:px-6">
+      <header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button
diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx
index ccc27112a..95644f570 100644
--- a/components/checkout/ShippingView/ShippingView.tsx
+++ b/components/checkout/ShippingView/ShippingView.tsx
@@ -11,7 +11,7 @@ const PaymentMethodView: FC = () => {
 
   return (
     <div className={s.root}>
-      <header className="px-4 pt-6 pb-4 sm:px-6">
+      <header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button
diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
index 699a809df..70cf0a0fa 100644
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ b/components/product/ProductSlider/ProductSlider.module.css
@@ -3,6 +3,15 @@
   overflow-y: hidden;
 }
 
+.slider {
+  @apply relative h-full transition-opacity duration-150;
+  opacity: 0;
+}
+
+.slider.show {
+  opacity: 1;
+}
+
 .control {
   @apply bg-violet absolute bottom-10 right-10 flex flex-row
   border-accent-0 border text-accent-0 z-30 shadow-xl;
@@ -36,23 +45,46 @@
 .thumb {
   @apply transition-transform transition-colors ease-linear duration-75 overflow-hidden
   inline-block cursor-pointer;
-  width: 275px;
+  width: 125px;
 }
 
-.thumb:focus,
 .thumb.selected {
   @apply bg-white;
 }
 
-.thumb:hover {
-  transform: scale(1.02);
-  background-color: rgba(255, 255, 255, 0.08);
-}
-
 .album {
   @apply bg-violet-dark;
   overflow-y: hidden;
   overflow-x: auto;
   white-space: nowrap;
-  height: 275px;
+  height: 125px;
+}
+
+@screen md {
+  .thumb:hover {
+    transform: scale(1.02);
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .thumb.selected {
+    @apply bg-white;
+  }
+
+  .album {
+    height: 235px;
+  }
+
+  .slider {
+    max-height: 700px;
+  }
+
+  .thumb {
+    width: 235px;
+  }
+}
+
+@screen lg {
+  .slider {
+    max-height: 750px;
+  }
 }
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index 8cac7fb79..b8a405d41 100644
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -77,8 +77,7 @@ const ProductSlider: FC = ({ children }) => {
     <div className={s.root} ref={sliderContainerRef}>
       <div
         ref={ref}
-        className="relative keen-slider h-full transition-opacity duration-150"
-        style={{ opacity: isMounted ? 1 : 0 }}
+        className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
       >
         {slider && (
           <div className={s.control}>
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index e9068a932..d21e49930 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -4,7 +4,7 @@
 
 .main {
   @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
-  min-height: 600px;
+  min-height: 500px;
 }
 
 .nameBox {
@@ -22,13 +22,17 @@
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
 }
 
 .sliderContainer {
   @apply flex items-center justify-center overflow-x-hidden bg-violet;
 }
 
+.imageContainer {
+  @apply text-center;
+}
+
 .imageContainer > div,
 .imageContainer > div > div {
   @apply h-full;
@@ -39,7 +43,7 @@
 }
 
 .button {
-  min-width: 300px;
+  width: 100%;
 }
 
 .wishlistButton {
@@ -47,13 +51,7 @@
 }
 
 @screen md {
-  .main {
-    min-height: 700px;
-  }
-
   .button {
-    text-align: center;
-    width: 100%;
     max-width: 300px;
   }
 }
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index f7f0d9d69..a24d2cfe5 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -185,7 +185,6 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
             >
               <ProductCard
                 key={p.path}
-                className={s.relatedProduct}
                 variant="simple"
                 className="animated fadeIn"
                 product={p}
diff --git a/components/ui/Sidebar/Sidebar.module.css b/components/ui/Sidebar/Sidebar.module.css
index b9ba054e2..93b1d2e3c 100644
--- a/components/ui/Sidebar/Sidebar.module.css
+++ b/components/ui/Sidebar/Sidebar.module.css
@@ -1,3 +1,8 @@
 .root {
   @apply fixed inset-0 overflow-hidden h-full z-50;
 }
+
+.sidebar {
+  @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto;
+  min-width: 335px;
+}
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 15cbc1295..f14532e96 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -43,9 +43,7 @@ const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
             />
             <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
               <div className="h-full md:w-screen md:max-w-md">
-                <div className="h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto">
-                  {children}
-                </div>
+                <div className={s.sidebar}>{children}</div>
               </div>
             </section>
           </div>