From 5c3e0d614012ee3bd6a33f821091827c80be8dcd Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 22 Mar 2026 20:06:09 +0000
Subject: [PATCH] [jules] style: Add consistent focus-visible states to buttons

Added consistent `focus-visible` styling (ring and ring-offset classes) to all interactive `<button>` elements across the web application.

- Updated `Button.tsx` component to support both NEOBRUTALISM and GLASSMORPHISM themes along with dark mode (`dark:focus-visible:ring-white`).
- Grepped and updated raw button elements throughout major page components (`Auth`, `Dashboard`, `Friends`, `GroupDetails`, `Profile`, `SplitwiseGroupSelection`, `SplitwiseImport`, and `Modal`).
- Logged task completion in `.Jules/todo.md` and `.Jules/changelog.md`.

Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>
---
 .Jules/changelog.md                   |  1 +
 .Jules/todo.md                        | 11 ++++++-----
 web/components/ui/Button.tsx          | 12 ++++++------
 web/components/ui/Modal.tsx           |  2 +-
 web/pages/Auth.tsx                    |  4 ++--
 web/pages/Dashboard.tsx               | 12 ++++++------
 web/pages/Friends.tsx                 | 14 +++++++-------
 web/pages/GroupDetails.tsx            |  8 ++++----
 web/pages/Profile.tsx                 |  2 +-
 web/pages/SplitwiseGroupSelection.tsx |  6 +++---
 web/pages/SplitwiseImport.tsx         |  2 +-
 11 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/.Jules/changelog.md b/.Jules/changelog.md
index 11fc864e..08c5e90e 100644
--- a/.Jules/changelog.md
+++ b/.Jules/changelog.md
@@ -123,3 +123,4 @@
 - `.jules/todo.md`
 - `.jules/knowledge.md`
 - `.jules/changelog.md`
+\n- **2026-02-12:** `[style]` Added consistent focus-visible states to all buttons across web app, supporting NEOBRUTALISM, GLASSMORPHISM, and dark mode. Modified `Button.tsx` and raw button elements.
diff --git a/.Jules/todo.md b/.Jules/todo.md
index ebb0c7a5..33fd7a20 100644
--- a/.Jules/todo.md
+++ b/.Jules/todo.md
@@ -78,11 +78,12 @@
 
 ### Web
 
-- [ ] **[style]** Consistent hover/focus states across all buttons
-  - 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
-  - Size: ~35 lines
+- [x] **[style]** Consistent hover/focus states across all buttons
+  - Completed: 2026-02-12
+  - Files: `web/components/ui/Button.tsx`, usage across pages (`web/pages/Dashboard.tsx`, `web/pages/Friends.tsx`, `web/pages/GroupDetails.tsx`, `web/pages/Profile.tsx`, `web/pages/Auth.tsx`, etc)
+  - Context: Added focus-visible styles (ring and ring-offset) supporting both NEOBRUTALISM and GLASSMORPHISM themes, including dark mode support.
+  - Impact: Professional feel, clear visual feedback for keyboard users making the app more accessible.
+  - Size: ~35 lines modified across multiple files.
   - Added: 2026-01-01
 
 ### Mobile
diff --git a/web/components/ui/Button.tsx b/web/components/ui/Button.tsx
index f80c514c..d795d6d5 100644
--- a/web/components/ui/Button.tsx
+++ b/web/components/ui/Button.tsx
@@ -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:outline-none focus-visible:ring-4 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900";
 
     if (variant === 'primary') themeStyles += " bg-neo-main text-white";
     if (variant === 'secondary') themeStyles += " bg-neo-second text-black";
