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;
-  }
-
-  &:nth-child(6n + 3) .squareBg {
-    @apply bg-pink;
-  }
-
-  &:nth-child(6n + 6) .squareBg {
-    @apply bg-cyan;
-  }
 }
 
-.squareBg,
+.wishlistButton {
+  @apply top-3 right-3 z-50 absolute bg-accent-9 text-accent-0;
+}
+
 .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 className={s.control}>
-        <button
-          className={cn(s.leftControl)}
-          onClick={slider?.prev}
-          aria-label="Previous Product Image"
-        >
-          <ChevronLeft />
-        </button>
-        <button
-          className={cn(s.rightControl)}
-          onClick={slider?.next}
-          aria-label="Next Product Image"
-        >
-          <ChevronRight />
-        </button>
-      </div>
-
       <div
         ref={ref}
-        className="keen-slider h-full transition-opacity duration-150"
+        className="relative keen-slider h-full transition-opacity duration-150"
         style={{ opacity: isMounted ? 1 : 0 }}
       >
+        <div className={s.control}>
+          <button
+            onClick={slider?.prev}
+            className={cn(s.leftControl)}
+            aria-label="Previous Product Image"
+          >
+            <ChevronLeft />
+          </button>
+          <button
+            onClick={slider?.next}
+            className={cn(s.rightControl)}
+            aria-label="Next Product Image"
+          >
+            <ChevronRight />
+          </button>
+        </div>
         {Children.map(children, (child) => {
           // Add the keen-slider__slide className to children
           if (isValidElement(child)) {
@@ -99,27 +98,29 @@ const ProductSlider: FC = ({ children }) => {
           }
           return child
         })}
+        {slider && (
+          <div className={cn(s.positionIndicatorsContainer)}>
+            {[...Array(slider.details().size).keys()].map((idx) => {
+              return (
+                <button
+                  aria-label="Position indicator"
+                  key={idx}
+                  className={cn(s.positionIndicator, {
+                    [s.positionIndicatorActive]: currentSlide === idx,
+                  })}
+                  onClick={() => {
+                    slider.moveToSlideRelative(idx)
+                  }}
+                >
+                  <div className={s.dot} />
+                </button>
+              )
+            })}
+          </div>
+        )}
       </div>
-      {slider && (
+
-        <div className={cn(s.positionIndicatorsContainer)}>
+      <div className={s.album}>{Children.map(children, (child) => child)}</div>
-          {[...Array(slider.details().size).keys()].map((idx) => {
-            return (
-              <button
-                aria-label="Position indicator"
-                key={idx}
-                className={cn(s.positionIndicator, {
-                  [s.positionIndicatorActive]: currentSlide === idx,
-                })}
-                onClick={() => {
-                  slider.moveToSlideRelative(idx)
-                }}
-              >
-                <div className={s.dot} />
-              </button>
-            )
-          })}
-        </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)',