From dd5ece1c5d3cc912e9b3fdbb696ff4615a273675 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 20 Jun 2026 21:59:36 -0400
Subject: [PATCH] x

---
 apps/admin/src/index.css                    | 21 +++++++-
 apps/admin/src/pages/SystemSettingsPage.tsx | 54 ++++++++++-----------
 2 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/apps/admin/src/index.css b/apps/admin/src/index.css
index 1fcfc94..cc43af3 100644
--- a/apps/admin/src/index.css
+++ b/apps/admin/src/index.css
@@ -6,6 +6,8 @@
   --color-night-900: #0B0C10;
   --color-night-800: #1F2833;
   --color-night-700: #45A29E;
+  --color-night-850: #121820;
+  --color-night-750: #2A3440;
   --color-cyan-glow: #66FCF1;
   --color-silver-metallic: #C5C6C7;
   --color-slate-dark: #1e293b;
@@ -24,7 +26,24 @@
 
 @layer components {
   .admin-card {
-    @apply bg-night-900/50 backdrop-blur-md border border-white/5 rounded-xl p-6 transition-all duration-300;
+    @apply bg-night-900/60 backdrop-blur-md border border-white/10 rounded-xl p-6 transition-all duration-300;
+  }
+
+  .admin-input {
+    @apply block rounded-lg border border-night-750 bg-night-850 px-4 py-3 text-sm text-white shadow-inner shadow-black/20 outline-none transition-all duration-200 placeholder:text-slate-500;
+  }
+
+  .admin-input:hover {
+    @apply border-slate-500 bg-slate-900;
+  }
+
+  .admin-input:focus,
+  .admin-input:focus-visible {
+    @apply border-cyan-glow bg-slate-900 ring-2 ring-cyan-glow/25;
+  }
+
+  .admin-input:disabled {
+    @apply cursor-not-allowed border-white/10 bg-night-900 text-slate-500 opacity-70;
   }
   
   .admin-card-hover {
diff --git a/apps/admin/src/pages/SystemSettingsPage.tsx b/apps/admin/src/pages/SystemSettingsPage.tsx
index 0ab3bb1..6cc7672 100644
--- a/apps/admin/src/pages/SystemSettingsPage.tsx
+++ b/apps/admin/src/pages/SystemSettingsPage.tsx
@@ -102,14 +102,14 @@ export default function SystemSettingsPage() {
     <div className="max-w-4xl space-y-8 animate-fade-in">
       <div className="space-y-1">
         <h1 className="text-3xl font-bold">System Settings</h1>
-        <p className="text-slate-500 text-sm">Configure shipping rules and payment banking details.</p>
+        <p className="text-slate-400 text-sm">Configure shipping rules and payment banking details.</p>
       </div>
 
       <form onSubmit={handleSave} className="space-y-8">
         
         {/* Shipping Settings */}
         <div className="admin-card p-8 space-y-6">
-          <div className="flex items-center gap-3 border-b border-white/5 pb-4">
+          <div className="flex items-center gap-3 border-b border-white/10 pb-4">
             <div className="p-2 bg-cyan-glow/10 rounded-lg">
               <Truck className="w-5 h-5 text-cyan-glow" />
             </div>
@@ -117,7 +117,7 @@ export default function SystemSettingsPage() {
           </div>
 
           <div className="space-y-2">
-            <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Flat Rate Shipping Fee (THB)</label>
+            <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Flat Rate Shipping Fee (THB)</label>
             <input 
               type="number" 
               required
@@ -126,13 +126,13 @@ export default function SystemSettingsPage() {
               onChange={e => setShippingFee(e.target.value)}
               className="admin-input w-full max-w-sm"
             />
-            <p className="text-[10px] text-slate-500">This fee will be applied uniformly to all orders during checkout.</p>
+            <p className="text-[10px] text-slate-400">This fee will be applied uniformly to all orders during checkout.</p>
           </div>
         </div>
 
         {/* Loyalty Points Settings */}
         <div className="admin-card p-8 space-y-6">
-          <div className="flex items-center gap-3 border-b border-white/5 pb-4">
+          <div className="flex items-center gap-3 border-b border-white/10 pb-4">
             <div className="p-2 bg-purple-500/10 rounded-lg">
               <span className="text-xl">⭐️</span>
             </div>
@@ -140,7 +140,7 @@ export default function SystemSettingsPage() {
           </div>
 
           <div className="space-y-2">
-            <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Points Earning Rate</label>
+            <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Points Earning Rate</label>
             <div className="flex items-center gap-4">
               <span className="text-sm font-bold text-slate-400">1 THB spent =</span>
               <input 
@@ -154,13 +154,13 @@ export default function SystemSettingsPage() {
               />
               <span className="text-sm font-bold text-slate-400">Points</span>
             </div>
-            <p className="text-[10px] text-slate-500">For example, if you set 1.0, spending 100 THB gives 100 points. If you set 0.5, spending 100 THB gives 50 points.</p>
+            <p className="text-[10px] text-slate-400">For example, if you set 1.0, spending 100 THB gives 100 points. If you set 0.5, spending 100 THB gives 50 points.</p>
           </div>
         </div>
 
         {/* Bank Settings */}
         <div className="admin-card p-8 space-y-6">
-          <div className="flex items-center gap-3 border-b border-white/5 pb-4">
+          <div className="flex items-center gap-3 border-b border-white/10 pb-4">
             <div className="p-2 bg-cyan-glow/10 rounded-lg">
               <Landmark className="w-5 h-5 text-cyan-glow" />
             </div>
@@ -169,7 +169,7 @@ export default function SystemSettingsPage() {
 
           <div className="grid md:grid-cols-2 gap-6">
             <div className="space-y-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Bank Name</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Bank Name</label>
               <input 
                 type="text" 
                 required
@@ -180,7 +180,7 @@ export default function SystemSettingsPage() {
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Account Number</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Account Number</label>
               <input 
                 type="text" 
                 required
@@ -191,7 +191,7 @@ export default function SystemSettingsPage() {
               />
             </div>
             <div className="space-y-2 md:col-span-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Account Holder Name</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Account Holder Name</label>
               <input 
                 type="text" 
                 required
@@ -206,7 +206,7 @@ export default function SystemSettingsPage() {
 
         {/* Brand & Footer Settings */}
         <div className="admin-card p-8 space-y-6">
-          <div className="flex items-center gap-3 border-b border-white/5 pb-4">
+          <div className="flex items-center gap-3 border-b border-white/10 pb-4">
             <div className="p-2 bg-purple-500/10 rounded-lg">
               <span className="text-xl">✨</span>
             </div>
@@ -215,7 +215,7 @@ export default function SystemSettingsPage() {
 
           <div className="space-y-4">
             <div className="space-y-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Brand Name</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Brand Name</label>
               <input
                 type="text"
                 required
@@ -224,11 +224,11 @@ export default function SystemSettingsPage() {
                 className="admin-input w-full max-w-sm"
                 placeholder="HomAroma"
               />
-              <p className="text-[10px] text-slate-500">This name is used by the website and spa header/footer as the brand display name.</p>
+              <p className="text-[10px] text-slate-400">This name is used by the website and spa header/footer as the brand display name.</p>
             </div>
 
             <div className="space-y-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Logo URL</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Logo URL</label>
               <input
                 type="url"
                 value={logoUrl}
@@ -236,7 +236,7 @@ export default function SystemSettingsPage() {
                 className="admin-input w-full max-w-sm"
                 placeholder="https://example.com/logo.png"
               />
-              <p className="text-[10px] text-slate-500">If provided, this image will be displayed instead of the text brand name in headers.</p>
+              <p className="text-[10px] text-slate-400">If provided, this image will be displayed instead of the text brand name in headers.</p>
               {logoUrl && (
                 <div className="mt-2 p-2 bg-black/20 rounded-md inline-block">
                   <img src={logoUrl} alt="Logo Preview" className="h-8 object-contain" />
@@ -245,7 +245,7 @@ export default function SystemSettingsPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Footer Description</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Footer Description</label>
               <textarea 
                 value={footerDescription}
                 onChange={e => setFooterDescription(e.target.value)}
@@ -256,7 +256,7 @@ export default function SystemSettingsPage() {
             
             <div className="grid md:grid-cols-3 gap-6">
               <div className="space-y-2">
-                <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Facebook URL</label>
+                <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Facebook URL</label>
                 <input 
                   type="text" 
                   value={facebookUrl}
@@ -266,7 +266,7 @@ export default function SystemSettingsPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Instagram URL</label>
+                <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Instagram URL</label>
                 <input 
                   type="text" 
                   value={instagramUrl}
@@ -276,7 +276,7 @@ export default function SystemSettingsPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-xs uppercase font-bold tracking-widest text-slate-500">TikTok URL</label>
+                <label className="text-xs uppercase font-bold tracking-widest text-slate-400">TikTok URL</label>
                 <input 
                   type="text" 
                   value={tiktokUrl}
@@ -289,7 +289,7 @@ export default function SystemSettingsPage() {
             
             <div className="grid md:grid-cols-2 gap-6 mt-6">
               <div className="space-y-2">
-                <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Support & Legal Heading</label>
+                <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Support & Legal Heading</label>
                 <input 
                   type="text" 
                   value={footerSupportHeading}
@@ -299,7 +299,7 @@ export default function SystemSettingsPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Copyright Text</label>
+                <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Copyright Text</label>
                 <input 
                   type="text" 
                   value={footerCopyrightText}
@@ -314,7 +314,7 @@ export default function SystemSettingsPage() {
 
         {/* Newsletter Settings */}
         <div className="admin-card p-8 space-y-6">
-          <div className="flex items-center gap-3 border-b border-white/5 pb-4">
+          <div className="flex items-center gap-3 border-b border-white/10 pb-4">
             <div className="p-2 bg-cyan-glow/10 rounded-lg">
               <span className="text-xl">📧</span>
             </div>
@@ -323,7 +323,7 @@ export default function SystemSettingsPage() {
 
           <div className="grid md:grid-cols-2 gap-6">
             <div className="space-y-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Newsletter Title</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Newsletter Title</label>
               <input 
                 type="text" 
                 value={newsletterTitle}
@@ -333,7 +333,7 @@ export default function SystemSettingsPage() {
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Value Proposition (Description)</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Value Proposition (Description)</label>
               <input 
                 type="text" 
                 value={newsletterDescription}
@@ -343,7 +343,7 @@ export default function SystemSettingsPage() {
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Input Placeholder Text</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Input Placeholder Text</label>
               <input 
                 type="text" 
                 value={newsletterPlaceholder}
@@ -353,7 +353,7 @@ export default function SystemSettingsPage() {
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Submit Button Text</label>
+              <label className="text-xs uppercase font-bold tracking-widest text-slate-400">Submit Button Text</label>
               <input 
                 type="text" 
                 value={newsletterButtonText}