Fix style

4 files changed, 6 insertions, 5 deletions

diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index af96de28..3b0ef162 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -30,7 +30,7 @@ export default function ProductCard({ data }) {
         <div className="mt-2">
           {product.lowest_price.discount_percentage > 0 ? (
             <div className="flex gap-x-1 items-center">
-              <span className="badge-yellow">{product.lowest_price.discount_percentage}%</span>
+              <span className="badge-red">{product.lowest_price.discount_percentage}%</span>
               <p className="text-xs text-gray-800 line-through">{currencyFormat(product.lowest_price.price)}</p>
             </div>
           ) : ''}
diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index f39839af..07ad1f43 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -31,7 +31,7 @@ export default function Brands({ initialManufactures }) {
           dataLength={manufactures.length}
           next={getMoreManufactures}
           hasMore={hasMoreManufacture}
-          className="grid grid-cols-3 gap-4 mt-4 !overflow-x-hidden"
+          className="grid grid-cols-3 gap-4 mt-4 !overflow-x-hidden bg-white"
           loader={
             <div className="flex justify-center items-center border border-gray-300 p-1 rounded h-14">
               <Spinner className="w-6 h-6 text-gray-600 fill-gray-900"/>
@@ -40,7 +40,7 @@ export default function Brands({ initialManufactures }) {
         >
           {manufactures?.map((manufacture, index) => (
             manufacture.name ? (
-              <Link href={`/shop/brands/${createSlug(manufacture.name, manufacture.id)}`} className="flex justify-center items-center border border-gray-300 p-1 rounded h-14 text-gray-800 text-sm text-center" key={index}>
+              <Link href={`/shop/brands/${createSlug(manufacture.name, manufacture.id)}`} className="flex justify-center items-center border border-gray-300 p-1 rounded h-16 text-gray-800 text-sm text-center" key={index}>
                 {manufacture.logo ? (
                   <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name || ''} className="w-full max-h-full object-contain object-center" />
                 ) : manufacture.name}
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index bcbebbdf..a42e6cb9 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -82,7 +82,7 @@ export default function ProductDetail({product}) {
       <Header title={`${product.name} - Indoteknik`}/>
       <main>
 
-        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray-300 w-full h-[300px] object-contain object-center" />
+        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray-300 w-full h-[300px] object-contain object-center bg-white" />
         <div className="p-4 pb-10">
           <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
             {product.manufacture.name ?? '-'}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 5d741ab4..8981f0c7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -9,7 +9,7 @@ html, body {
         w-screen
         text-base
         text-gray-900
-        bg-gray-100
+        bg-gray-50
     ;
 }
 
@@ -148,6 +148,7 @@ html, body {
             p-2
             pb-3
             flex-1
+            bg-white
         ;
     }