Merapihkan tampilan

2 files changed, 9 insertions, 9 deletions

diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
index c0524207..320c4454 100644
--- a/src/pages/shop/brands/[slug].js
+++ b/src/pages/shop/brands/[slug].js
@@ -89,7 +89,7 @@ export default function BrandDetail({
             <FilterIcon className="w-4 h-4" /> <span>Filter</span>
           </button>
           <h1>Produk</h1>
-          <div className="text-sm mb-4">
+          <div className="text-caption mb-4">
             {productFound > 0 ? (
               <>
                 Menampilkan&nbsp;
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 1ef693c0..c0119c8f 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -82,33 +82,33 @@ export default function ProductDetail({ product }) {
     <>
       <Header title={`${product.name} - Indoteknik`}/>
       <Layout>
-        <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" />
+        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray_r-6 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 ?? '-'}
           </Link>
-          <h1 className="mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
+          <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>
           ) : ''}
 
           {product.lowest_price.discount_percentage > 0 ? (
-            <div className="flex gap-x-1 items-center">
+            <div className="flex gap-x-1 items-center mb-1">
               <span className="badge-red">{activeVariant.price.discount_percentage}%</span>
-              <p className="text-xs text-gray-800 line-through">{currencyFormat(activeVariant.price.price)}</p>
+              <p className="text-xs text-gray_r-11 line-through">{currencyFormat(activeVariant.price.price)}</p>
             </div>
           ) : ''} 
 
           {product.lowest_price.price > 0 ? (
-            <p className="text-lg text-gray-900 font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
+            <p className="text-body-lg font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
           ) : (
-            <p className="text-gray-800">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
+            <p className="text-gray_r-11">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
           )}
 
           <div className="flex gap-x-2 mt-5">
             <div className="w-9/12">
-              <label className="form-label">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
+              <label className="form-label mb-1">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
               <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
                 <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
                 {product.variants.length > 1 ? (
@@ -123,7 +123,7 @@ export default function ProductDetail({ product }) {
               </select>
             </div>
             <div className="w-3/12">
-              <label htmlFor="quantity" className="form-label">Jumlah</label>
+              <label htmlFor="quantity" className="form-label mb-1">Jumlah</label>
               <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={(e) => setQuantity(e.target.value)} />
             </div>
           </div>