5 files changed, 29 insertions, 25 deletions
diff --git a/src/components/layouts/AppBar.js b/src/components/layouts/AppBar.js
index c3d38707..4fe70de8 100644
--- a/src/components/layouts/AppBar.js
+++ b/src/components/layouts/AppBar.js
@@ -7,20 +7,6 @@ import Link from "../elements/Link";
 const AppBar = ({ title }) => {
   const router = useRouter();
 
-  const [scrollPosition, setScrollPosition] = useState(0);
-  const handleScrollPosition = () => {
-    const position = window.pageYOffset;
-    setScrollPosition(position);
-  }
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScrollPosition, { passive: true });
-
-    return () => {
-      window.addEventListener('scroll', handleScrollPosition);
-    };
-  }, []);
-
   const handleBackButtonClick = (event) => {
     event.currentTarget.disabled = true;
     router.back();
@@ -31,7 +17,7 @@ const AppBar = ({ title }) => {
       <Head>
         <title>{ title } - Indoteknik</title>
       </Head>
-      <div className={"sticky-header flex justify-between !p-0 !pr-4 idt-transition " + (scrollPosition > 0 && "shadow border-b-transparent" ) }>
+      <div className="sticky-header flex justify-between !p-0 !pr-4 idt-transition">
         {/* --- Start Title */}
         <div className="flex items-center">
           <button type="button" onClick={handleBackButtonClick} className="text-gray_r-12 px-4 py-5">
diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js
index 78138480..100d0063 100644
--- a/src/components/products/ProductSlider.js
+++ b/src/components/products/ProductSlider.js
@@ -18,7 +18,7 @@ export default function ProductSlider({
   return (
     <>
       { bannerMode && (
-        <Image src={products.banner.image} alt={products.banner.name} className={`absolute rounded-r top-0 left-0 h-full max-w-[55%] idt-transition ` + (activeIndex > 0 ? 'brightness-50' : 'brightness-100')} />
+        <Image src={products.banner.image} alt={products.banner.name} className={`absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6 ` + (activeIndex > 0 ? 'opacity-20' : 'opacity-100')} />
       ) }
       <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8} onSlideChange={swiperSliderFirstMove}>
         { bannerMode && (
diff --git a/src/components/transactions/TransactionStatusBadge.js b/src/components/transactions/TransactionStatusBadge.js
index 588542fe..9551ec89 100644
--- a/src/components/transactions/TransactionStatusBadge.js
+++ b/src/components/transactions/TransactionStatusBadge.js
@@ -5,11 +5,11 @@ const TransactionStatusBadge = ({ status }) => {
   };
   switch (status) {
     case 'cancel':
-      badgeProps.className.push('badge-red');
+      badgeProps.className.push('badge-solid-red');
       badgeProps.text = 'Batal'
       break;
     case 'draft':
-      badgeProps.className.push('badge-gray');
+      badgeProps.className.push('badge-red');
       badgeProps.text = 'Pending Quotation'
       break;
     case 'waiting':
@@ -17,15 +17,15 @@ const TransactionStatusBadge = ({ status }) => {
       badgeProps.text = 'Menunggu Konfirmasi'
       break;
     case 'sale':
-      badgeProps.className.push('badge-blue');
+      badgeProps.className.push('badge-yellow');
       badgeProps.text = 'Pesanan Diproses'
       break;
     case 'shipping':
-      badgeProps.className.push('badge-blue');
+      badgeProps.className.push('badge-green');
       badgeProps.text = 'Pesanan Dikirim'
       break;
     case 'done':
-      badgeProps.className.push('badge-green');
+      badgeProps.className.push('badge-solid-green');
       badgeProps.text = 'Selesai'
       break;
   }
diff --git a/src/pages/index.js b/src/pages/index.js
index 6b6344e6..5ad19bf7 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -100,13 +100,13 @@ export default function Home({ heroBanners }) {
             }
           </Swiper>
         </div>
-        <div className="my-6 px-4">
+        <div className="my-8 px-4">
           <h2 className="mb-3">Produk Populer</h2>
           <ProductSlider products={popularProducts} />
         </div>
 
         { categoryProducts?.map((categoryProduct) => (
-          <div className="my-6 px-4 py-3 relative" key={categoryProduct.id}>
+          <div className="my-8 px-4 py-3 relative" key={categoryProduct.id}>
             <ProductSlider 
               products={categoryProduct ? {
                 products: categoryProduct.products,
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c18f91d3..6dbd23b2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -54,10 +54,12 @@ html, body {
 
 @layer components {
     .badge-red,
+    .badge-solid-red,
     .badge-gray,
     .badge-yellow,
     .badge-blue,
-    .badge-green {
+    .badge-green,
+    .badge-solid-green {
         @apply
             text-caption-2
             leading-none
@@ -76,6 +78,13 @@ html, body {
         ;
     }
 
+    .badge-solid-red {
+        @apply
+            bg-red_r-10
+            text-white
+        ;
+    }
+
     .badge-gray {
         @apply
             bg-gray_r-5
@@ -103,6 +112,13 @@ html, body {
             text-green_r-10
         ;
     }
+    
+    .badge-solid-green {
+        @apply
+            bg-green_r-10
+            text-white
+        ;
+    }
 
     .form-label {
         @apply
@@ -196,7 +212,9 @@ html, body {
             w-full
             h-full
             border
-            border-gray_r-6
+            border-gray_r-3
+            shadow-md
+            shadow-gray_r-8/30
             bg-white
             rounded
             relative