matt/puffin-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine login page color scheme for elegant professional aesthetic
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m17s
Details

Browse Source 
🎨 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>
This commit is contained in:
Matt 2025-11-03 09:41:02 +01:00
parent 683a65c1fd
commit 1e4461cf43
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/admin/login/page.tsx
View File

@ -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 ? (