From 813b1a86fd1d36346c878fed40b7a513bbde613f Mon Sep 17 00:00:00 2001
From: Bel Curcio <curciobel@gmail.com>
Date: Sat, 5 Jun 2021 14:11:43 -0300
Subject: [PATCH] Styling updates

---
 .../ProductCard/ProductCard.module.css        |  4 ++++
 .../product/ProductCard/ProductCard.tsx       |  4 +---
 components/ui/Marquee/Marquee.tsx             | 19 +++++++++++++++++--
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 49518143a..cad429c70 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -100,3 +100,7 @@
 .slim {
   @apply bg-transparent relative overflow-hidden box-border;
 }
+
+.slim .tag {
+  @apply bg-secondary text-secondary inline-block p-3 font-bold text-xl break-words;
+}
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index e3868798b..14d2e0030 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -35,9 +35,7 @@ const ProductCard: FC<Props> = ({
       {variant === 'slim' && (
         <>
           <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-            <span className="bg-accent-0 text-accent-9 inline-block p-3 font-bold text-xl break-words">
-              {product.name}
-            </span>
+            <span className={s.tag}>{product.name}</span>
           </div>
           {product?.images && (
             <Image
diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx
index 168a72e7d..a45f831aa 100644
--- a/components/ui/Marquee/Marquee.tsx
+++ b/components/ui/Marquee/Marquee.tsx
@@ -1,6 +1,6 @@
 import cn from 'classnames'
 import s from './Marquee.module.css'
-import { FC, ReactNode, Component } from 'react'
+import { FC, ReactNode, Component, Children, isValidElement } from 'react'
 import Ticker from 'react-ticker'
 
 interface MarqueeProps {
@@ -26,7 +26,22 @@ const Marquee: FC<MarqueeProps> = ({
   return (
     <div className={rootClassName}>
       <Ticker offset={80}>
-        {() => <div className={s.container}>{children}</div>}
+        {() => (
+          <div className={s.container}>
+            {Children.map(children, (child) => {
+              if (isValidElement(child)) {
+                return {
+                  ...child,
+                  props: {
+                    ...child.props,
+                    className: cn(child.props.className, `${variant}`),
+                  },
+                }
+              }
+              return child
+            })}
+          </div>
+        )}
       </Ticker>
     </div>
   )