From 8b73b8dd2f002d6fe6d97c3dc6c12aa32416b910 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 21 Jun 2026 02:09:26 -0400 Subject: [PATCH] x --- apps/spa/src/components/CartDrawer.tsx | 8 +-- apps/spa/src/components/DynamicBanner.tsx | 2 +- apps/spa/src/components/DynamicCategories.tsx | 8 +-- .../components/DynamicEditorialCarousel.tsx | 2 +- .../src/components/DynamicEditorialTile.tsx | 2 +- .../spa/src/components/DynamicHeroArticle.tsx | 2 +- apps/spa/src/components/DynamicNewsletter.tsx | 2 +- apps/spa/src/components/DynamicProducts.tsx | 6 +- .../src/components/DynamicQuoteCallout.tsx | 2 +- apps/spa/src/components/DynamicText.tsx | 4 +- apps/spa/src/components/EmptyState.tsx | 4 +- apps/spa/src/components/ErrorState.tsx | 4 +- apps/spa/src/components/Footer.tsx | 44 ++++++------ apps/spa/src/components/MobileDrawer.tsx | 12 ++-- apps/spa/src/components/Navbar.tsx | 20 +++--- apps/spa/src/components/ProductCard.tsx | 8 +-- .../src/components/ProductImageGallery.tsx | 8 +-- apps/spa/src/components/ProductReviews.tsx | 18 ++--- .../sections/ContactFormSection.tsx | 6 +- .../sections/ContactInfoSection.tsx | 2 +- .../src/components/ui/ThaiAddressInput.tsx | 2 +- apps/spa/src/index.css | 36 +++++----- apps/spa/src/pages/ArticleReaderPage.tsx | 8 +-- apps/spa/src/pages/CategoryPage.tsx | 14 ++-- apps/spa/src/pages/CheckoutPage.tsx | 12 ++-- apps/spa/src/pages/CouponsPage.tsx | 4 +- apps/spa/src/pages/NotFoundPage.tsx | 16 ++--- apps/spa/src/pages/OrderSuccessPage.tsx | 34 ++++----- apps/spa/src/pages/ProductDetailPage.tsx | 18 ++--- apps/spa/src/pages/ProfilePage.tsx | 26 +++---- apps/spa/src/pages/ScentGuidePage.tsx | 14 ++-- apps/spa/src/pages/SearchPage.tsx | 6 +- apps/spa/src/pages/ShopPage.tsx | 12 ++-- apps/spa/src/pages/TrackOrderPage.tsx | 12 ++-- apps/spa/src/pages/WishlistPage.tsx | 4 +- apps/website/src/app/[lang]/about/page.tsx | 2 +- .../src/app/[lang]/category/[id]/page.tsx | 2 +- apps/website/src/app/[lang]/coupons/page.tsx | 4 +- apps/website/src/app/[lang]/faq/page.tsx | 4 +- .../src/app/[lang]/order/[id]/page.tsx | 2 +- apps/website/src/app/[lang]/search/page.tsx | 2 +- apps/website/src/app/[lang]/shop/page.tsx | 2 +- apps/website/src/app/globals.css | 72 +++++++++---------- .../src/components/AddToCartSection.tsx | 6 +- apps/website/src/components/CartDrawer.tsx | 2 +- .../website/src/components/CheckoutClient.tsx | 6 +- apps/website/src/components/Navbar.tsx | 6 +- apps/website/src/components/ProfileClient.tsx | 10 +-- .../src/components/TrackOrderClient.tsx | 2 +- .../website/src/components/WishlistClient.tsx | 2 +- .../dynamic/DynamicPageRenderer.tsx | 22 +++--- .../components/navigation/MobileDrawer.tsx | 2 +- 52 files changed, 265 insertions(+), 265 deletions(-) diff --git a/apps/spa/src/components/CartDrawer.tsx b/apps/spa/src/components/CartDrawer.tsx index ffd53ec..140b84d 100644 --- a/apps/spa/src/components/CartDrawer.tsx +++ b/apps/spa/src/components/CartDrawer.tsx @@ -32,7 +32,7 @@ export default function CartDrawer() { /> {/* Drawer */} -
+
{/* Header */}

@@ -65,7 +65,7 @@ export default function CartDrawer() {

) : ( items.map((item) => ( -
+
setCouponInput(e.target.value.toUpperCase())} placeholder={t('cart.couponPlaceholder', 'Discount Code')} - className="flex-1 bg-white border border-spa-stone/20 rounded-lg px-3 py-2 text-sm text-pop-black focus:border-spa-forest outline-none uppercase tracking-widest placeholder:text-spa-stone/50" + className="flex-1 bg-spa-light border border-spa-stone/20 rounded-lg px-3 py-2 text-sm text-pop-black focus:border-spa-forest outline-none uppercase tracking-widest placeholder:text-spa-stone/50" />
{/* Sliding Views Container */} -
+
{stack.map((view, index) => { const isCurrent = index === stack.length - 1; const isPast = index < stack.length - 1; @@ -193,7 +193,7 @@ export function MobileDrawer({ isOpen, onClose, items, onOpenLang }: MobileDrawe return (
@@ -225,10 +225,10 @@ export function MobileDrawer({ isOpen, onClose, items, onOpenLang }: MobileDrawe
{/* Static Bottom Footer */} -
+
diff --git a/apps/spa/src/components/Navbar.tsx b/apps/spa/src/components/Navbar.tsx index 370b371..c8f5c62 100644 --- a/apps/spa/src/components/Navbar.tsx +++ b/apps/spa/src/components/Navbar.tsx @@ -153,7 +153,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) { ref={navRef} className={`fixed ${finalTopClassName} z-50 w-full border-b border-black/5 transition-all duration-300 ${ scrolled ? 'shadow-lg shadow-black/5' : 'shadow-none' - } bg-white/80 px-4 py-3.5 backdrop-blur-xl md:bg-spa-sage md:px-6 md:py-4 md:backdrop-blur-none`} + } bg-spa-light px-4 py-3.5 backdrop-blur-xl md:bg-spa-sage md:px-6 md:py-4 md:backdrop-blur-none`} > {/* Single-row layout: Logo (left) | Menu (center, desktop) | Actions (right) */}
@@ -193,7 +193,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) { > {wishlistCount > 0 && ( - + {wishlistCount} )} @@ -206,7 +206,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) { > {cartCount > 0 && ( - + {cartCount} )} @@ -215,12 +215,12 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) { {isDesktop && ( <>
-
-
+
{LANGUAGES.map(lang => { const isActive = i18n.language.startsWith(lang.code) return ( @@ -248,7 +248,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) { />
-
+

{t('nav.signedInAs', 'Signed in as')}

{customer.displayName}

@@ -271,7 +271,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) { ) : ( @@ -317,7 +317,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
-
+
@@ -329,7 +329,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) { className="bg-transparent border-none outline-none text-lg md:text-xl p-4 pl-0 w-full text-spa-forest placeholder-spa-stone/40" autoFocus /> -
@@ -346,7 +346,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) { onClick={() => setLangSheetOpen(false)} />
diff --git a/apps/spa/src/components/ProductCard.tsx b/apps/spa/src/components/ProductCard.tsx index 6ff0832..bc05d39 100644 --- a/apps/spa/src/components/ProductCard.tsx +++ b/apps/spa/src/components/ProductCard.tsx @@ -57,13 +57,13 @@ export default function ProductCard({ product, enableQuickShop = false, category (e.target as HTMLImageElement).style.display = 'none'; }} /> -
+
{displayCategoryName}
@@ -135,8 +135,8 @@ export default function ProductReviews({ productId }: { productId: number }) { onClick={() => { setFilterRating(null); setVisibleCount(3); }} className={`flex-shrink-0 px-4 py-1.5 rounded-full text-xs font-bold transition-all border ${ filterRating === null - ? 'bg-spa-stone text-white border-spa-stone' - : 'bg-white text-spa-stone border-spa-stone/20 hover:border-spa-stone/50' + ? 'bg-spa-stone text-spa-light border-spa-stone' + : 'bg-spa-light text-spa-stone border-spa-stone/20 hover:border-spa-stone/50' }`} > All ({reviews.length}) @@ -150,11 +150,11 @@ export default function ProductReviews({ productId }: { productId: number }) { onClick={() => { setFilterRating(star); setVisibleCount(3); }} className={`flex-shrink-0 flex items-center gap-1 px-4 py-1.5 rounded-full text-xs font-bold transition-all border ${ filterRating === star - ? 'bg-spa-stone text-white border-spa-stone' - : 'bg-white text-spa-stone border-spa-stone/20 hover:border-spa-stone/50' + ? 'bg-spa-stone text-spa-light border-spa-stone' + : 'bg-spa-light text-spa-stone border-spa-stone/20 hover:border-spa-stone/50' }`} > - {star} ({count}) + {star} ({count}) ); })} @@ -174,7 +174,7 @@ export default function ProductReviews({ productId }: { productId: number }) { {review.customer?.pictureUrl ? ( ) : ( -
+
{(review.customerName || 'A')[0].toUpperCase()}
)} @@ -197,7 +197,7 @@ export default function ProductReviews({ productId }: { productId: number }) {
diff --git a/apps/spa/src/components/sections/ContactFormSection.tsx b/apps/spa/src/components/sections/ContactFormSection.tsx index 4fbe41b..9bfcae6 100644 --- a/apps/spa/src/components/sections/ContactFormSection.tsx +++ b/apps/spa/src/components/sections/ContactFormSection.tsx @@ -129,7 +129,7 @@ export default function ContactFormSection({ payload }: ContactFormSectionProps)

-
+
{isSuccess ? (
@@ -192,10 +192,10 @@ export default function ContactFormSection({ payload }: ContactFormSectionProps)
{/* Summary Section */}
-
+
diff --git a/apps/spa/src/pages/CouponsPage.tsx b/apps/spa/src/pages/CouponsPage.tsx index 028ffac..459937b 100644 --- a/apps/spa/src/pages/CouponsPage.tsx +++ b/apps/spa/src/pages/CouponsPage.tsx @@ -139,7 +139,7 @@ export default function CouponsPage() { {coupons.map(coupon => (
{/* Decoration */}
@@ -184,7 +184,7 @@ export default function CouponsPage() {
-
+

Payment Slip Verification

{order.paymentSlipUrl ? (
@@ -404,7 +404,7 @@ export default function OrderSuccessPage() { {/* PromptPay Layout */} {paymentMethod === 'promptpay' && ( -
+

PromptPay QR Code

{formatPrice(order.totalAmount)}
@@ -414,7 +414,7 @@ export default function OrderSuccessPage() {
) : (
-
+
PromptPay QR Code
@@ -452,7 +452,7 @@ export default function OrderSuccessPage() { {/* Credit Card Layout */} {paymentMethod === 'card' && ( -
+

Credit / Debit Card

@@ -527,7 +527,7 @@ export default function OrderSuccessPage() {
) : ( -
+
diff --git a/apps/spa/src/pages/ProductDetailPage.tsx b/apps/spa/src/pages/ProductDetailPage.tsx index e779d9d..157f062 100644 --- a/apps/spa/src/pages/ProductDetailPage.tsx +++ b/apps/spa/src/pages/ProductDetailPage.tsx @@ -220,12 +220,12 @@ export default function ProductDetailPage() { onClick={() => setSelectedVariant(i)} className={`px-5 py-2.5 rounded-lg text-sm font-bold uppercase tracking-widest transition-all duration-300 border ${ selectedVariant === i - ? 'bg-spa-forest text-white border-spa-forest shadow-md' - : 'bg-white text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm' + ? 'bg-spa-forest text-spa-light border-spa-forest shadow-md' + : 'bg-spa-light text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm' }`} > {v.size} - + {formatPrice(v.price)} @@ -237,11 +237,11 @@ export default function ProductDetailPage() {
- diff --git a/apps/spa/src/pages/ProfilePage.tsx b/apps/spa/src/pages/ProfilePage.tsx index a4c29dc..f587faa 100644 --- a/apps/spa/src/pages/ProfilePage.tsx +++ b/apps/spa/src/pages/ProfilePage.tsx @@ -303,7 +303,7 @@ export default function ProfilePage() { {!customer ? ( /* Login CTA screen */ -
+
@@ -320,7 +320,7 @@ export default function ProfilePage() { alert('LINE LIFF System is initializing. Please refresh.') } }} - className="w-full py-4 bg-spa-forest hover:bg-spa-stone text-white font-bold rounded-xl tracking-widest uppercase transition-all duration-300 shadow-sm flex items-center justify-center gap-3" + className="w-full py-4 bg-spa-forest hover:bg-spa-stone text-spa-light font-bold rounded-xl tracking-widest uppercase transition-all duration-300 shadow-sm flex items-center justify-center gap-3" > เข้าสู่ระบบผ่าน LINE @@ -331,7 +331,7 @@ export default function ProfilePage() { /* Logged In Dashboard Layout */
{/* Header Profile Banner */} -
+
{/* User Avatar & Info */} @@ -459,7 +459,7 @@ export default function ProfilePage() {
) : orders.length === 0 ? ( -
+

ไม่มีประวัติการสั่งซื้อ

@@ -467,7 +467,7 @@ export default function ProfilePage() {
ไปหน้าช้อปปิ้ง @@ -477,7 +477,7 @@ export default function ProfilePage() { {orders.map(order => (
{/* Card Header */}
@@ -550,7 +550,7 @@ export default function ProfilePage() { resetAddressForm() setShowAddressForm(true) }} - className="px-4 py-2 bg-spa-forest hover:bg-spa-stone text-white font-bold rounded-lg text-xs uppercase tracking-wider transition-colors shadow-sm flex items-center gap-2" + className="px-4 py-2 bg-spa-forest hover:bg-spa-stone text-spa-light font-bold rounded-lg text-xs uppercase tracking-wider transition-colors shadow-sm flex items-center gap-2" > เพิ่มที่อยู่ใหม่ @@ -560,7 +560,7 @@ export default function ProfilePage() { {/* Address Creation/Editing Form */} {showAddressForm && ( -
+

{editingAddress ? 'แก้ไขที่อยู่จัดส่ง' : 'เพิ่มที่อยู่จัดส่งใหม่'}

@@ -636,7 +636,7 @@ export default function ProfilePage() {
) : addresses.length === 0 ? ( -
+

ไม่มีข้อมูลที่อยู่จัดส่ง

@@ -662,7 +662,7 @@ export default function ProfilePage() { {addresses.map(addr => (
ข้อมูลติดต่อสมาชิก - + {settingsSuccess && (
@@ -763,7 +763,7 @@ export default function ProfilePage() {
) : ( -
+

Journal

Scent Guide

-

+

Explore our collection of articles, guides, and sensory knowledge.

@@ -70,7 +70,7 @@ export default function ScentGuidePage() {
{articles.length === 0 ? ( -
+
Articles coming soon. Check back later!
) : ( @@ -81,12 +81,12 @@ export default function ScentGuidePage() { to={`/article/${article.slug}`} className="group block bg-pop-bg rounded-2xl overflow-hidden border border-spa-stone/10 hover:border-spa-forest transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl flex flex-col" > -
+
{article.coverImage ? ( {article.title} ) : ( -
- No Image +
+ No Image
)}
@@ -96,7 +96,7 @@ export default function ScentGuidePage() {

{article.title}

{/* Remove HTML tags for purely excerpt preview */} -
+
))} diff --git a/apps/spa/src/pages/SearchPage.tsx b/apps/spa/src/pages/SearchPage.tsx index 1852d67..6872f14 100644 --- a/apps/spa/src/pages/SearchPage.tsx +++ b/apps/spa/src/pages/SearchPage.tsx @@ -100,7 +100,7 @@ export default function SearchPage() {

Search Products

-
+
@@ -114,7 +114,7 @@ export default function SearchPage() { /> @@ -127,7 +127,7 @@ export default function SearchPage() { {typeof cat.name === 'string' ? cat.name : (cat.name as any)?.[i18n.language] || (cat.name as any)?.en || ''} diff --git a/apps/spa/src/pages/ShopPage.tsx b/apps/spa/src/pages/ShopPage.tsx index 23d39b7..2b6891f 100644 --- a/apps/spa/src/pages/ShopPage.tsx +++ b/apps/spa/src/pages/ShopPage.tsx @@ -154,7 +154,7 @@ export default function ShopPage() { {/* Search */}
-
+
@@ -173,7 +173,7 @@ export default function ShopPage() { {/* Render Search bar below Hero block if Hero is configured */} {heroSections.length > 0 && (
-
+
@@ -195,8 +195,8 @@ export default function ShopPage() { onClick={() => setActiveCategory(null)} className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 border ${ activeCategory === null - ? 'bg-spa-forest text-white border-spa-forest shadow-md' - : 'bg-white text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm' + ? 'bg-spa-forest text-spa-light border-spa-forest shadow-md' + : 'bg-spa-light text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm' }`} > All @@ -207,8 +207,8 @@ export default function ShopPage() { onClick={() => setActiveCategory(cat.id)} className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 border ${ activeCategory === cat.id - ? 'bg-spa-forest text-white border-spa-forest shadow-md' - : 'bg-white text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm' + ? 'bg-spa-forest text-spa-light border-spa-forest shadow-md' + : 'bg-spa-light text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm' }`} > {typeof cat.name === 'string' ? cat.name : (cat.name as any)?.[i18n.language] || (cat.name as any)?.en || ''} diff --git a/apps/spa/src/pages/TrackOrderPage.tsx b/apps/spa/src/pages/TrackOrderPage.tsx index cb1a2e3..64a11f6 100644 --- a/apps/spa/src/pages/TrackOrderPage.tsx +++ b/apps/spa/src/pages/TrackOrderPage.tsx @@ -144,7 +144,7 @@ export default function TrackOrderPage() {
{/* Tracking Form */} -
+

Manual Search

@@ -183,7 +183,7 @@ export default function TrackOrderPage() { @@ -214,7 +214,7 @@ export default function TrackOrderPage() {
@@ -235,7 +235,7 @@ export default function TrackOrderPage() {

{order.items.length} items

- +
@@ -254,14 +254,14 @@ export default function TrackOrderPage() {

Order

#{id.toString().padStart(4, '0')}

- +
))} diff --git a/apps/spa/src/pages/WishlistPage.tsx b/apps/spa/src/pages/WishlistPage.tsx index 57cb47b..966473d 100644 --- a/apps/spa/src/pages/WishlistPage.tsx +++ b/apps/spa/src/pages/WishlistPage.tsx @@ -76,7 +76,7 @@ export default function WishlistPage() { )} {items.length === 0 ? ( -
+
@@ -85,7 +85,7 @@ export default function WishlistPage() {
Browse Shop diff --git a/apps/website/src/app/[lang]/about/page.tsx b/apps/website/src/app/[lang]/about/page.tsx index 761c63d..9b0b38a 100644 --- a/apps/website/src/app/[lang]/about/page.tsx +++ b/apps/website/src/app/[lang]/about/page.tsx @@ -105,7 +105,7 @@ export default async function AboutPage({ params }: { params: Promise<{ lang: st

Ready to find your scent?

Let our Scent Guide help you discover the perfect blend for your moment.

- + Take the Scent Guide diff --git a/apps/website/src/app/[lang]/category/[id]/page.tsx b/apps/website/src/app/[lang]/category/[id]/page.tsx index b84515f..80c2984 100644 --- a/apps/website/src/app/[lang]/category/[id]/page.tsx +++ b/apps/website/src/app/[lang]/category/[id]/page.tsx @@ -124,7 +124,7 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s href={`/category/${item.id}`} className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${ isActive - ? 'bg-text-main text-white' + ? 'bg-text-main text-surface-card' : 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary' }`} > diff --git a/apps/website/src/app/[lang]/coupons/page.tsx b/apps/website/src/app/[lang]/coupons/page.tsx index 778a646..b830a05 100644 --- a/apps/website/src/app/[lang]/coupons/page.tsx +++ b/apps/website/src/app/[lang]/coupons/page.tsx @@ -75,7 +75,7 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:

กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง

ไปช้อปปิ้งกันก่อน @@ -116,7 +116,7 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang: ช้อปพร้อมใช้คูปองเลย diff --git a/apps/website/src/app/[lang]/faq/page.tsx b/apps/website/src/app/[lang]/faq/page.tsx index 968ba51..7334802 100644 --- a/apps/website/src/app/[lang]/faq/page.tsx +++ b/apps/website/src/app/[lang]/faq/page.tsx @@ -83,7 +83,7 @@ export default function FaqPage() { onClick={() => setActiveCategory(category)} className={`flex items-center gap-2 rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition-all duration-300 ${ activeCategory === category - ? 'ui-tab-button-active bg-text-main text-white shadow-card' + ? 'ui-tab-button-active bg-text-main text-surface-card shadow-card' : 'ui-tab-button-inactive border border-line-primary/20 bg-surface-card hover:border-brand-primary hover:text-brand-primary' }`} > @@ -119,7 +119,7 @@ export default function FaqPage() {
💬

Still have questions?

Our team is here to help — usually responds within 2 hours.

- + Contact Us
diff --git a/apps/website/src/app/[lang]/order/[id]/page.tsx b/apps/website/src/app/[lang]/order/[id]/page.tsx index 418b340..58dd9a2 100644 --- a/apps/website/src/app/[lang]/order/[id]/page.tsx +++ b/apps/website/src/app/[lang]/order/[id]/page.tsx @@ -182,7 +182,7 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id ค้นหาออเดอร์อื่น - + กลับไปช้อปต่อ
diff --git a/apps/website/src/app/[lang]/search/page.tsx b/apps/website/src/app/[lang]/search/page.tsx index 16b4d2d..74ca3a6 100644 --- a/apps/website/src/app/[lang]/search/page.tsx +++ b/apps/website/src/app/[lang]/search/page.tsx @@ -57,7 +57,7 @@ export default async function SearchPage({ searchParams, params }: { searchParam placeholder="Search by scent or product name..." className="min-w-0 flex-1 px-5 py-3 text-sm text-text-main outline-none placeholder:text-muted-text/70" /> - diff --git a/apps/website/src/app/[lang]/shop/page.tsx b/apps/website/src/app/[lang]/shop/page.tsx index 8eaa162..b630aed 100644 --- a/apps/website/src/app/[lang]/shop/page.tsx +++ b/apps/website/src/app/[lang]/shop/page.tsx @@ -61,7 +61,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
- + All {categories.map((category) => { diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css index 098c345..4452b34 100644 --- a/apps/website/src/app/globals.css +++ b/apps/website/src/app/globals.css @@ -10,7 +10,7 @@ --color-brand-soft: #D8BFD8; --color-surface-page: #FFF0F5; --color-surface-nav-rest: #F9F8F5; - --color-surface-card: #FFFFFF; + --color-surface-card: var(--color-surface-card); --color-text-main: #333333; --color-muted-text: #666666; --color-line-primary: #00B900; @@ -91,7 +91,7 @@ @layer components { .brutal-box { - @apply bg-white border border-gray-100 rounded-2xl shadow-brutal transition-all duration-300; + @apply bg-surface-card border border-line-primary/20 rounded-2xl shadow-brutal transition-all duration-300; } .brutal-box-hover { @@ -99,15 +99,15 @@ } .brutal-button { - @apply px-8 py-4 bg-brand-primary text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-brand-primary-hover hover:-translate-y-1 hover:shadow-brutal-hover; + @apply px-8 py-4 bg-brand-primary text-surface-card font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-brand-primary-hover hover:-translate-y-1 hover:shadow-brutal-hover; } .brutal-button-alt { - @apply px-8 py-4 bg-white text-brand-primary font-medium rounded-full border border-brand-primary shadow-brutal transition-all duration-300 hover:bg-surface-page hover:-translate-y-1 hover:shadow-brutal-hover; + @apply px-8 py-4 bg-surface-card text-brand-primary font-medium rounded-full border border-brand-primary shadow-brutal transition-all duration-300 hover:bg-surface-page hover:-translate-y-1 hover:shadow-brutal-hover; } .ui-card { - @apply rounded-2xl border border-gray-100 bg-surface-card shadow-card transition-all duration-300; + @apply rounded-2xl border border-line-primary/20 bg-surface-card shadow-card transition-all duration-300; } .ui-card-hover { @@ -115,15 +115,15 @@ } .ui-button-primary { - @apply inline-flex items-center justify-center rounded-full bg-text-main px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary; + @apply inline-flex items-center justify-center rounded-full bg-text-main px-6 py-3 text-xs font-bold uppercase tracking-widest text-surface-card transition-colors hover:bg-brand-primary; } .ui-button-brand { - @apply inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary-hover; + @apply inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-xs font-bold uppercase tracking-widest text-surface-card transition-colors hover:bg-brand-primary-hover; } .ui-button-line { - @apply inline-flex items-center justify-center rounded-full bg-line-primary px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-line-primary-hover; + @apply inline-flex items-center justify-center rounded-full bg-line-primary px-4 py-2 text-xs font-bold uppercase tracking-widest text-surface-card shadow-sm transition-colors hover:bg-line-primary-hover; } .ui-icon-button { @@ -135,11 +135,11 @@ } .ui-nav-chip { - @apply flex items-center gap-1.5 rounded-full border border-brand-primary/30 bg-white px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-text-main transition-all hover:bg-surface-page hover:text-brand-primary; + @apply flex items-center gap-1.5 rounded-full border border-brand-primary/30 bg-surface-card px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-text-main transition-all hover:bg-surface-page hover:text-brand-primary; } .ui-nav-panel { - @apply overflow-hidden rounded-xl border border-text-main/10 bg-white/95 shadow-2xl backdrop-blur-xl; + @apply overflow-hidden rounded-xl border border-text-main/10 bg-surface-card shadow-2xl backdrop-blur-xl; } .ui-menu-link { @@ -159,11 +159,11 @@ } .ui-muted-text { - @apply text-gray-600; + @apply text-muted-text; } .ui-input-shell { - @apply rounded-2xl border border-gray-200 bg-surface-page text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20; + @apply rounded-2xl border border-line-primary/20 bg-surface-page text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20; } .ui-footer-link { @@ -171,7 +171,7 @@ } .ui-footer-social { - @apply flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-white; + @apply flex h-9 w-9 items-center justify-center rounded-full border border-line-primary/20 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-surface-card; } .ui-section-band { @@ -187,11 +187,11 @@ } .ui-section-subtitle { - @apply text-gray-500; + @apply text-muted-text; } .ui-section-card { - @apply rounded-3xl bg-white shadow-card; + @apply rounded-3xl bg-surface-card shadow-card; } .ui-section-card-muted { @@ -215,7 +215,7 @@ justify-content: center; overflow: hidden; background: var(--color-text-main); - color: #fff; + color: var(--color-surface-card); } .ui-hero-overlay { @@ -236,7 +236,7 @@ } .ui-hero-title { - color: #fff; + color: var(--color-surface-card); font-family: var(--font-display-locale); font-size: 3rem; font-weight: 300; @@ -274,7 +274,7 @@ align-items: center; gap: 0.5rem; padding: 1rem 2rem; - color: #fff; + color: var(--color-surface-card); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; @@ -308,7 +308,7 @@ z-index: 10; max-width: 36rem; padding: 2rem; - color: #fff; + color: var(--color-surface-card); } .ui-banner-content > * + * { @@ -318,7 +318,7 @@ .ui-section-dark { background: var(--color-text-main); padding: 5rem 1.5rem; - color: #fff; + color: var(--color-surface-card); } .ui-section-dark-card { @@ -329,7 +329,7 @@ } .ui-section-dark-card-title { - color: #fff; + color: var(--color-surface-card); font-size: 2.25rem; font-weight: 600; line-height: 2.5rem; @@ -389,7 +389,7 @@ } .ui-panel { - @apply rounded-3xl bg-white shadow-card; + @apply rounded-3xl bg-surface-card shadow-card; } .ui-panel-muted { @@ -397,11 +397,11 @@ } .ui-panel-border { - @apply rounded-3xl border border-gray-100 bg-white shadow-card; + @apply rounded-3xl border border-line-primary/20 bg-surface-card shadow-card; } .ui-panel-header { - @apply flex items-center gap-3 border-b border-gray-100 pb-5; + @apply flex items-center gap-3 border-b border-line-primary/20 pb-5; } .ui-panel-title { @@ -409,31 +409,31 @@ } .ui-panel-subtitle { - @apply text-sm text-gray-500; + @apply text-sm text-muted-text; } .ui-form-label { - @apply text-xs font-bold uppercase tracking-[0.18em] text-gray-500; + @apply text-xs font-bold uppercase tracking-[0.18em] text-muted-text; } .ui-form-shell { - @apply w-full rounded-2xl border border-gray-200 bg-surface-page px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20; + @apply w-full rounded-2xl border border-line-primary/20 bg-surface-page px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20; } .ui-form-shell-light { - @apply w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20; + @apply w-full rounded-2xl border border-line-primary/20 bg-surface-card px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20; } .ui-form-inline-button { - @apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60; + @apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60; } .ui-form-inline-button-sm { - @apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-2 text-sm font-semibold text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60; + @apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-2 text-sm font-semibold text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60; } .ui-form-secondary-button { - @apply rounded-full border border-gray-200 px-5 py-2 text-sm font-semibold text-gray-600 transition hover:text-brand-primary; + @apply rounded-full border border-line-primary/20 px-5 py-2 text-sm font-semibold text-muted-text transition hover:text-brand-primary; } .ui-form-danger-button { @@ -441,7 +441,7 @@ } .ui-form-checkbox { - @apply h-4 w-4 rounded border-gray-300 text-brand-primary; + @apply h-4 w-4 rounded border-line-primary/20 text-brand-primary; } .ui-status-badge { @@ -523,7 +523,7 @@ } .ui-tab-button-inactive { - @apply text-gray-500 hover:text-text-main; + @apply text-muted-text hover:text-text-main; } .ui-tab-count { @@ -531,7 +531,7 @@ } .ui-empty-panel { - @apply rounded-3xl bg-white px-6 py-16 text-center shadow-card; + @apply rounded-3xl bg-surface-card px-6 py-16 text-center shadow-card; } } @@ -545,11 +545,11 @@ } ::-webkit-scrollbar-thumb { - @apply bg-gray-300 rounded-full; + @apply bg-surface-nav-rest rounded-full; } ::-webkit-scrollbar-thumb:hover { - @apply bg-gray-400; + @apply bg-surface-nav-rest; } /* Smooth Scrolling */ diff --git a/apps/website/src/components/AddToCartSection.tsx b/apps/website/src/components/AddToCartSection.tsx index d7546b5..56fb309 100644 --- a/apps/website/src/components/AddToCartSection.tsx +++ b/apps/website/src/components/AddToCartSection.tsx @@ -70,12 +70,12 @@ export default function AddToCartSection({ product }: Props) { onClick={() => setSelectedVariant(index)} className={`rounded-xl border px-5 py-3 text-sm font-bold uppercase tracking-widest transition ${ selectedVariant === index - ? 'border-brand-primary bg-brand-primary text-white shadow-card' + ? 'border-brand-primary bg-brand-primary text-surface-card shadow-card' : 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary' }`} > {variant.size} - + {formatPrice(variant.price)} @@ -124,7 +124,7 @@ export default function AddToCartSection({ product }: Props) { onClick={() => setSelectedVariant(index)} className={`flex-shrink-0 rounded-full border px-4 py-2 text-[10px] font-bold uppercase tracking-widest transition ${ selectedVariant === index - ? 'border-brand-primary bg-brand-primary text-white' + ? 'border-brand-primary bg-brand-primary text-surface-card' : 'border-line-primary/20 bg-surface-card text-muted-text' }`} > diff --git a/apps/website/src/components/CartDrawer.tsx b/apps/website/src/components/CartDrawer.tsx index d9fc083..ae78f4b 100644 --- a/apps/website/src/components/CartDrawer.tsx +++ b/apps/website/src/components/CartDrawer.tsx @@ -83,7 +83,7 @@ export default function CartDrawer() { {formatPrice(getCartTotal())}

{t('cart.shippingNote')}

- toggleCart(false)} className="block w-full rounded-full bg-text-main py-4 text-center text-sm font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary"> + toggleCart(false)} className="block w-full rounded-full bg-text-main py-4 text-center text-sm font-bold uppercase tracking-widest text-surface-card transition hover:bg-brand-primary"> {t('cart.proceed')}
diff --git a/apps/website/src/components/CheckoutClient.tsx b/apps/website/src/components/CheckoutClient.tsx index 05c4d4e..468d8e4 100644 --- a/apps/website/src/components/CheckoutClient.tsx +++ b/apps/website/src/components/CheckoutClient.tsx @@ -401,7 +401,7 @@ export default function CheckoutClient() {

ตะกร้าสินค้าว่าง

เลือกสินค้าที่คุณชอบก่อน แล้วกลับมายืนยันคำสั่งซื้อที่หน้านี้ได้เลย

- + กลับไปเลือกสินค้า
@@ -642,7 +642,7 @@ export default function CheckoutClient() { type="button" onClick={applyCoupon} disabled={couponLoading || !couponCode.trim()} - className="rounded-2xl bg-text-main px-4 py-3 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary disabled:opacity-50" + className="rounded-2xl bg-text-main px-4 py-3 text-xs font-bold uppercase tracking-widest text-surface-card transition hover:bg-brand-primary disabled:opacity-50" > {couponLoading ? : 'ใช้'} @@ -756,7 +756,7 @@ export default function CheckoutClient() { type="submit" form="checkout-form" disabled={submitting || loadingSettings} - className="hidden w-full items-center justify-between rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60 lg:flex" + className="hidden w-full items-center justify-between rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60 lg:flex" > {submitting && } diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx index ea952d7..e0d6838 100644 --- a/apps/website/src/components/Navbar.tsx +++ b/apps/website/src/components/Navbar.tsx @@ -231,7 +231,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n > {wishlistCount > 0 && ( - + {wishlistCount} )} @@ -247,7 +247,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n > {cartCount > 0 && ( - + {cartCount} )} @@ -353,7 +353,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n className="w-full border-none bg-transparent p-4 pl-0 text-lg text-text-main outline-none placeholder:text-text-main/35 md:text-xl" autoFocus /> -
diff --git a/apps/website/src/components/ProfileClient.tsx b/apps/website/src/components/ProfileClient.tsx index 193b19d..7ed5e17 100644 --- a/apps/website/src/components/ProfileClient.tsx +++ b/apps/website/src/components/ProfileClient.tsx @@ -294,7 +294,7 @@ export default function ProfileClient() { @@ -474,7 +474,7 @@ export default function ProfileClient() { - @@ -534,7 +534,7 @@ export default function ProfileClient() { )} setSettingsForm((current) => ({ ...current, email }))} type="email" /> setSettingsForm((current) => ({ ...current, phone }))} type="tel" /> - @@ -598,7 +598,7 @@ function EmptyPanel({

{title}

{description}

{actionHref && actionText && ( - + {actionText} )} diff --git a/apps/website/src/components/TrackOrderClient.tsx b/apps/website/src/components/TrackOrderClient.tsx index 75618bb..c36483d 100644 --- a/apps/website/src/components/TrackOrderClient.tsx +++ b/apps/website/src/components/TrackOrderClient.tsx @@ -174,7 +174,7 @@ export default function TrackOrderClient() {

Order

{orderLabel(id)}

-
+
diff --git a/apps/website/src/components/WishlistClient.tsx b/apps/website/src/components/WishlistClient.tsx index a28bac9..42fbf92 100644 --- a/apps/website/src/components/WishlistClient.tsx +++ b/apps/website/src/components/WishlistClient.tsx @@ -21,7 +21,7 @@ export default function WishlistClient() {

Browse Shop diff --git a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx index 9f92d2b..fa13501 100644 --- a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx +++ b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx @@ -80,7 +80,7 @@ function AnnouncementBar({ payload, lang }: { payload: Record, return (
, lang
{tagline && ( -

+

{tagline}

)} @@ -209,10 +209,10 @@ function CategoriesSection({ className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105" />
-
+
{name} {category._count && ( - + {category._count.products} {productsLabel[resolvedLang] ?? productsLabel.en} )} @@ -290,7 +290,7 @@ function BannerSection({ payload, lang }: { payload: Record, la
{title &&

{title}

} - {description &&

{description}

} + {description &&

{description}

} {buttonText && {buttonText}}
@@ -332,8 +332,8 @@ function NewsletterSection({ payload, lang }: { payload: Record
-

{title}

- {description &&

{description}

} +

{title}

+ {description &&

{description}

}
@@ -381,7 +381,7 @@ function EditorialTileSection({ payload, lang }: { payload: Record {description &&

{description}

} {buttonText && buttonLink && ( - + {buttonText} )} @@ -403,7 +403,7 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record {title && (
-

{renderAccentTitle(title, 'ui-accent-text not-italic')}

+

{renderAccentTitle(title, 'ui-accent-text not-italic')}

)} @@ -485,9 +485,9 @@ function HeroArticleSection({ payload, lang }: { payload: Record {category &&

{category}

}

{title}

- {subtitle &&

{subtitle}

} + {subtitle &&

{subtitle}

} {(author || date) && ( -

+

{[author && `${authorPrefix[resolvedLang] ?? authorPrefix.en} ${author}`, date].filter(Boolean).join(' / ')}

)} diff --git a/apps/website/src/components/navigation/MobileDrawer.tsx b/apps/website/src/components/navigation/MobileDrawer.tsx index 6b135cd..0d8d5be 100644 --- a/apps/website/src/components/navigation/MobileDrawer.tsx +++ b/apps/website/src/components/navigation/MobileDrawer.tsx @@ -213,7 +213,7 @@ export function MobileDrawer({ Shop Now