From 1e4461cf43f7e5bf47e2d821440b4bc8ecfbb053 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Mon, 3 Nov 2025 09:41:02 +0100
Subject: [PATCH] Refine login page color scheme for elegant professional
 aesthetic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 Color harmony improvements for better visual balance:

## Changes Made
- **Icons**: User/Lock icons changed from bright maritime-teal to subdued deep-sea-blue/60
- **Input Focus**: Focus rings changed from bright teal to elegant deep-sea-blue/50
- **Sign In Button**: Simplified from teal-green gradient to solid deep-sea-blue
- **Error Messages**: More subdued red-900/30 background for better harmony

## Result
- More cohesive professional appearance
- Better contrast balance against Monaco harbor background
- Elegant, understated design that doesn't compete with background
- WCAG AA compliant contrast ratios maintained

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/admin/login/page.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/admin/login/page.tsx b/app/admin/login/page.tsx
index 849c2f1..1285f11 100644
--- a/app/admin/login/page.tsx
+++ b/app/admin/login/page.tsx
@@ -112,7 +112,7 @@ export default function AdminLogin() {
               <motion.div
                 initial={{ opacity: 0, y: -10 }}
                 animate={{ opacity: 1, y: 0 }}
-                className="bg-red-500/20 border border-red-500/50 rounded-lg p-3 text-red-200 text-sm"
+                className="bg-red-900/30 border border-red-800/60 rounded-lg p-3 text-red-100 text-sm"
               >
                 {error}
               </motion.div>
@@ -125,14 +125,14 @@ export default function AdminLogin() {
               </label>
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <User className="h-5 w-5 text-maritime-teal" />
+                  <User className="h-5 w-5 text-deep-sea-blue/60" />
                 </div>
                 <input
                   id="username"
                   type="text"
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
-                  className="w-full pl-10 pr-4 py-3 bg-white border border-light-gray-border rounded-lg text-deep-sea-blue placeholder-deep-sea-blue/40 focus:outline-none focus:ring-2 focus:ring-maritime-teal focus:border-maritime-teal transition-all"
+                  className="w-full pl-10 pr-4 py-3 bg-white border border-light-gray-border rounded-lg text-deep-sea-blue placeholder-deep-sea-blue/40 focus:outline-none focus:ring-2 focus:ring-deep-sea-blue/50 focus:border-deep-sea-blue transition-all"
                   placeholder="Enter your username"
                   required
                   disabled={isLoading}
@@ -147,14 +147,14 @@ export default function AdminLogin() {
               </label>
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <Lock className="h-5 w-5 text-maritime-teal" />
+                  <Lock className="h-5 w-5 text-deep-sea-blue/60" />
                 </div>
                 <input
                   id="password"
                   type="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="w-full pl-10 pr-4 py-3 bg-white border border-light-gray-border rounded-lg text-deep-sea-blue placeholder-deep-sea-blue/40 focus:outline-none focus:ring-2 focus:ring-maritime-teal focus:border-maritime-teal transition-all"
+                  className="w-full pl-10 pr-4 py-3 bg-white border border-light-gray-border rounded-lg text-deep-sea-blue placeholder-deep-sea-blue/40 focus:outline-none focus:ring-2 focus:ring-deep-sea-blue/50 focus:border-deep-sea-blue transition-all"
                   placeholder="Enter your password"
                   required
                   disabled={isLoading}
@@ -170,8 +170,8 @@ export default function AdminLogin() {
               whileTap={{ scale: isLoading ? 1 : 0.98 }}
               className={`w-full py-3 px-4 rounded-lg font-semibold text-white shadow-lg transition-all ${
                 isLoading
-                  ? 'bg-maritime-teal/50 cursor-not-allowed'
-                  : 'bg-gradient-to-r from-maritime-teal to-sea-green hover:from-sea-green hover:to-maritime-teal'
+                  ? 'bg-deep-sea-blue/50 cursor-not-allowed'
+                  : 'bg-deep-sea-blue hover:bg-deep-sea-blue/90'
               }`}
             >
               {isLoading ? (