From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 13 Jan 2024 10:35:22 +0700 Subject: Refactor src migrate folder --- .../product-detail/styles/information.module.css | 19 +++++++++++++++++++ .../product-detail/styles/price-action.module.css | 12 ++++++++++++ .../product-detail/styles/product-detail.module.css | 15 +++++++++++++++ .../product-detail/styles/side-similar.module.css | 3 +++ .../product-detail/styles/variant-list.module.css | 19 +++++++++++++++++++ 5 files changed, 68 insertions(+) create mode 100644 src-migrate/modules/product-detail/styles/information.module.css create mode 100644 src-migrate/modules/product-detail/styles/price-action.module.css create mode 100644 src-migrate/modules/product-detail/styles/product-detail.module.css create mode 100644 src-migrate/modules/product-detail/styles/side-similar.module.css create mode 100644 src-migrate/modules/product-detail/styles/variant-list.module.css (limited to 'src-migrate/modules/product-detail/styles') diff --git a/src-migrate/modules/product-detail/styles/information.module.css b/src-migrate/modules/product-detail/styles/information.module.css new file mode 100644 index 00000000..c9b29020 --- /dev/null +++ b/src-migrate/modules/product-detail/styles/information.module.css @@ -0,0 +1,19 @@ +.wrapper { + @apply grid grid-cols-1; +} + +.row { + @apply flex p-3 rounded; +} + +.row:nth-child(odd) { + @apply bg-gray-100; +} + +.label { + @apply w-1/2 md:w-1/3 font-medium text-gray-500; +} + +.value { + @apply w-1/2 md:w-3/4 text-gray-950; +} diff --git a/src-migrate/modules/product-detail/styles/price-action.module.css b/src-migrate/modules/product-detail/styles/price-action.module.css new file mode 100644 index 00000000..594167af --- /dev/null +++ b/src-migrate/modules/product-detail/styles/price-action.module.css @@ -0,0 +1,12 @@ +.secondary-text { + @apply font-medium text-gray-500; +} +.main-price { + @apply font-medium text-danger-500 text-title-md; +} +.action-wrapper { + @apply flex gap-x-2.5; +} +.quantity-input { + @apply px-2 rounded text-center border border-gray-300 w-14 h-10 focus:outline-none; +} \ No newline at end of file diff --git a/src-migrate/modules/product-detail/styles/product-detail.module.css b/src-migrate/modules/product-detail/styles/product-detail.module.css new file mode 100644 index 00000000..c668167c --- /dev/null +++ b/src-migrate/modules/product-detail/styles/product-detail.module.css @@ -0,0 +1,15 @@ +.title { + @apply font-medium text-h-lg leading-8 md:text-title-md md:leading-10; +} + +.section-card { + @apply p-4 md:p-6 md:bg-gray-50 rounded-xl; +} + +.heading { + @apply text-h-md md:text-h-lg font-medium; +} + +.description { + @apply leading-relaxed text-gray-700; +} diff --git a/src-migrate/modules/product-detail/styles/side-similar.module.css b/src-migrate/modules/product-detail/styles/side-similar.module.css new file mode 100644 index 00000000..08692efa --- /dev/null +++ b/src-migrate/modules/product-detail/styles/side-similar.module.css @@ -0,0 +1,3 @@ +.wrapper { + @apply max-h-[500px] overflow-auto grid grid-cols-1 gap-y-4 divide-y divide-gray-300 border border-gray-300 rounded-lg; +} diff --git a/src-migrate/modules/product-detail/styles/variant-list.module.css b/src-migrate/modules/product-detail/styles/variant-list.module.css new file mode 100644 index 00000000..40cbd1bb --- /dev/null +++ b/src-migrate/modules/product-detail/styles/variant-list.module.css @@ -0,0 +1,19 @@ +.wrapper { + @apply grid grid-cols-1 w-[200%] md:w-full; +} + +.header { + @apply flex py-2.5 px-4 font-medium bg-gray-200 rounded-md; +} + +.row { + @apply flex items-center py-2.5 px-4 text-gray-800; +} + +.select-btn { + @apply !bg-gray-200 hover:!bg-danger-500 hover:!text-white; +} + +.select-btn--active { + @apply !text-white !bg-danger-500 hover:!text-white; +} -- cgit v1.2.3 From c42f03768e4c009a247d5cacbecaf4ac952752c9 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 15 Jan 2024 13:54:30 +0700 Subject: Improve product detail performance --- src-migrate/modules/product-detail/styles/price-action.module.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules/product-detail/styles') diff --git a/src-migrate/modules/product-detail/styles/price-action.module.css b/src-migrate/modules/product-detail/styles/price-action.module.css index 594167af..a8ec0ed3 100644 --- a/src-migrate/modules/product-detail/styles/price-action.module.css +++ b/src-migrate/modules/product-detail/styles/price-action.module.css @@ -9,4 +9,8 @@ } .quantity-input { @apply px-2 rounded text-center border border-gray-300 w-14 h-10 focus:outline-none; -} \ No newline at end of file +} + +.contact-us { + @apply text-danger-500 font-medium underline; +} -- cgit v1.2.3 From f7a0be1407da7edab60f6cb2ca3f1ef97acf811a Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 17 Jan 2024 16:03:48 +0700 Subject: Update product detail page ui --- .../modules/product-detail/styles/variant-list.module.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/product-detail/styles') diff --git a/src-migrate/modules/product-detail/styles/variant-list.module.css b/src-migrate/modules/product-detail/styles/variant-list.module.css index 40cbd1bb..a56822c1 100644 --- a/src-migrate/modules/product-detail/styles/variant-list.module.css +++ b/src-migrate/modules/product-detail/styles/variant-list.module.css @@ -3,11 +3,11 @@ } .header { - @apply flex py-2.5 px-4 font-medium bg-gray-200 rounded-md; + @apply flex py-2.5 pl-4 font-medium bg-gray-200 rounded-md; } .row { - @apply flex items-center py-2.5 px-4 text-gray-800; + @apply flex items-center py-2.5 pl-4 text-gray-800; } .select-btn { @@ -17,3 +17,11 @@ .select-btn--active { @apply !text-white !bg-danger-500 hover:!text-white; } + +.stock-empty { + @apply bg-red-50 border border-red-500 text-red-800; +} + +.stock-ready { + @apply bg-green-50 border border-green-500 text-green-800; +} -- cgit v1.2.3 From 5ac82c38ed3ec4db1fe4ae96e7493a55154716ef Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 18 Jan 2024 16:24:54 +0700 Subject: Update product detail page --- .../modules/product-detail/styles/image.module.css | 35 ++++++++++++++++++++++ .../product-detail/styles/price-action.module.css | 8 +++++ .../product-detail/styles/variant-list.module.css | 8 +++++ 3 files changed, 51 insertions(+) create mode 100644 src-migrate/modules/product-detail/styles/image.module.css (limited to 'src-migrate/modules/product-detail/styles') diff --git a/src-migrate/modules/product-detail/styles/image.module.css b/src-migrate/modules/product-detail/styles/image.module.css new file mode 100644 index 00000000..e472fe8d --- /dev/null +++ b/src-migrate/modules/product-detail/styles/image.module.css @@ -0,0 +1,35 @@ +.wrapper { + @apply h-[250px] md:h-[340px] flex items-center justify-center border border-gray-200 rounded-lg p-4 relative; +} + +.image { + @apply object-contain object-center h-full w-full; +} + +.absolute-info { + @apply absolute hidden md:block top-4 right-4; +} + +.disc-badge { + @apply bg-warning-500 py-1 px-3 w-fit font-semibold rounded-full; +} + +.countdown { + @apply flex gap-x-1; +} + +.countdown span { + @apply py-0.5 w-8 bg-warning-500 rounded-md text-center; +} + +.flashsale-text { + @apply flex items-center gap-x-2 text-white font-medium text-caption-1; +} + +.flashsale-bg { + @apply absolute top-0 w-full h-full object-cover object-center z-10; +} + +.flashsale { + @apply absolute top-0 w-full h-full z-20 flex items-center justify-between px-3; +} diff --git a/src-migrate/modules/product-detail/styles/price-action.module.css b/src-migrate/modules/product-detail/styles/price-action.module.css index a8ec0ed3..651de958 100644 --- a/src-migrate/modules/product-detail/styles/price-action.module.css +++ b/src-migrate/modules/product-detail/styles/price-action.module.css @@ -14,3 +14,11 @@ .contact-us { @apply text-danger-500 font-medium underline; } + +.disc-badge { + @apply bg-danger-500 px-2 py-1.5 rounded text-white text-caption-2; +} + +.disc-price { + @apply line-through text-gray-600 text-caption-2; +} diff --git a/src-migrate/modules/product-detail/styles/variant-list.module.css b/src-migrate/modules/product-detail/styles/variant-list.module.css index a56822c1..6d46df84 100644 --- a/src-migrate/modules/product-detail/styles/variant-list.module.css +++ b/src-migrate/modules/product-detail/styles/variant-list.module.css @@ -25,3 +25,11 @@ .stock-ready { @apply bg-green-50 border border-green-500 text-green-800; } + +.disc-badge { + @apply bg-danger-500 p-1 rounded text-white text-caption-2; +} + +.disc-price { + @apply text-caption-2 line-through text-gray-600; +} -- cgit v1.2.3 From 9c2b36fb15511b9f38492e133125a8b766c58a19 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 30 Jan 2024 13:51:19 +0700 Subject: Update product similar section --- src-migrate/modules/product-detail/styles/side-similar.module.css | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src-migrate/modules/product-detail/styles/side-similar.module.css (limited to 'src-migrate/modules/product-detail/styles') diff --git a/src-migrate/modules/product-detail/styles/side-similar.module.css b/src-migrate/modules/product-detail/styles/side-similar.module.css deleted file mode 100644 index 08692efa..00000000 --- a/src-migrate/modules/product-detail/styles/side-similar.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.wrapper { - @apply max-h-[500px] overflow-auto grid grid-cols-1 gap-y-4 divide-y divide-gray-300 border border-gray-300 rounded-lg; -} -- cgit v1.2.3