From 7d6afa821f02c3933a175a537b7bd0f47ff72f00 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Wed, 14 Dec 2022 09:43:44 +0700
Subject: no message

---
 src/components/ProductCard.js    |  6 ++---
 src/pages/shop/product/[slug].js |  4 ++--
 src/styles/globals.css           | 48 ++++++++++++++++++++--------------------
 3 files changed, 29 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 64624d70..604ee9e0 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -16,7 +16,7 @@ export default function ProductCard({ data }) {
           <div className="absolute bottom-2 left-2 badge-gray">{product.variant_total} Varian</div>
         ) : ''}
       </Link>
-      <div className="product-card__description">
+      <div className="product-card__content">
         <div>
           {typeof product.manufacture.name !== "undefined" ? (
             <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</Link>
@@ -30,12 +30,12 @@ export default function ProductCard({ data }) {
         <div className="mt-2">
           {product.lowest_price.discount_percentage > 0 ? (
             <div className="flex gap-x-1 items-center mb-1">
+              <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
               <span className="badge-red">{product.lowest_price.discount_percentage}%</span>
-              <p className="text-xs text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
             </div>
           ) : ''}
           {product.lowest_price.price_discount > 0 ? (
-            <p className="text-caption text-gray_r-12 font-bold">
+            <p className="text-caption-1 text-gray_r-12 font-bold">
               {currencyFormat(product.lowest_price.price_discount)}
             </p>
           ) : (
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index c0119c8f..8402036c 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -90,13 +90,13 @@ export default function ProductDetail({ product }) {
           <h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
 
           {product.variant_total > 1 && !selectedVariant ? (
-            <p className="text-xs text-gray-800 mb-1">Harga mulai dari:</p>
+            <p className="text-caption-2 text-gray-800 mb-1">Harga mulai dari:</p>
           ) : ''}
 
           {product.lowest_price.discount_percentage > 0 ? (
             <div className="flex gap-x-1 items-center mb-1">
+              <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(activeVariant.price.price)}</p>
               <span className="badge-red">{activeVariant.price.discount_percentage}%</span>
-              <p className="text-xs text-gray_r-11 line-through">{currencyFormat(activeVariant.price.price)}</p>
             </div>
           ) : ''} 
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c512dd9c..95a7a898 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -7,7 +7,7 @@
 html, body {
     @apply 
         w-screen
-        text-body
+        text-body-1
         text-gray_r-12
         bg-gray_r-1
     ;
@@ -16,15 +16,16 @@ html, body {
 @layer base {
     h1, .h1 {
         @apply
-            text-h6
+            text-h-lg
             font-semibold
         ;
     }
 
     h2, .h2 {
         @apply
-            text-body
+            text-h-md
             font-semibold
+            leading-6
         ;
     }
 
@@ -42,7 +43,7 @@ html, body {
     .badge-yellow,
     .badge-green {
         @apply
-            text-xs
+            text-caption-2
             leading-none
             font-medium
             px-1
@@ -75,8 +76,8 @@ html, body {
 
     .badge-green {
         @apply
-            bg-green-100 
-            text-green-800
+            bg-green_r-6
+            text-green_r-11
         ;
     }
 
@@ -92,7 +93,7 @@ html, body {
             p-3
             rounded
             border
-            text-gray_r-11
+            text-gray_r-12
             border-gray_r-7
             bg-transparent
             w-full
@@ -126,11 +127,10 @@ html, body {
             block
             w-fit
             p-3
-            bg-gray-100
-            border-gray-300
+            bg-gray_r-3
+            border-gray_r-6
             rounded
             border
-            text-gray-900
             text-center
         ;
     }
@@ -156,11 +156,11 @@ html, body {
             object-contain
             object-center
             border-b
-            border-gray-300
+            border-gray_r-6
         ;
     }
 
-    .product-card__description {
+    .product-card__content {
         @apply
             p-2
             pb-3
@@ -171,15 +171,17 @@ html, body {
 
     .product-card__title {
         @apply
-            text-caption-p
+            text-caption-1
             text-gray_r-12
+            leading-5
         ;
     }
 
     .product-card__brand {
         @apply 
-            text-caption-p
+            text-caption-1
             mb-1
+            block
         ;
     }
 }
@@ -323,19 +325,17 @@ html, body {
         ease-linear 
         duration-150 
         border
-        border-gray-300
-        bg-gray-100 
-        hover:bg-gray-300 
-        text-gray-800
+        border-gray_r-6
+        bg-gray_r-3
+        hover:bg-gray_r-5 
+        text-gray_r-12
     ;
 }
 
 .pagination-item--active {
     @apply 
-        border-yellow-900
-        bg-yellow-900
-        hover:bg-yellow-900
-        text-gray-900
+        border-yellow_r-9
+        bg-yellow_r-9
     ;
 }
 
@@ -348,8 +348,8 @@ html, body {
         w-10
         rounded 
         ease-linear 
-        bg-gray-100
-        text-caption
+        bg-gray_r-3
+        text-caption-2
     ;
 }
 
-- 
cgit v1.2.3