[jules] style: Consistent hover/focus states across all buttons#315
Open
[jules] style: Consistent hover/focus states across all buttons#315
Conversation
Added `focus-visible` styles to generic components (`Button`, `Input`, `Toast`, `Modal`) and button usages across the application (Auth, Dashboard, Friends, GroupDetails, Profile, SplitwiseImport, SplitwiseGroupSelection) to improve keyboard navigation accessibility. Used Tailwind's `focus-visible:` pseudo-class to ensure focus rings only appear for keyboard interactions without disrupting mouse/touch users. Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>
Contributor
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
✅ Deploy Preview for split-but-wiser ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
WalkthroughThis PR adds Changes
Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #315 +/- ##
=======================================
Coverage ? 63.55%
=======================================
Files ? 21
Lines ? 2456
Branches ? 254
=======================================
Hits ? 1561
Misses ? 831
Partials ? 64
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
web/components/ui/Button.tsx (1)
23-48: 🛠️ Refactor suggestion | 🟠 MajorButton focus ring is still overridable by caller classes, causing inconsistent states.
With component-level focus classes added here, callers that still pass focus utilities (e.g.,
web/pages/Auth.tsxLine 316-325) can produce competing focus styles. That breaks consistency across pages.Suggested refactor (enforce canonical focus styles at the end)
- const baseStyles = "transition-all duration-200 font-bold flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; + const baseStyles = "transition-all duration-200 font-bold flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"; + const focusStyles = + style === THEMES.NEOBRUTALISM + ? "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black focus-visible:ring-offset-white" + : `focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${ + variant === 'primary' + ? 'focus-visible:ring-blue-400 focus-visible:ring-offset-transparent' + : variant === 'secondary' + ? 'focus-visible:ring-white focus-visible:ring-offset-transparent' + : variant === 'danger' + ? 'focus-visible:ring-red-400 focus-visible:ring-offset-transparent' + : 'focus-visible:ring-white/50 focus-visible:ring-offset-transparent' + }`; - className={`${baseStyles} ${sizeStyles[size]} ${themeStyles} ${className}`} + className={`${baseStyles} ${sizeStyles[size]} ${themeStyles} ${className} ${focusStyles}`}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/components/ui/Button.tsx` around lines 23 - 48, The current focus-visible classes inside themeStyles (in Button.tsx, identifiers: baseStyles, sizeStyles, themeStyles, THEMES.NEOBRUTALISM, and variant) can be overridden by caller-supplied className; extract all focus-related utilities out of themeStyles into a single canonicalFocusStyles constant and ensure you append canonicalFocusStyles after merging props.className (i.e., build finalClassName = `${baseStyles} ${sizeStyles[...] } ${themeStyles} ${props.className ?? ''} ${canonicalFocusStyles}`) so the component's focus rules come last and reliably win; update both NEOBRUTALISM and Glassmorphism branches to remove embedded focus rules and place them only in canonicalFocusStyles.web/pages/GroupDetails.tsx (1)
939-950:⚠️ Potential issue | 🟡 MinorNeobrutalism corner style regresses on inactive tab buttons.
The base
roundedclass is always applied, whilerounded-noneis only present in active branches. Inactive buttons in neobrutalism now render rounded corners unexpectedly.♻️ Suggested fix (make radius theme-consistent for all states)
- className={`flex items-center gap-2 font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded ${splitType === SplitType.EQUAL ? (style === THEMES.NEOBRUTALISM ? 'bg-black text-white rounded-none' : 'text-blue-500') : 'opacity-50 hover:opacity-100'}`} + className={`flex items-center gap-2 font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${style === THEMES.NEOBRUTALISM ? 'rounded-none' : 'rounded'} ${splitType === SplitType.EQUAL ? (style === THEMES.NEOBRUTALISM ? 'bg-black text-white' : 'text-blue-500') : 'opacity-50 hover:opacity-100'}`} - className={`flex items-center gap-2 font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded ${splitType === SplitType.UNEQUAL ? (style === THEMES.NEOBRUTALISM ? 'text-blue-500 rounded-none' : 'text-blue-500') : 'opacity-50 hover:opacity-100'}`} + className={`flex items-center gap-2 font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${style === THEMES.NEOBRUTALISM ? 'rounded-none' : 'rounded'} ${splitType === SplitType.UNEQUAL ? (style === THEMES.NEOBRUTALISM ? 'text-blue-500' : 'text-blue-500') : 'opacity-50 hover:opacity-100'}`} - className={`flex-1 px-3 py-2 text-sm font-bold transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded ${settingsTab === 'info' ? (style === THEMES.NEOBRUTALISM ? 'bg-white border-2 border-black rounded-none' : 'bg-white/20 rounded-md') : 'opacity-60 hover:opacity-100'}`} + className={`flex-1 px-3 py-2 text-sm font-bold transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${style === THEMES.NEOBRUTALISM ? 'rounded-none' : 'rounded'} ${settingsTab === 'info' ? (style === THEMES.NEOBRUTALISM ? 'bg-white border-2 border-black' : 'bg-white/20 rounded-md') : 'opacity-60 hover:opacity-100'}`}Also applies to: 1112-1127
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/pages/GroupDetails.tsx` around lines 939 - 950, The inactive neobrutalism buttons are getting rounded corners because the base `rounded` class is always present while `rounded-none` is only applied in active branches; update the className logic in the toggle buttons that call setSplitType (the buttons switching SplitType.EQUAL and SplitType.UNEQUAL) so the radius class is consistent for both states—ensure both branches compute the same radius slot (e.g., include `rounded-none` when the button is inactive and `rounded-none` or `rounded` as appropriate when active) by moving the radius part into the conditional alongside the existing color/opactiy condition rather than always applying `rounded` unconditionally.web/pages/Friends.tsx (1)
305-310:⚠️ Potential issue | 🟠 Major
View Detailsis currently a non-functional button.This renders as an actionable control but has no click behavior, which creates a dead-end interaction for users. Please wire it to a real action (navigation/modal) or render non-interactive text until behavior exists.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/pages/Friends.tsx` around lines 305 - 310, The "View Details" button is currently inert; add a click handler or make it non-interactive. Either (A) wire an onClick on the button element (the one rendering "View Details" and <ArrowRight />) to perform the desired action—e.g., use Next.js router: const router = useRouter(); then onClick={() => router.push(`/friends/${friend.id}`)} or call the existing modal/open function (e.g., openFriendModal(friend) or setSelectedFriend + setShowModal(true))—and keep the same classNames (respecting isNeo). Or (B) if no action exists yet, replace the <button> with a non-interactive element (e.g., <div> or <span> with the same styling and aria-disabled) so it isn't presented as an actionable control. Ensure ARIA (aria-disabled) and keyboard behavior match the chosen approach.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/components/ui/Input.tsx`:
- Around line 49-53: The password toggle's focus contrast is too weak in light
mode for non-NEOBRUTALISM themes; update the className logic in Input.tsx (the
element using style === THEMES.NEOBRUTALISM and mode) so the non-neobrutal
branch chooses darker text and ring in light mode (e.g., when mode === 'light'
use a darker text class and darker focus-visible:ring instead of the current
white-tinted classes) while keeping the existing white-tinted classes for dark
mode.
In `@web/components/ui/Modal.tsx`:
- Line 69: The close button's focus-visible ring uses
dark:focus-visible:ring-white which can vanish against white Neobrutalism modal
surfaces; update the button in Modal.tsx (the element with onClick={onClose} and
aria-label="Close modal") to use a dark-mode ring that remains visible (e.g.,
dark:focus-visible:ring-black or remove the dark: override so
focus-visible:ring-black always applies), ensuring the focus-visible class
remains clearly visible in both themes.
In `@web/pages/Profile.tsx`:
- Around line 217-218: The focus ring color on each profile menu row uses danger
semantics (focus-visible:ring-red-500); update the JSX that renders the rows
(the className string where itemIdx and section.items are referenced) to use a
neutral focus ring color instead (for example replace focus-visible:ring-red-500
with focus-visible:ring-neutral-500 or a neutral/tone color like
focus-visible:ring-sky-500) so non-destructive navigation actions use neutral
focus styling.
In `@web/pages/SplitwiseGroupSelection.tsx`:
- Line 127: The Back/Select-All button className currently always includes
"rounded" even when isNeo (Neobrutalism) should use square corners; update the
className in SplitwiseGroupSelection.tsx (the template that references isNeo
around the class string) to conditionally apply "rounded-none" when isNeo is
true and "rounded" otherwise (e.g., replace the unconditional "rounded" with a
ternary `${isNeo ? 'rounded-none' : 'rounded'}`), and make the same change for
the second occurrence referenced in the review.
---
Outside diff comments:
In `@web/components/ui/Button.tsx`:
- Around line 23-48: The current focus-visible classes inside themeStyles (in
Button.tsx, identifiers: baseStyles, sizeStyles, themeStyles,
THEMES.NEOBRUTALISM, and variant) can be overridden by caller-supplied
className; extract all focus-related utilities out of themeStyles into a single
canonicalFocusStyles constant and ensure you append canonicalFocusStyles after
merging props.className (i.e., build finalClassName = `${baseStyles}
${sizeStyles[...] } ${themeStyles} ${props.className ?? ''}
${canonicalFocusStyles}`) so the component's focus rules come last and reliably
win; update both NEOBRUTALISM and Glassmorphism branches to remove embedded
focus rules and place them only in canonicalFocusStyles.
In `@web/pages/Friends.tsx`:
- Around line 305-310: The "View Details" button is currently inert; add a click
handler or make it non-interactive. Either (A) wire an onClick on the button
element (the one rendering "View Details" and <ArrowRight />) to perform the
desired action—e.g., use Next.js router: const router = useRouter(); then
onClick={() => router.push(`/friends/${friend.id}`)} or call the existing
modal/open function (e.g., openFriendModal(friend) or setSelectedFriend +
setShowModal(true))—and keep the same classNames (respecting isNeo). Or (B) if
no action exists yet, replace the <button> with a non-interactive element (e.g.,
<div> or <span> with the same styling and aria-disabled) so it isn't presented
as an actionable control. Ensure ARIA (aria-disabled) and keyboard behavior
match the chosen approach.
In `@web/pages/GroupDetails.tsx`:
- Around line 939-950: The inactive neobrutalism buttons are getting rounded
corners because the base `rounded` class is always present while `rounded-none`
is only applied in active branches; update the className logic in the toggle
buttons that call setSplitType (the buttons switching SplitType.EQUAL and
SplitType.UNEQUAL) so the radius class is consistent for both states—ensure both
branches compute the same radius slot (e.g., include `rounded-none` when the
button is inactive and `rounded-none` or `rounded` as appropriate when active)
by moving the radius part into the conditional alongside the existing
color/opactiy condition rather than always applying `rounded` unconditionally.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 6b857685-db78-4ed1-a474-fbdda6e74f62
⛔ Files ignored due to path filters (1)
web/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (13)
.Jules/changelog.md.Jules/todo.mdweb/components/ui/Button.tsxweb/components/ui/Input.tsxweb/components/ui/Modal.tsxweb/components/ui/Toast.tsxweb/pages/Auth.tsxweb/pages/Dashboard.tsxweb/pages/Friends.tsxweb/pages/GroupDetails.tsxweb/pages/Profile.tsxweb/pages/SplitwiseGroupSelection.tsxweb/pages/SplitwiseImport.tsx
Comment on lines
+49
to
53
| className={`absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-md transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 ${ | ||
| 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' | ||
| }`} |
Contributor
There was a problem hiding this comment.
Password toggle focus contrast is too weak in light mode (glass theme).
The non-neobrutal branch uses white-tinted icon and ring for both modes; in light mode this can make the keyboard focus state hard to perceive.
Suggested fix
- : 'text-white/60 hover:text-white focus-visible:ring-white/50'
+ : mode === 'dark'
+ ? 'text-white/60 hover:text-white focus-visible:ring-white/50 focus-visible:ring-offset-gray-900'
+ : 'text-gray-500 hover:text-gray-700 focus-visible:ring-blue-500/60 focus-visible:ring-offset-white'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| className={`absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-md transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 ${ | |
| 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' | |
| }`} | |
| className={`absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-md transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 ${ | |
| style === THEMES.NEOBRUTALISM | |
| ? (mode === 'dark' ? 'text-white opacity-80 focus-visible:ring-white' : 'text-black opacity-60 focus-visible:ring-black') | |
| : mode === 'dark' | |
| ? 'text-white/60 hover:text-white focus-visible:ring-white/50 focus-visible:ring-offset-gray-900' | |
| : 'text-gray-500 hover:text-gray-700 focus-visible:ring-blue-500/60 focus-visible:ring-offset-white' | |
| }`} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/components/ui/Input.tsx` around lines 49 - 53, The password toggle's
focus contrast is too weak in light mode for non-NEOBRUTALISM themes; update the
className logic in Input.tsx (the element using style === THEMES.NEOBRUTALISM
and mode) so the non-neobrutal branch chooses darker text and ring in light mode
(e.g., when mode === 'light' use a darker text class and darker
focus-visible:ring instead of the current white-tinted classes) while keeping
the existing white-tinted classes for dark mode.
| <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:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white rounded-sm" aria-label="Close modal"> |
Contributor
There was a problem hiding this comment.
Dark-mode override can hide close-button focus ring in Neobrutalism.
Line 69 uses dark:focus-visible:ring-white globally, but Neobrutalism modal surfaces are white; this can make keyboard focus nearly invisible in dark mode.
Suggested fix
- <button type="button" onClick={onClose} className="hover:rotate-90 transition-transform duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white rounded-sm" aria-label="Close modal">
+ <button
+ type="button"
+ onClick={onClose}
+ className={`hover:rotate-90 transition-transform duration-200 focus:outline-none focus-visible:ring-2 rounded-sm ${
+ style === THEMES.NEOBRUTALISM ? 'focus-visible:ring-black' : 'focus-visible:ring-white'
+ }`}
+ aria-label="Close modal"
+ >📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <button type="button" onClick={onClose} className="hover:rotate-90 transition-transform duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white rounded-sm" aria-label="Close modal"> | |
| <button | |
| type="button" | |
| onClick={onClose} | |
| className={`hover:rotate-90 transition-transform duration-200 focus:outline-none focus-visible:ring-2 rounded-sm ${ | |
| style === THEMES.NEOBRUTALISM ? 'focus-visible:ring-black' : 'focus-visible:ring-white' | |
| }`} | |
| aria-label="Close modal" | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/components/ui/Modal.tsx` at line 69, The close button's focus-visible
ring uses dark:focus-visible:ring-white which can vanish against white
Neobrutalism modal surfaces; update the button in Modal.tsx (the element with
onClick={onClose} and aria-label="Close modal") to use a dark-mode ring that
remains visible (e.g., dark:focus-visible:ring-black or remove the dark:
override so focus-visible:ring-black always applies), ensuring the focus-visible
class remains clearly visible in both themes.
Comment on lines
+217
to
218
| className={`w-full flex items-center gap-4 p-4 transition-all hover:bg-black/5 dark:hover:bg-white/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-500 ${itemIdx !== section.items.length - 1 ? 'border-b border-gray-200/50 dark:border-gray-700/50' : '' | ||
| }`} |
Contributor
There was a problem hiding this comment.
Use a neutral focus ring for non-destructive profile menu actions.
Applying focus-visible:ring-red-500 to every row suggests danger semantics for normal navigation actions.
Suggested fix
- className={`w-full flex items-center gap-4 p-4 transition-all hover:bg-black/5 dark:hover:bg-white/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-500 ${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:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 ${itemIdx !== section.items.length - 1 ? 'border-b border-gray-200/50 dark:border-gray-700/50' : ''
}`}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| className={`w-full flex items-center gap-4 p-4 transition-all hover:bg-black/5 dark:hover:bg-white/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-500 ${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:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 ${itemIdx !== section.items.length - 1 ? 'border-b border-gray-200/50 dark:border-gray-700/50' : '' | |
| }`} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/pages/Profile.tsx` around lines 217 - 218, The focus ring color on each
profile menu row uses danger semantics (focus-visible:ring-red-500); update the
JSX that renders the rows (the className string where itemIdx and section.items
are referenced) to use a neutral focus ring color instead (for example replace
focus-visible:ring-red-500 with focus-visible:ring-neutral-500 or a neutral/tone
color like focus-visible:ring-sky-500) so non-destructive navigation actions use
neutral focus styling.
| 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:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 rounded ${isNeo |
Contributor
There was a problem hiding this comment.
rounded is applied in Neobrutalism mode, breaking square-corner consistency.
Back/Select-All controls now always include rounded, while the same page/theme uses rounded-none conventions.
Suggested fix
- className={`flex items-center gap-1 mb-4 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 rounded ${isNeo
+ className={`flex items-center gap-1 mb-4 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 ${isNeo ? 'rounded-none' : 'rounded'} ${isNeo
? 'text-black hover:text-gray-700'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
}`}
- className={`text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 rounded ${isNeo
+ className={`text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 ${isNeo ? 'rounded-none' : 'rounded'} ${isNeo
? 'text-black hover:text-gray-700'
: 'text-blue-500 hover:text-blue-600'
}`}Also applies to: 164-164
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/pages/SplitwiseGroupSelection.tsx` at line 127, The Back/Select-All
button className currently always includes "rounded" even when isNeo
(Neobrutalism) should use square corners; update the className in
SplitwiseGroupSelection.tsx (the template that references isNeo around the class
string) to conditionally apply "rounded-none" when isNeo is true and "rounded"
otherwise (e.g., replace the unconditional "rounded" with a ternary `${isNeo ?
'rounded-none' : 'rounded'}`), and make the same change for the second
occurrence referenced in the review.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Added explicit focus-visible states across all interactive buttons in the web application.
web/components/ui/Button.tsxto include dynamicfocus-visiblering colors based on the active theme (Glassmorphism vs Neobrutalism) and button variant.Input,Toast, andModalcomponents with context-appropriate focus rings.<button>elements acrossAuth.tsx,Dashboard.tsx,Friends.tsx,GroupDetails.tsx,Profile.tsx,SplitwiseGroupSelection.tsx, andSplitwiseImport.tsx.rounded-lgvsrounded-none) introduced during style applications in Dashboard..Jules/todo.mdand.Jules/changelog.md).PR created automatically by Jules for task 17113004791780372455 started by @Devasy23
Summary by CodeRabbit
Style
Documentation