Add random background color to product page

site/components/product/ProductSlider/ProductSlider.module.css

@@ -29,7 +29,6 @@
 .album {
   width: 100%;
   height: 100%;
-  @apply bg-violet-dark;
   box-sizing: content-box;
   overflow-y: hidden;
   overflow-x: auto;

site/components/product/ProductSlider/ProductSlider.tsx

@@ -10,15 +10,20 @@ import cn from 'clsx'
 import { a } from '@react-spring/web'
 import s from './ProductSlider.module.css'
 import ProductSliderControl from '../ProductSliderControl'
+import random from 'lodash.random'
 
 interface ProductSliderProps {
   children?: React.ReactNode[]
-  className?: string
+  className?: string,
+  lighterColor: string,
+  darkerColor: string
 }
 
 const ProductSlider: React.FC<ProductSliderProps> = ({
   children,
   className = '',
+  lighterColor,
+  darkerColor
 }) => {
   const [currentSlide, setCurrentSlide] = useState(0)
   const [isMounted, setIsMounted] = useState(false)
@@ -81,9 +86,10 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
     <div className={cn(s.root, className)} ref={sliderContainerRef}>
       <div
         ref={ref}
+        style={{backgroundColor: lighterColor}}
         className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
       >
-        {slider && <ProductSliderControl onPrev={onPrev} onNext={onNext} />}
+        {slider && <ProductSliderControl lighterColor={lighterColor} darkerColor={darkerColor} onPrev={onPrev} onNext={onNext} />}
         {Children.map(children, (child) => {
           // Add the keen-slider__slide className to children
           if (isValidElement(child)) {
@@ -101,7 +107,7 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
         })}
       </div>
 
-      <a.div className={s.album} ref={thumbsContainerRef}>
+      <a.div style={{backgroundColor: darkerColor}} className={s.album} ref={thumbsContainerRef}>
         {slider &&
           Children.map(children, (child, idx) => {
             if (isValidElement(child)) {

site/components/product/ProductSliderControl/ProductSliderControl.module.css

@@ -10,11 +10,6 @@
   transition: background-color 0.2s ease;
 }
 
-.leftControl:hover,
-.rightControl:hover {
-  background-color: var(--violet-dark);
-}
-
 .leftControl:focus,
 .rightControl:focus {
   @apply outline-none;

site/components/product/ProductSliderControl/ProductSliderControl.tsx

@@ -6,25 +6,44 @@ import { ArrowLeft, ArrowRight } from '@components/icons'
 interface ProductSliderControl {
   onPrev: MouseEventHandler<HTMLButtonElement>
   onNext: MouseEventHandler<HTMLButtonElement>
+  lighterColor: string
+  darkerColor: string
 }
 
-const ProductSliderControl: FC<ProductSliderControl> = ({ onPrev, onNext }) => (
+const ProductSliderControl: FC<ProductSliderControl> = ({ onPrev, onNext, lighterColor, darkerColor }) => (
-  <div className={s.control}>
+  <>
-    <button
+    <style jsx>
-      className={cn(s.leftControl)}
+      {`
-      onClick={onPrev}
+        #leftButtonSlider:hover,
-      aria-label="Previous Product Image"
+        #rightButtonSlider:hover {
-    >
+          background-color: ${lighterColor} !important;
-      <ArrowLeft />
+        }
-    </button>
+
-    <button
+        #leftButtonSlider,
-      className={cn(s.rightControl)}
+        #rightButtonSlider {
-      onClick={onNext}
+          background-color: ${darkerColor} !important;
-      aria-label="Next Product Image"
+        }      
-    >
+      `}
-      <ArrowRight />
+    </style>
-    </button>
+    <div className={s.control}>
-  </div>
+      <button
+        className={cn(s.leftControl)}
+        id="leftButtonSlider"
+        onClick={onPrev}
+        aria-label="Previous Product Image"
+      >
+        <ArrowLeft />
+      </button>
+      <button
+        className={cn(s.rightControl)}
+        id="rightButtonSlider"
+        onClick={onNext}
+        aria-label="Next Product Image"
+      >
+        <ArrowRight />
+      </button>
+    </div>
+  </>
 )
 
 export default memo(ProductSliderControl)

site/components/product/ProductView/ProductView.tsx

@@ -14,6 +14,7 @@ import ProductModel from '../ProductModel/ProductModel'
 import Lightbox from 'yet-another-react-lightbox'
 import 'yet-another-react-lightbox/styles.css'
 import { useRouter } from 'next/router'
+import random from 'lodash.random'
 
 interface ProductViewProps {
   product: Product
@@ -40,6 +41,10 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
   const [isLightboxOpen, setLightboxOpen] = useState(false)
   const { locale = 'it' } = useRouter()
 
+  const colors = [random(255), random(255), random(255)]
+  const darkerColor = "rgba(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ", 1)"
+  const lighterColor = "rgba(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ", 0.8)"
+
   return (
     <>
       <Container className="max-w-none w-full" clean>
@@ -51,7 +56,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
               fontSize={28}
             />
             <div className={s.sliderContainer}>
-              <ProductSlider key={product.id}>
+              <ProductSlider darkerColor={darkerColor} lighterColor={lighterColor} key={product.id}>
                 {product.images.map((image, i) => (
                   <div key={image.url} className={s.imageContainer}>
                     <Image