fix: theming v1

src/features/payments/components/TrustStrip.tsx

@@ -2,7 +2,7 @@
 
 export function TrustStrip({ location = 'panel' }: { location?: 'panel' | 'sheet' }) {
   return (
-    <div className={`text-[10px] ${location === 'sheet' ? 'mt-2' : ''} text-black/50 dark:text-white/50 flex items-center gap-2`}>
+    <div className={`text-[10px] ${location === 'sheet' ? 'mt-2' : ''} text-black/50 flex items-center gap-2`}>
       <span aria-hidden>🔒</span>
       <span>Secure payments by Midtrans</span>
       <span aria-hidden className="ml-auto flex items-center gap-1">

src/pages/CheckoutPage.tsx

@@ -78,7 +78,7 @@ export function CheckoutPage() {
           <div className="space-y-3">
             <div className="text-sm font-medium">Konfirmasi data checkout</div>
             <label className="block">
-              <div className="text-xs text-black/60 dark:text-white/60">Nama</div>
+              <div className="text-xs text-black/60">Nama</div>
               <input
                 type="text"
                 className="w-full rounded border px-3 py-2"
@@ -87,7 +87,7 @@ export function CheckoutPage() {
               />
             </label>
             <label className="block">
-              <div className="text-xs text-black/60 dark:text-white/60">Email atau HP</div>
+              <div className="text-xs text-black/60">Email atau HP</div>
               <input
                 type="text"
                 className="w-full rounded border px-3 py-2"
@@ -96,7 +96,7 @@ export function CheckoutPage() {
               />
             </label>
             <label className="block">
-              <div className="text-xs text-black/60 dark:text-white/60">Alamat</div>
+              <div className="text-xs text-black/60">Alamat</div>
               <input
                 type="text"
                 className="w-full rounded border px-3 py-2"
@@ -105,7 +105,7 @@ export function CheckoutPage() {
               />
             </label>
             <label className="block">
-              <div className="text-xs text-black/60 dark:text-white/60">Catatan</div>
+              <div className="text-xs text-black/60 ">Catatan</div>
               <textarea
                 className="w-full rounded border px-3 py-2"
                 value={form.notes}
@@ -114,7 +114,7 @@ export function CheckoutPage() {
             </label>
             <div className="pt-2 flex gap-2">
               <Button
-                variant="primary"
+                variant="secondary"
                 className="w-full"
                 aria-busy={isBusy}
                 disabled={isBusy}
@@ -159,12 +159,12 @@ export function CheckoutPage() {
               disabled={locked}
               enabled={runtimeCfg?.paymentToggles
                 ? {
-                    bank_transfer: runtimeCfg.paymentToggles.bank_transfer,
+                  bank_transfer: runtimeCfg.paymentToggles.bank_transfer,
-                    credit_card: runtimeCfg.paymentToggles.credit_card,
+                  credit_card: runtimeCfg.paymentToggles.credit_card,
-                    gopay: runtimeCfg.paymentToggles.gopay,
+                  gopay: runtimeCfg.paymentToggles.gopay,
-                    cstore: runtimeCfg.paymentToggles.cstore,
+                  cstore: runtimeCfg.paymentToggles.cstore,
-                    cpay: !!runtimeCfg.paymentToggles.cpay,
+                  cpay: !!runtimeCfg.paymentToggles.cpay,
-                  }
+                }
                 : undefined}
               renderPanel={(m) => {
                 const methodEnabled = runtimeCfg?.paymentToggles ?? defaultEnabled()
@@ -180,7 +180,7 @@ export function CheckoutPage() {
                     <div className="space-y-2" aria-live="polite">
                       <div className="text-xs text-black/60 dark:text-white/60">Pilih bank untuk membuat Virtual Account</div>
                       <div className={`grid grid-cols-3 gap-2 ${isBusy ? 'pointer-events-none opacity-60' : ''}`}>
-                        {(['bca','bni','bri','cimb','mandiri','permata'] as BankKey[]).map((bk) => (
+                        {(['bca', 'bni', 'bri', 'cimb', 'mandiri', 'permata'] as BankKey[]).map((bk) => (
                           <button
                             key={bk}
                             type="button"
@@ -210,7 +210,7 @@ export function CheckoutPage() {
                     <div className="space-y-2" aria-live="polite">
                       <div className="text-xs text-black/60 dark:text-white/60">Pilih toko untuk membuat kode pembayaran</div>
                       <div className={`grid grid-cols-2 gap-2 ${isBusy ? 'pointer-events-none opacity-60' : ''}`}>
-                        {(['alfamart','indomaret'] as const).map((st) => (
+                        {(['alfamart', 'indomaret'] as const).map((st) => (
                           <button
                             key={st}
                             type="button"

src/pages/DemoStorePage.tsx

@@ -12,14 +12,14 @@ export function DemoStorePage() {
         <div className="flex items-start justify-between gap-4">
           <div>
             <div className="text-sm font-medium">Produk: T-Shirt Hitam</div>
-            <div className="text-xs text-black/60 dark:text-white/60">Ukuran: M • Bahan: Cotton</div>
+            <div className="text-xs text-black/60">Ukuran: M • Bahan: Cotton</div>
             <div className="mt-2 text-lg font-semibold">Rp 3.500.000</div>
           </div>
           <div className="w-24 h-24 rounded bg-black/10 dark:bg-white/10" aria-hidden />
         </div>
         <div className="mt-4">
           <Button
-            variant="primary"
+            variant="secondary"
             className="w-full"
             aria-busy={busy}
             disabled={busy}