More changes

components/product/ProductCard/ProductCard.module.css

@@ -1,14 +1,10 @@
 .root {
   @apply relative max-h-full w-full box-border overflow-hidden
   bg-no-repeat bg-center bg-cover transition-transform
-  ease-linear cursor-pointer;
+  ease-linear cursor-pointer inline-block;
   height: 100% !important;
 
   &:hover {
-    & .squareBg:before {
-      transform: scale(0.98);
-    }
-
     & .productImage {
       transform: scale(1.2625);
     }
@@ -43,47 +39,18 @@
       @apply bg-cyan text-white;
     }
   }
-
-  &:nth-child(6n + 1) .squareBg {
-    @apply bg-violet;
 }
 
-  &:nth-child(6n + 5) .squareBg {
-    @apply bg-blue;
+.wishlistButton {
+  @apply top-3 right-3 z-50 absolute bg-accent-9 text-accent-0;
 }
 
-  &:nth-child(6n + 3) .squareBg {
-    @apply bg-pink;
-  }
-
-  &:nth-child(6n + 6) .squareBg {
-    @apply bg-cyan;
-  }
-}
-
-.squareBg,
 .productTitle > span,
 .productPrice {
   @apply transition-colors ease-in-out duration-500;
 }
 
-.squareBg {
-  @apply transition-colors absolute inset-0 z-0;
-  background-color: #212529;
-}
-
-.squareBg:before {
-  @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
-  background-image: url('/bg-products.svg');
-  content: '';
-}
-
 .simple {
-  & .squareBg {
-    @apply bg-accent-0 !important;
-    background-image: url('/bg-products.svg');
-  }
-
   & .productTitle {
     @apply pt-2;
     font-size: 1rem;
@@ -117,10 +84,6 @@
   letter-spacing: 0.4px;
 }
 
-.wishlistButton {
-  @apply top-0 right-0 z-50 absolute;
-}
-
 .imageContainer {
   @apply flex items-center justify-center;
   overflow: hidden;

components/product/ProductCard/ProductCard.tsx

@@ -49,7 +49,13 @@ const ProductCard: FC<Props> = ({
         </div>
       ) : (
         <>
-          <div className={s.squareBg} />
+          {process.env.COMMERCE_WISHLIST_ENABLED && (
+            <WishlistButton
+              className={s.wishlistButton}
+              productId={product.id}
+              variant={product.variants[0] as any}
+            />
+          )}
           <div className="flex flex-row justify-between box-border w-full z-20 absolute ">
             {!noNameTag && (
               <div className="absolute top-0 left-0 pr-16 max-w-full">
@@ -63,13 +69,6 @@ const ProductCard: FC<Props> = ({
                 </span>
               </div>
             )}
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0] as any}
-              />
-            )}
           </div>
           <div className={s.imageContainer}>
             {product?.images && (

components/product/ProductSlider/ProductSlider.module.css

@@ -113,3 +113,19 @@
 .positionIndicatorActive:hover .dot {
   @apply bg-white;
 }
+
+.album {
+  @apply bg-violet-dark;
+  overflow: auto;
+  white-space: nowrap;
+}
+
+.album > * {
+  @apply cursor-pointer;
+  display: inline-block;
+  width: 300px;
+}
+
+.album > div:hover {
+  @apply bg-violet-light;
+}

components/product/ProductSlider/ProductSlider.tsx

@@ -62,28 +62,27 @@ const ProductSlider: FC = ({ children }) => {
 
   return (
     <div className={s.root} ref={sliderContainerRef}>
+      <div
+        ref={ref}
+        className="relative keen-slider h-full transition-opacity duration-150"
+        style={{ opacity: isMounted ? 1 : 0 }}
+      >
         <div className={s.control}>
           <button
-          className={cn(s.leftControl)}
             onClick={slider?.prev}
+            className={cn(s.leftControl)}
             aria-label="Previous Product Image"
           >
             <ChevronLeft />
           </button>
           <button
-          className={cn(s.rightControl)}
             onClick={slider?.next}
+            className={cn(s.rightControl)}
             aria-label="Next Product Image"
           >
             <ChevronRight />
           </button>
         </div>
-
-      <div
-        ref={ref}
-        className="keen-slider h-full transition-opacity duration-150"
-        style={{ opacity: isMounted ? 1 : 0 }}
-      >
         {Children.map(children, (child) => {
           // Add the keen-slider__slide className to children
           if (isValidElement(child)) {
@@ -99,7 +98,6 @@ const ProductSlider: FC = ({ children }) => {
           }
           return child
         })}
-      </div>
         {slider && (
           <div className={cn(s.positionIndicatorsContainer)}>
             {[...Array(slider.details().size).keys()].map((idx) => {
@@ -121,6 +119,9 @@ const ProductSlider: FC = ({ children }) => {
           </div>
         )}
       </div>
+
+      <div className={s.album}>{Children.map(children, (child) => child)}</div>
+    </div>
   )
 }
 

components/product/ProductView/ProductView.module.css

@@ -19,10 +19,6 @@
   }
 }
 
-.squareBg {
-  @apply absolute inset-0 bg-violet z-0 h-full;
-}
-
 .nameBox {
   @apply absolute top-0 left-0 z-20 pr-16;
 
@@ -32,7 +28,7 @@
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
-    font-size: 2rem;
+    font-size: 1.8rem;
     letter-spacing: 0.4px;
   }
 

tailwind.config.js

@@ -39,6 +39,7 @@ module.exports = {
         'accent-9': 'var(--accent-9)',
         violet: 'var(--violet)',
         'violet-light': 'var(--violet-light)',
+        'violet-dark': 'var(--violet-dark)',
         pink: 'var(--pink)',
         'pink-light': 'var(--pink-light)',
         cyan: 'var(--cyan)',