From 04ec151a48f3f73790549f3f485676c70eeaef78 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 1 Mar 2026 20:21:07 +0000
Subject: [PATCH] [jules] style: Add consistent hover/focus states to buttons

Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>
---
 .Jules/changelog.md          |  3 +++
 .Jules/todo.md               |  3 ++-
 web/components/ui/Button.tsx | 12 ++++++------
 web/components/ui/Input.tsx  |  6 +++---
 web/components/ui/Modal.tsx  |  2 +-
 web/components/ui/Toast.tsx  |  2 +-
 6 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/.Jules/changelog.md b/.Jules/changelog.md
index 11fc864e..d2cef696 100644
--- a/.Jules/changelog.md
+++ b/.Jules/changelog.md
@@ -6,6 +6,9 @@
 
 ## [Unreleased]
 
+### Changed
+- **Button Focus States:** Added consistent `focus-visible` styles to `Button` component and inline buttons (`Modal`, `Toast`, `Input`) for better keyboard navigation across both Neobrutalism and Glassmorphism themes.
+
 ### Added
 - **Password Strength Meter:** Added a visual password strength indicator to the signup form.
   - **Features:**
diff --git a/.Jules/todo.md b/.Jules/todo.md
index ebb0c7a5..c52bcbb8 100644
--- a/.Jules/todo.md
+++ b/.Jules/todo.md
@@ -78,7 +78,8 @@
 
 ### Web
 
-- [ ] **[style]** Consistent hover/focus states across all buttons
+- [x] **[style]** Consistent hover/focus states across all buttons
+  - Completed: 2026-03-01
   - Files: `web/components/ui/Button.tsx`, usage across pages
   - Context: Ensure all buttons have proper hover + focus-visible styles
   - Impact: Professional feel, keyboard users know where they are
diff --git a/web/components/ui/Button.tsx b/web/components/ui/Button.tsx
index f80c514c..e4678e53 100644
--- a/web/components/ui/Button.tsx
+++ b/web/components/ui/Button.tsx
@@ -20,7 +20,7 @@ export const Button: React.FC<ButtonProps> = ({
 }) => {
   const { style } = useTheme();
 
-  const baseStyles = "transition-all duration-200 font-bold flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed";
+  const baseStyles = "transition-all duration-200 font-bold flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900";
 
   const sizeStyles = {
     sm: "px-3 py-1.5 text-sm",
@@ -31,7 +31,7 @@ export const Button: React.FC<ButtonProps> = ({
   let themeStyles = "";
 
   if (style === THEMES.NEOBRUTALISM) {
-    themeStyles = "border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none rounded-none uppercase tracking-wider font-mono";
+    themeStyles = "border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none rounded-none uppercase tracking-wider font-mono focus-visible:ring-black dark:focus-visible:ring-white";
 
     if (variant === 'primary') themeStyles += " bg-neo-main text-white";
     if (variant === 'secondary') themeStyles += " bg-neo-second text-black";
@@ -42,10 +42,10 @@ export const Button: React.FC<ButtonProps> = ({
     // Glassmorphism
     themeStyles = "rounded-xl backdrop-blur-md border border-white/20 shadow-lg hover:shadow-xl active:scale-95";
 
-    if (variant === 'primary') themeStyles += " bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-blue-500/30";
-    if (variant === 'secondary') themeStyles += " bg-white/10 text-white hover:bg-white/20";
-    if (variant === 'danger') themeStyles += " bg-gradient-to-r from-red-500 to-pink-600 text-white shadow-red-500/30";
-    if (variant === 'ghost') themeStyles += " bg-transparent border-none shadow-none hover:bg-white/10 text-current";
+    if (variant === 'primary') themeStyles += " bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-blue-500/30 focus-visible:ring-blue-500";
+    if (variant === 'secondary') themeStyles += " bg-white/10 text-white hover:bg-white/20 focus-visible:ring-white/50";
+    if (variant === 'danger') themeStyles += " bg-gradient-to-r from-red-500 to-pink-600 text-white shadow-red-500/30 focus-visible:ring-red-500";
+    if (variant === 'ghost') themeStyles += " bg-transparent border-none shadow-none hover:bg-white/10 text-current focus-visible:ring-gray-400";
   }
 
   return (
diff --git a/web/components/ui/Input.tsx b/web/components/ui/Input.tsx
index 80e7fff2..1ef90c25 100644
--- a/web/components/ui/Input.tsx
+++ b/web/components/ui/Input.tsx
@@ -46,10 +46,10 @@ export const Input: React.FC<InputProps> = ({ label, error, className = '', type
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className={`absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-md transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+            className={`absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-md transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 ${
               style === THEMES.NEOBRUTALISM
-                ? (mode === 'dark' ? 'text-white opacity-80 focus:ring-white' : 'text-black opacity-60 focus:ring-black')
-                : 'text-white/60 hover:text-white focus:ring-white/50'
+                ? (mode === 'dark' ? 'text-white opacity-80 focus-visible:ring-white' : 'text-black opacity-60 focus-visible:ring-black')
+                : 'text-white/60 hover:text-white focus-visible:ring-white/50'
             }`}
             aria-label={showPassword ? "Hide password" : "Show password"}
           >
diff --git a/web/components/ui/Modal.tsx b/web/components/ui/Modal.tsx
index b7d8fcba..f842d0dc 100644
--- a/web/components/ui/Modal.tsx
+++ b/web/components/ui/Modal.tsx
@@ -66,7 +66,7 @@ export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children,
             {/* Header */}
             <div className={`p-6 flex justify-between items-center ${style === THEMES.NEOBRUTALISM ? 'border-b-2 border-black bg-neo-main text-white' : 'border-b border-white/10 bg-white/5'}`}>
               <h3 id={titleId} className={`text-2xl font-bold ${style === THEMES.NEOBRUTALISM ? 'uppercase font-mono tracking-tighter' : ''}`}>{title}</h3>
-              <button type="button" onClick={onClose} className="hover:rotate-90 transition-transform duration-200" aria-label="Close modal">
+              <button type="button" onClick={onClose} className="hover:rotate-90 transition-transform duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 rounded-sm" aria-label="Close modal">
                 <X size={24} />
               </button>
             </div>
diff --git a/web/components/ui/Toast.tsx b/web/components/ui/Toast.tsx
index 056ebb8d..68284502 100644
--- a/web/components/ui/Toast.tsx
+++ b/web/components/ui/Toast.tsx
@@ -57,7 +57,7 @@ const ToastItem: React.FC<{ toast: Toast }> = ({ toast }) => {
       <button
         type="button"
         onClick={() => removeToast(toast.id)}
-        className="shrink-0 hover:opacity-70 transition-opacity"
+        className="shrink-0 hover:opacity-70 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 rounded-sm"
         aria-label="Close notification"
       >
         <X className="w-4 h-4" />