From ddf1f13d7a00597f30271ec6d9d3a2b881821c52 Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Wed, 1 Oct 2025 18:22:33 +0200 Subject: [PATCH] style(web): add enhanced input styling for better UX Add comprehensive input styling for text, email, password, and search inputs with focus states and error state handling. Improves visual feedback and accessibility for form inputs --- web/src/app/globals.css | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/web/src/app/globals.css b/web/src/app/globals.css index 15d912d9..8dd8f6e4 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -242,3 +242,31 @@ @apply backdrop-blur-sm; } } + +/* Enhanced Input Styling */ +@layer components { + input[type="text"], + input[type="email"], + input[type="password"], + input[type="search"] { + @apply bg-background text-foreground; + } + + input[type="text"]:focus, + input[type="email"]:focus, + input[type="password"]:focus, + input[type="search"]:focus { + @apply ring-2 ring-ring ring-offset-2 ring-offset-background; + } + + /* Error state for inputs */ + input[aria-invalid="true"], + input.error { + @apply border-destructive bg-destructive/5 text-foreground placeholder:text-muted-foreground; + } + + input[aria-invalid="true"]:focus, + input.error:focus { + @apply ring-2 ring-destructive ring-offset-2 ring-offset-background; + } +}