Adding gradient on the clientside

components/common/Avatar/Avatar.tsx

@@ -1,5 +1,12 @@
 import cn from 'classnames'
-import { FC, useState } from 'react'
+import {
+  FC,
+  useState,
+  useMemo,
+  useRef,
+  useEffect,
+  HTMLInputElement,
+} from 'react'
 import { getRandomPairOfColors } from '@lib/colors'
 
 interface Props {
@@ -8,14 +15,19 @@ interface Props {
 }
 
 const Avatar: FC<Props> = ({}) => {
-  const [bg] = useState(getRandomPairOfColors)
+  const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
+  const ref = useRef(null) as React.MutableRefObject<HTMLInputElement>
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
+    }
+  }, [bg])
 
   return (
     <div
+      ref={ref}
       className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
-      style={{
-        backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
-      }}
     >
       {/* Add an image - We're generating a gradient as placeholder  <img></img> */}
     </div>

components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import { getCategoryPath, getDesignerPath } from '@lib/search'
 import { Grid } from '@components/ui'
 import { ProductCard } from '@components/product'
 import s from './HomeAllProductsGrid.module.css'
+import { getCategoryPath, getDesignerPath } from '@lib/search'
 
 interface Props {
   categories?: any

components/icons/Cross.tsx

@@ -5,11 +5,11 @@ const Cross = ({ ...props }) => {
       width="24"
       height="24"
       stroke="currentColor"
-      stroke-width="1.5"
+      strokeWidth="1.5"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
       fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
       {...props}
     >
       <path d="M18 6L6 18" />

components/icons/Info.tsx

@@ -5,11 +5,11 @@ const Info = ({ ...props }) => {
       width="24"
       height="24"
       stroke="currentColor"
-      stroke-width="1.5"
+      strokeWidth="1.5"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
       fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
       {...props}
     >
       <circle cx="12" cy="12" r="10" fill="transparent" />

components/product/ProductCard/ProductCard.module.css

@@ -78,13 +78,13 @@
 .squareBg:before {
   @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
   content: '';
-  background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .simple {
   & .squareBg {
     @apply bg-accents-0 !important;
-    background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.05' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.05' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='black' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='black' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='black' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3Cline opacity='0.05' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='black' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3C/svg%3E%0A");
   }
 
   & .productTitle {

pages/index.tsx

@@ -83,6 +83,7 @@ export default function Home({
   categories,
   newestProducts,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
+  console.log('x')
   return (
     <div>
       <Grid>