@@ -40,12 +40,12 @@ export const Button: React.FC<ButtonProps> = ({
 
   } else {
     // Glassmorphism
-    themeStyles = "rounded-xl backdrop-blur-md border border-white/20 shadow-lg hover:shadow-xl active:scale-95";
+    themeStyles = "rounded-xl backdrop-blur-md border border-white/20 shadow-lg hover:shadow-xl active:scale-95 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
 
-    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-white/50";
   }
 
   return (
diff --git a/web/components/ui/Modal.tsx b/web/components/ui/Modal.tsx
index b7d8fcba..1d319e19 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-white" aria-label="Close modal">
                 <X size={24} />
               </button>
             </div>
diff --git a/web/pages/Auth.tsx b/web/pages/Auth.tsx
index 5f0efbee..3c7cc332 100644
--- a/web/pages/Auth.tsx
+++ b/web/pages/Auth.tsx
@@ -211,7 +211,7 @@ export const Auth = () => {
               type="button"
               onClick={handleGoogleSignIn}
               disabled={googleLoading}
-              className={`w-full flex items-center justify-center gap-3 p-3 font-bold transition-all ${isNeo
+              className={`w-full flex items-center justify-center gap-3 p-3 font-bold transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${isNeo ? "focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900" : "focus-visible:ring-blue-500 focus-visible:ring-offset-transparent"} ${isNeo
                 ? 'bg-white 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)] rounded-none'
                 : 'bg-white text-black hover:bg-gray-50 border border-gray-200 shadow-sm rounded-xl'
                 }`}
@@ -330,7 +330,7 @@ export const Auth = () => {
                   setFieldErrors({});
                   setError('');
                 }}
-                className="text-sm font-bold hover:underline opacity-70 hover:opacity-100 transition-opacity"
+                className="text-sm font-bold hover:underline opacity-70 hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
               >
                 {isLogin
                   ? "Don't have an account? Sign Up"
diff --git a/web/pages/Dashboard.tsx b/web/pages/Dashboard.tsx
index 7670c757..0a8e7b49 100644
--- a/web/pages/Dashboard.tsx
+++ b/web/pages/Dashboard.tsx
@@ -297,9 +297,9 @@ export const Dashboard = () => {
                 key={group._id}
                 type="button"
                 onClick={() => navigate(`/groups/${group._id}`)}
-                className={`w-full p-4 flex items-center justify-between transition-all ${style === THEMES.NEOBRUTALISM
-                    ? 'bg-white border-2 border-black hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1'
-                    : 'bg-white/50 backdrop-blur-sm rounded-lg hover:bg-white/80'
+                className={`w-full p-4 flex items-center justify-between transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${style === THEMES.NEOBRUTALISM
+                    ? 'bg-white border-2 border-black hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1 focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900'
+                    : 'bg-white/50 backdrop-blur-sm rounded-lg hover:bg-white/80 focus-visible:ring-blue-500 focus-visible:ring-offset-transparent'
                   }`}
               >
                 <div className="text-left">
@@ -338,9 +338,9 @@ export const Dashboard = () => {
                   key={groupSum.group_id}
                   type="button"
                   onClick={() => navigate(`/groups/${groupSum.group_id}`)}
-                  className={`p-4 text-left transition-all ${style === THEMES.NEOBRUTALISM
-                      ? 'bg-white border-2 border-black hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1'
-                      : 'bg-white/50 backdrop-blur-sm rounded-lg hover:bg-white/80'
+                  className={`p-4 text-left transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${style === THEMES.NEOBRUTALISM
+                      ? 'bg-white border-2 border-black hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1 focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900'
+                      : 'bg-white/50 backdrop-blur-sm rounded-lg hover:bg-white/80 focus-visible:ring-blue-500 focus-visible:ring-offset-transparent'
                     }`}
                 >
                   <p className="font-bold text-sm truncate">{groupSum.group_name}</p>
diff --git a/web/pages/Friends.tsx b/web/pages/Friends.tsx
index 039eb5db..f81a6d58 100644
--- a/web/pages/Friends.tsx
+++ b/web/pages/Friends.tsx
@@ -211,9 +211,9 @@ export const Friends = () => {
           <button
             type="button"
             onClick={() => window.location.reload()}
-            className={`px-4 py-2 font-bold text-sm ${isNeo
-              ? 'bg-black text-white hover:bg-gray-800 rounded-none'
-              : 'bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg'
+            className={`px-4 py-2 font-bold text-sm focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${isNeo
+              ? 'bg-black text-white hover:bg-gray-800 rounded-none focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900'
+              : 'bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg focus-visible:ring-red-500 focus-visible:ring-offset-transparent'
               }`}
           >
             Retry
@@ -253,7 +253,7 @@ export const Friends = () => {
                   onClick={() => toggleExpand(friend.id)}
                   aria-expanded={expandedId === friend.id}
                   aria-label={`${friend.userName}, ${friend.netBalance > 0 ? 'owes you' : friend.netBalance < 0 ? 'you owe' : 'settled'} ${formatPrice(friend.netBalance)}`}
-                  className="w-full p-6 text-left cursor-pointer">
+                  className={`w-full p-6 text-left cursor-pointer focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${isNeo ? 'focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900' : 'focus-visible:ring-blue-500 focus-visible:ring-offset-transparent'}`}>
 
                   <div className="flex items-start justify-between mb-4">
                     {getAvatarContent(friend.userImageUrl, friend.userName, 'lg')}
@@ -302,9 +302,9 @@ export const Friends = () => {
                         {friend.breakdown.length === 0 && (
                           <p className="text-sm opacity-50 italic">No active groups</p>
                         )}
-                        <button type="button" className={`w-full mt-4 py-2 text-sm font-bold flex items-center justify-center gap-2 transition-colors ${isNeo
-                          ? 'bg-black text-white hover:bg-gray-800 rounded-none'
-                          : 'bg-white/10 hover:bg-white/20 rounded-xl'
+                        <button type="button" className={`w-full mt-4 py-2 text-sm font-bold flex items-center justify-center gap-2 transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${isNeo
+                          ? 'bg-black text-white hover:bg-gray-800 rounded-none focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900'
+                          : 'bg-white/10 hover:bg-white/20 rounded-xl focus-visible:ring-white/50 focus-visible:ring-offset-transparent'
                           }`}>
                           View Details <ArrowRight size={14} />
                         </button>
diff --git a/web/pages/GroupDetails.tsx b/web/pages/GroupDetails.tsx
index b2b76c25..3d96452d 100644
--- a/web/pages/GroupDetails.tsx
+++ b/web/pages/GroupDetails.tsx
@@ -704,7 +704,7 @@ export const GroupDetails = () => {
                                 <button
                                     type="button"
                                     onClick={() => setSearchQuery('')}
-                                    className="absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100"
+                                    className="absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black dark:focus-visible:ring-white"
                                 >
                                     ✕
                                 </button>
@@ -936,7 +936,7 @@ export const GroupDetails = () => {
                             <button
                                 type="button"
                                 onClick={() => setSplitType(SplitType.EQUAL)}
-                                className={`flex items-center gap-2 font-bold ${splitType === SplitType.EQUAL ? 'text-blue-500' : 'opacity-50 hover:opacity-100'}`}
+                                className={`flex items-center gap-2 font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 ${splitType === SplitType.EQUAL ? 'text-blue-500' : 'opacity-50 hover:opacity-100'}`}
                             >
                                 <div className={`w-4 h-4 rounded-full border flex items-center justify-center ${splitType === SplitType.EQUAL ? 'border-blue-500' : 'border-gray-500'}`}>
                                     {splitType === SplitType.EQUAL && <div className="w-2 h-2 rounded-full bg-blue-500" />}
@@ -946,7 +946,7 @@ export const GroupDetails = () => {
                             <button
                                 type="button"
                                 onClick={() => setSplitType(SplitType.UNEQUAL)}
-                                className={`flex items-center gap-2 font-bold ${splitType === SplitType.UNEQUAL ? 'text-blue-500' : 'opacity-50 hover:opacity-100'}`}
+                                className={`flex items-center gap-2 font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 ${splitType === SplitType.UNEQUAL ? 'text-blue-500' : 'opacity-50 hover:opacity-100'}`}
                             >
                                 <div className={`w-4 h-4 rounded-full border flex items-center justify-center ${splitType === SplitType.UNEQUAL ? 'border-blue-500' : 'border-gray-500'}`}>
                                     {splitType === SplitType.UNEQUAL && <div className="w-2 h-2 rounded-full bg-blue-500" />}
@@ -965,7 +965,7 @@ export const GroupDetails = () => {
                                             if (selectedUsers.size === members.length) setSelectedUsers(new Set());
                                             else setSelectedUsers(new Set(members.map(m => m.userId)));
                                         }}
-                                        className="text-xs font-bold text-blue-500 hover:underline"
+                                        className="text-xs font-bold text-blue-500 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
                                     >
                                         {selectedUsers.size === members.length ? 'Deselect All' : 'Select All'}
                                     </button>
diff --git a/web/pages/Profile.tsx b/web/pages/Profile.tsx
index ff194895..b6797c42 100644
--- a/web/pages/Profile.tsx
+++ b/web/pages/Profile.tsx
@@ -214,7 +214,7 @@ export const Profile = () => {
                                         type="button"
                                         key={item.label}
                                         onClick={item.onClick}
-                                        className={`w-full flex items-center gap-4 p-4 transition-all hover:bg-black/5 dark:hover:bg-white/5 ${itemIdx !== section.items.length - 1 ? 'border-b border-gray-200/50 dark:border-gray-700/50' : ''
+                                        className={`w-full flex items-center gap-4 p-4 transition-all hover:bg-black/5 dark:hover:bg-white/5 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${isNeo ? "focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900" : "focus-visible:ring-blue-500 focus-visible:ring-offset-transparent"} ${itemIdx !== section.items.length - 1 ? 'border-b border-gray-200/50 dark:border-gray-700/50' : ''
                                             }`}
                                     >
                                         <div className={`w-10 h-10 flex items-center justify-center ${isNeo ? 'bg-black text-white rounded-none' : 'bg-white/10 rounded-full'
diff --git a/web/pages/SplitwiseGroupSelection.tsx b/web/pages/SplitwiseGroupSelection.tsx
index 5f5cc000..860e1270 100644
--- a/web/pages/SplitwiseGroupSelection.tsx
+++ b/web/pages/SplitwiseGroupSelection.tsx
@@ -124,7 +124,7 @@ export const SplitwiseGroupSelection = () => {
         <button
           type="button"
           onClick={() => navigate('/import/splitwise')}
-          className={`flex items-center gap-1 mb-4 text-sm font-medium transition-colors ${isNeo
+          className={`flex items-center gap-1 mb-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${isNeo ? "focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900" : "focus-visible:ring-blue-500 focus-visible:ring-offset-transparent"} ${isNeo
             ? 'text-black hover:text-gray-700'
             : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
             }`}
@@ -161,7 +161,7 @@ export const SplitwiseGroupSelection = () => {
           <button
             type="button"
             onClick={handleSelectAll}
-            className={`text-sm font-medium transition-colors ${isNeo
+            className={`text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${isNeo ? "focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900" : "focus-visible:ring-blue-500 focus-visible:ring-offset-transparent"} ${isNeo
               ? 'text-black hover:text-gray-700'
               : 'text-blue-500 hover:text-blue-600'
               }`}
@@ -259,7 +259,7 @@ export const SplitwiseGroupSelection = () => {
             type="button"
             onClick={handleStartImport}
             disabled={importing || selectedGroupIds.size === 0}
-            className={`w-full py-4 px-6 flex items-center justify-center gap-3 transition-all ${isNeo
+            className={`w-full py-4 px-6 flex items-center justify-center gap-3 transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${isNeo ? "focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900" : "focus-visible:ring-blue-500 focus-visible:ring-offset-transparent"} ${isNeo
               ? 'bg-blue-500 border-2 border-black text-white font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] rounded-none'
               : 'bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl'
               } disabled:opacity-50 disabled:cursor-not-allowed`}
diff --git a/web/pages/SplitwiseImport.tsx b/web/pages/SplitwiseImport.tsx
index dad64183..29a478d9 100644
--- a/web/pages/SplitwiseImport.tsx
+++ b/web/pages/SplitwiseImport.tsx
@@ -57,7 +57,7 @@ export const SplitwiseImport = () => {
           <button
             onClick={handleOAuthImport}
             disabled={loading}
-            className={`w-full py-4 px-6 flex items-center justify-center gap-3 transition-all ${isNeo
+            className={`w-full py-4 px-6 flex items-center justify-center gap-3 transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 ${isNeo ? "focus-visible:ring-black dark:focus-visible:ring-white dark:focus-visible:ring-offset-zinc-900" : "focus-visible:ring-blue-500 focus-visible:ring-offset-transparent"} ${isNeo
               ? 'bg-blue-500 border-2 border-black text-white font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] rounded-none'
               : 'bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl'
               } disabled:opacity-50 disabled:cursor-not-allowed mb-6`}