diff options
| -rw-r--r-- | src/components/layouts/AppBar.js | 16 | ||||
| -rw-r--r-- | src/components/products/ProductSlider.js | 2 | ||||
| -rw-r--r-- | src/components/transactions/TransactionStatusBadge.js | 10 | ||||
| -rw-r--r-- | src/pages/index.js | 4 | ||||
| -rw-r--r-- | src/styles/globals.css | 22 |
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 |