refactor(css): extract repeated Tailwind patterns into @layer components#380
Merged
Junman140 merged 2 commits intoMay 27, 2026
Merged
Conversation
|
@fantababa Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR introduces a new set of reusable Tailwind component utility classes in ChangesDesign System & UI Pattern Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![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: 9
🧹 Nitpick comments (6)
app/mint/page.tsx (1)
412-415: ⚡ Quick winComplete the header migration by using
page-header-row.Line 413 still hardcodes the row utilities, which reintroduces duplication instead of using the shared component class.
Proposed diff
- <header className="page-header"> - <div className="px-4 py-4 flex items-center gap-3"> + <header className="page-header"> + <div className="page-header-row"> <Link href="/" className="p-2 hover:bg-muted rounded transition-colors" aria-label="Go back"> <ArrowLeft className="w-5 h-5" /> </Link>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/mint/page.tsx` around lines 412 - 415, The header still uses hardcoded row utilities on the inner div ("px-4 py-4 flex items-center gap-3"); replace those utilities with the shared component class "page-header-row" so the header element with className "page-header" uses the standardized row styling. Update the div inside the header to remove the inline utility classes and use "page-header-row" instead, ensuring consistency with the migrated header component.app/me/settings/page.tsx (1)
23-26: ⚡ Quick winAdd
touch-targetto the back link in this header.Line 25 still uses a small icon-only link; applying the shared touch-target class would align with the new design-system header contract.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/me/settings/page.tsx` around lines 23 - 26, The back-link in the page header (the Link wrapping the ArrowLeft icon in app/me/settings/page.tsx) lacks the shared touch-target class; update that Link (the component containing ArrowLeft) to include the touch-target className (merging with any existing classes if needed) so the icon becomes a proper touch target while leaving the ArrowLeft's className untouched.app/me/settings/security/page.tsx (1)
66-73: ⚡ Quick winApply
touch-targetto the header back link.The migrated header is using shared layout classes, but the icon link still skips the shared tap-target class.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/me/settings/security/page.tsx` around lines 66 - 73, The back-link ArrowLeft Link in the Security page header is missing the shared tap target class; update the Link element inside app/me/settings/security/page.tsx (the Link wrapping ArrowLeft in the page-header-row) to include the touch-target class (e.g., add "touch-target" to the Link's className alongside any existing classes) so the icon uses the shared tap-target styling.app/me/settings/receive/page.tsx (1)
54-57: ⚡ Quick winUse
touch-targetconsistently for all three back links.Line 56, Line 72, and Line 87 still use icon-only links without the standardized tap-target sizing.
Also applies to: 70-73, 85-88
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/me/settings/receive/page.tsx` around lines 54 - 57, There are three icon-only back links using Link with the ArrowLeft icon in this component (the one inside the page-header and the two later back links around the receive sections); add the standardized touch target sizing by adding the "touch-target" class to each of those Link elements (the Link wrapping ArrowLeft in the page-header, and the two other Link(...><ArrowLeft /></Link> instances) so all three use the same tap-target sizing; ensure you only add the class to the Link elements and not the icon itself so existing styling remains consistent.app/me/settings/guardians/page.tsx (1)
66-69: ⚡ Quick winApply
touch-targetto back navigation links.Line 68 and Line 83 should use the shared tap-target class to keep header accessibility and behavior consistent.
Also applies to: 81-84
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/me/settings/guardians/page.tsx` around lines 66 - 69, The back-navigation Link elements rendering the ArrowLeft icon (the Link wrapping ArrowLeft in the page header and the other back link lower in the component) need the shared tap-target touch/tap accessibility class applied; update those Link components (the ones containing ArrowLeft) to include the shared "tap-target" class on the Link element (or its className) so the header/back links use the consistent touch-target styling and behavior.app/me/settings/contacts/page.tsx (1)
68-71: ⚡ Quick winUse
touch-targeton both back links.Line 70 and Line 85 still render icon-only links without the shared 44px tap-target class, so this page is inconsistent with the new header pattern.
Also applies to: 83-86
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/me/settings/contacts/page.tsx` around lines 68 - 71, The back-link Link components rendering the ArrowLeft icon (the Link around ArrowLeft in the page header and the other icon-only back link further down) are missing the touch-target tap area; update both Link elements that wrap the ArrowLeft icon in app/me/settings/contacts/page.tsx to include the shared touch-target class (e.g., add "touch-target" alongside existing classes) so the icon-only links get the 44px tap target and match the new header pattern.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.claude/settings.local.json:
- Line 4: Replace the overly-broad permission string "Bash(git merge *)" with a
specific, minimal merge command or remove it; for example, change it to the
exact allowed ref/args (e.g. "Bash(git merge refs/heads/RELEASE_BRANCH_NAME)" or
a comma-separated list of exact branch names) or revoke merge capability
entirely so merges require manual approval—update the value that currently reads
"Bash(git merge *)" in the settings.local.json to the narrowest allowed git
merge invocation for your workflow.
- Around line 16-17: Replace the two allowlist entries that use Bash with an
absolute -C path (the lines containing Bash(git -C ... diff app/burn/page.tsx)
and Bash(git -C ... diff app/send/page.tsx)) so they are repo-relative or omit
-C; edit the strings to use "Bash(git diff app/burn/page.tsx)" and "Bash(git
diff app/send/page.tsx)" (or equivalent repo-root commands) so the permissions
no longer include an author-specific absolute path.
In `@app/activity/page.tsx`:
- Around line 43-47: The icon-only back Link (the <Link> wrapping <ArrowLeft />
in page.tsx, inside the page-header-row) lacks an accessible name; update the
Link to provide one by adding an aria-label (e.g., aria-label="Back to profile")
or include visually hidden text (a span with a screen-reader-only class)
alongside the <ArrowLeft /> so assistive tech announces the purpose of the link
while preserving the icon-only visual.
In `@app/bills/catalog/page.tsx`:
- Line 14: The back control uses an icon-only Link (Link with child ArrowLeft
and className "touch-target") and lacks an accessible label; add an aria-label
(for example aria-label="Back to bills" or "Go back") to the Link element that
contains the ArrowLeft icon so screen readers can announce the control, ensuring
the Link component's props include that aria-label without changing visual
output.
In `@app/bills/pay/page.tsx`:
- Line 14: The icon-only back Link needs an accessible name: update the Link
element that renders ArrowLeft (the Link with className "touch-target"
containing <ArrowLeft ... />) to include an explicit aria-label (for example
aria-label="Back to bills" or aria-label="Go back") so screen readers can
announce its purpose; ensure the aria-label string matches the link
target/context and do not remove the visual icon.
In `@app/business/sme/page.tsx`:
- Around line 21-23: The back link rendered as an icon-only Link
(href="/business") containing the ArrowLeft icon needs an accessible name; add
an aria-label (for example aria-label="Back to business" or similar descriptive
text) to the Link element in page.tsx (the Link that wraps ArrowLeft inside the
"page-header-row") so screen readers can announce its purpose.
In `@app/error.tsx`:
- Line 27: The file references missing icon components AlertTriangle, RefreshCw,
and Home; add a named import for these from the lucide-react package (e.g.,
import { AlertTriangle, RefreshCw, Home } from 'lucide-react') at the top of the
module, then ensure any usages of AlertTriangle, RefreshCw, and Home in the
ErrorBoundary/React component are unchanged so TypeScript resolves the
identifiers.
In `@app/help/page.tsx`:
- Around line 239-241: The form labels in app/help/page.tsx (e.g., the <label>
elements rendering "Name" and the other labels at the noted locations) are not
bound to their inputs; update each label to include an htmlFor attribute and set
the matching id on the corresponding input element (ensure ids are unique and
descriptive, e.g., nameInput, emailInput, messageInput), and verify
click-to-focus and screen-reader association work for the label/input pairs in
the component rendering the form.
In `@app/savings/deposit/page.tsx`:
- Around line 71-76: The back link using Link (href="/savings") with the
ArrowLeft icon has neither the touch-target sizing nor an accessible name;
update the Link element to include the shared touch-target class (e.g.,
"touch-target") to enlarge the hit area and add an explicit aria-label (e.g.,
aria-label="Back to savings") so the ArrowLeft icon is accessible to screen
readers, ensuring the change is applied where the page-header/page-header-row
and ArrowLeft are rendered.
---
Nitpick comments:
In `@app/me/settings/contacts/page.tsx`:
- Around line 68-71: The back-link Link components rendering the ArrowLeft icon
(the Link around ArrowLeft in the page header and the other icon-only back link
further down) are missing the touch-target tap area; update both Link elements
that wrap the ArrowLeft icon in app/me/settings/contacts/page.tsx to include the
shared touch-target class (e.g., add "touch-target" alongside existing classes)
so the icon-only links get the 44px tap target and match the new header pattern.
In `@app/me/settings/guardians/page.tsx`:
- Around line 66-69: The back-navigation Link elements rendering the ArrowLeft
icon (the Link wrapping ArrowLeft in the page header and the other back link
lower in the component) need the shared tap-target touch/tap accessibility class
applied; update those Link components (the ones containing ArrowLeft) to include
the shared "tap-target" class on the Link element (or its className) so the
header/back links use the consistent touch-target styling and behavior.
In `@app/me/settings/page.tsx`:
- Around line 23-26: The back-link in the page header (the Link wrapping the
ArrowLeft icon in app/me/settings/page.tsx) lacks the shared touch-target class;
update that Link (the component containing ArrowLeft) to include the
touch-target className (merging with any existing classes if needed) so the icon
becomes a proper touch target while leaving the ArrowLeft's className untouched.
In `@app/me/settings/receive/page.tsx`:
- Around line 54-57: There are three icon-only back links using Link with the
ArrowLeft icon in this component (the one inside the page-header and the two
later back links around the receive sections); add the standardized touch target
sizing by adding the "touch-target" class to each of those Link elements (the
Link wrapping ArrowLeft in the page-header, and the two other
Link(...><ArrowLeft /></Link> instances) so all three use the same tap-target
sizing; ensure you only add the class to the Link elements and not the icon
itself so existing styling remains consistent.
In `@app/me/settings/security/page.tsx`:
- Around line 66-73: The back-link ArrowLeft Link in the Security page header is
missing the shared tap target class; update the Link element inside
app/me/settings/security/page.tsx (the Link wrapping ArrowLeft in the
page-header-row) to include the touch-target class (e.g., add "touch-target" to
the Link's className alongside any existing classes) so the icon uses the shared
tap-target styling.
In `@app/mint/page.tsx`:
- Around line 412-415: The header still uses hardcoded row utilities on the
inner div ("px-4 py-4 flex items-center gap-3"); replace those utilities with
the shared component class "page-header-row" so the header element with
className "page-header" uses the standardized row styling. Update the div inside
the header to remove the inline utility classes and use "page-header-row"
instead, ensuring consistency with the migrated header component.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: f0c1c30a-fdf4-4ce3-8c90-0a3b0da41e1b
📒 Files selected for processing (45)
.claude/settings.local.jsonapp/activity/page.tsxapp/auth/2fa/page.tsxapp/auth/error.tsxapp/auth/signin/page.tsxapp/auth/signup/page.tsxapp/auth/wallet-setup/page.tsxapp/bills/catalog/page.tsxapp/bills/error.tsxapp/bills/page.tsxapp/bills/pay/page.tsxapp/burn/page.tsxapp/business/sme/page.tsxapp/currency/page.tsxapp/error.tsxapp/globals.cssapp/help/page.tsxapp/lending/admin/page.tsxapp/lending/page.tsxapp/me/activity/page.tsxapp/me/error.tsxapp/me/page.tsxapp/me/settings/contacts/page.tsxapp/me/settings/guardians/page.tsxapp/me/settings/page.tsxapp/me/settings/receive/page.tsxapp/me/settings/security/page.tsxapp/me/settings/wallet/page.tsxapp/mint/page.tsxapp/page.tsxapp/rates/page.tsxapp/recovery/page.tsxapp/reserves/page.tsxapp/savings/deposit/page.tsxapp/savings/error.tsxapp/savings/page.tsxapp/savings/withdraw/page.tsxapp/send/[id]/page.tsxapp/send/error.tsxapp/send/page.tsxapp/transactions/[id]/page.tsxapp/transactions/error.tsxapp/wallet/error.tsxapp/wallet/page.tsxcomponents/error-boundary.tsx
Comment on lines
+16
to
+17
| "Bash(git -C /Users/user/Documents/Phanta/acbu-frontend diff app/burn/page.tsx)", | ||
| "Bash(git -C /Users/user/Documents/Phanta/acbu-frontend diff app/send/page.tsx)" |
Contributor
There was a problem hiding this comment.
Remove the author-specific absolute path from these allowlist entries.
Lines 16-17 hardcode /Users/user/Documents/Phanta/acbu-frontend, so these permissions won't match on other machines or CI workspaces. Use repo-relative commands from the repository root, or omit -C entirely.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.claude/settings.local.json around lines 16 - 17, Replace the two allowlist
entries that use Bash with an absolute -C path (the lines containing Bash(git -C
... diff app/burn/page.tsx) and Bash(git -C ... diff app/send/page.tsx)) so they
are repo-relative or omit -C; edit the strings to use "Bash(git diff
app/burn/page.tsx)" and "Bash(git diff app/send/page.tsx)" (or equivalent
repo-root commands) so the permissions no longer include an author-specific
absolute path.
Comment on lines
+43
to
47
| <div className="page-header"> | ||
| <div className="page-header-row"> | ||
| <Link href="/me"><ArrowLeft className="w-5 h-5 text-primary" /></Link> | ||
| <h1 className="text-lg font-bold text-foreground">Activity</h1> | ||
| <h1 className="page-title">Activity</h1> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Add an accessible name to the icon-only back link.
Line 45 renders an icon-only <Link> without an explicit label, so assistive tech may announce it ambiguously.
♿ Suggested fix
- <Link href="/me"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
+ <Link href="/me" aria-label="Go back" className="touch-target">
+ <ArrowLeft className="w-5 h-5 text-primary" />
+ </Link>📝 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
| <div className="page-header"> | |
| <div className="page-header-row"> | |
| <Link href="/me"><ArrowLeft className="w-5 h-5 text-primary" /></Link> | |
| <h1 className="text-lg font-bold text-foreground">Activity</h1> | |
| <h1 className="page-title">Activity</h1> | |
| </div> | |
| <div className="page-header"> | |
| <div className="page-header-row"> | |
| <Link href="/me" aria-label="Go back" className="touch-target"> | |
| <ArrowLeft className="w-5 h-5 text-primary" /> | |
| </Link> | |
| <h1 className="page-title">Activity</h1> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/activity/page.tsx` around lines 43 - 47, The icon-only back Link (the
<Link> wrapping <ArrowLeft /> in page.tsx, inside the page-header-row) lacks an
accessible name; update the Link to provide one by adding an aria-label (e.g.,
aria-label="Back to profile") or include visually hidden text (a span with a
screen-reader-only class) alongside the <ArrowLeft /> so assistive tech
announces the purpose of the link while preserving the icon-only visual.
| <h1 className="text-lg font-bold text-foreground">Bill catalog</h1> | ||
| <div className="page-header"> | ||
| <div className="page-header-row"> | ||
| <Link href="/bills" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link> |
Contributor
There was a problem hiding this comment.
Provide an accessible label for the icon-only back control.
Line 14 uses only an icon inside <Link>; add aria-label so screen readers can identify the action.
♿ Suggested fix
- <Link href="/bills" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
+ <Link href="/bills" className="touch-target" aria-label="Go back to bills">
+ <ArrowLeft className="w-5 h-5 text-primary" />
+ </Link>📝 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
| <Link href="/bills" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link> | |
| <Link href="/bills" className="touch-target" aria-label="Go back to bills"> | |
| <ArrowLeft className="w-5 h-5 text-primary" /> | |
| </Link> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/bills/catalog/page.tsx` at line 14, The back control uses an icon-only
Link (Link with child ArrowLeft and className "touch-target") and lacks an
accessible label; add an aria-label (for example aria-label="Back to bills" or
"Go back") to the Link element that contains the ArrowLeft icon so screen
readers can announce the control, ensuring the Link component's props include
that aria-label without changing visual output.
| <h1 className="text-lg font-bold text-foreground">Pay bill</h1> | ||
| <div className="page-header"> | ||
| <div className="page-header-row"> | ||
| <Link href="/bills" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link> |
Contributor
There was a problem hiding this comment.
Add aria-label to the icon-only back link.
Line 14 needs an explicit accessible name for assistive technologies.
♿ Suggested fix
- <Link href="/bills" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
+ <Link href="/bills" className="touch-target" aria-label="Go back to bills">
+ <ArrowLeft className="w-5 h-5 text-primary" />
+ </Link>📝 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
| <Link href="/bills" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link> | |
| <Link href="/bills" className="touch-target" aria-label="Go back to bills"> | |
| <ArrowLeft className="w-5 h-5 text-primary" /> | |
| </Link> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/bills/pay/page.tsx` at line 14, The icon-only back Link needs an
accessible name: update the Link element that renders ArrowLeft (the Link with
className "touch-target" containing <ArrowLeft ... />) to include an explicit
aria-label (for example aria-label="Back to bills" or aria-label="Go back") so
screen readers can announce its purpose; ensure the aria-label string matches
the link target/context and do not remove the visual icon.
Comment on lines
+21
to
23
| <div className="page-header-row"> | ||
| <Link href="/business" className="text-primary"> | ||
| <ArrowLeft className="w-5 h-5" /> |
Contributor
There was a problem hiding this comment.
Name the icon-only back link for accessibility.
Line 22 should include aria-label; currently the control is icon-only.
♿ Suggested fix
- <Link href="/business" className="text-primary">
+ <Link href="/business" className="touch-target text-primary" aria-label="Go back to business">
<ArrowLeft className="w-5 h-5" />
</Link>📝 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
| <div className="page-header-row"> | |
| <Link href="/business" className="text-primary"> | |
| <ArrowLeft className="w-5 h-5" /> | |
| <div className="page-header-row"> | |
| <Link href="/business" className="touch-target text-primary" aria-label="Go back to business"> | |
| <ArrowLeft className="w-5 h-5" /> | |
| </Link> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/business/sme/page.tsx` around lines 21 - 23, The back link rendered as an
icon-only Link (href="/business") containing the ArrowLeft icon needs an
accessible name; add an aria-label (for example aria-label="Back to business" or
similar descriptive text) to the Link element in page.tsx (the Link that wraps
ArrowLeft inside the "page-header-row") so screen readers can announce its
purpose.
| <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" /> | ||
| <div className="error-state"> | ||
| <div className="error-icon-wrapper"> | ||
| <AlertTriangle className="error-icon" /> |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify unresolved icon identifiers and missing import in app/error.tsx
rg -n "import .*lucide-react" app/error.tsx
rg -n "\b(AlertTriangle|RefreshCw|Home)\b" app/error.tsxRepository: Pi-Defi-world/acbu-frontend
Length of output: 222
Fix missing lucide-react icon imports in app/error.tsx
AlertTriangle, RefreshCw, and Home are referenced in app/error.tsx (lines 27, 62, 66) but there is no lucide-react import shown in the file, which will cause TypeScript build/type errors for unresolved identifiers.
Suggested fix
import { useEffect } from 'react';
import { Button } from '`@/components/ui/button`';
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
import { logger } from '`@/lib/logger`';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/error.tsx` at line 27, The file references missing icon components
AlertTriangle, RefreshCw, and Home; add a named import for these from the
lucide-react package (e.g., import { AlertTriangle, RefreshCw, Home } from
'lucide-react') at the top of the module, then ensure any usages of
AlertTriangle, RefreshCw, and Home in the ErrorBoundary/React component are
unchanged so TypeScript resolves the identifiers.
Comment on lines
+239
to
241
| <label className="form-label"> | ||
| Name | ||
| </label> |
Contributor
There was a problem hiding this comment.
Associate each form label with its field (htmlFor/id).
These labels are still not programmatically bound to inputs, so screen-reader users and click-to-focus behavior are degraded.
Suggested fix
- <label className="form-label">
+ <label htmlFor="support-name" className="form-label">
Name
</label>
<Input
+ id="support-name"
type="text"
@@
- <label className="form-label">
+ <label htmlFor="support-email" className="form-label">
Email
</label>
<Input
+ id="support-email"
type="email"
@@
- <label className="form-label">
+ <label htmlFor="support-subject" className="form-label">
Subject
</label>
<Input
+ id="support-subject"
type="text"
@@
- <label className="form-label">
+ <label htmlFor="support-message" className="form-label">
Message
</label>
<Textarea
+ id="support-message"
placeholder="Describe your issue in detail..."Also applies to: 255-257, 272-274, 288-290
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/help/page.tsx` around lines 239 - 241, The form labels in
app/help/page.tsx (e.g., the <label> elements rendering "Name" and the other
labels at the noted locations) are not bound to their inputs; update each label
to include an htmlFor attribute and set the matching id on the corresponding
input element (ensure ids are unique and descriptive, e.g., nameInput,
emailInput, messageInput), and verify click-to-focus and screen-reader
association work for the label/input pairs in the component rendering the form.
Comment on lines
+71
to
+76
| <div className="page-header"> | ||
| <div className="page-header-row"> | ||
| <Link href="/savings"> | ||
| <ArrowLeft className="w-5 h-5 text-primary" /> | ||
| </Link> | ||
| <h1 className="text-lg font-bold text-foreground"> | ||
| <h1 className="page-title"> |
Contributor
There was a problem hiding this comment.
Add touch-target sizing and accessible name to the back link.
The icon-only back link in this header lacks the touch-target class and an explicit aria-label, which makes the hit area smaller than the new shared pattern and weakens accessibility consistency.
Suggested fix
- <Link href="/savings">
+ <Link href="/savings" className="touch-target" aria-label="Go back">
<ArrowLeft className="w-5 h-5 text-primary" />
</Link>📝 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
| <div className="page-header"> | |
| <div className="page-header-row"> | |
| <Link href="/savings"> | |
| <ArrowLeft className="w-5 h-5 text-primary" /> | |
| </Link> | |
| <h1 className="text-lg font-bold text-foreground"> | |
| <h1 className="page-title"> | |
| <div className="page-header"> | |
| <div className="page-header-row"> | |
| <Link href="/savings" className="touch-target" aria-label="Go back"> | |
| <ArrowLeft className="w-5 h-5 text-primary" /> | |
| </Link> | |
| <h1 className="page-title"> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/savings/deposit/page.tsx` around lines 71 - 76, The back link using Link
(href="/savings") with the ArrowLeft icon has neither the touch-target sizing
nor an accessible name; update the Link element to include the shared
touch-target class (e.g., "touch-target") to enlarge the hit area and add an
explicit aria-label (e.g., aria-label="Back to savings") so the ArrowLeft icon
is accessible to screen readers, ensuring the change is applied where the
page-header/page-header-row and ArrowLeft are rendered.
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
2 participants
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.
Closes #352
Identifies 8 repeated multi-class Tailwind utility patterns
across 44 component files and extracts them into dedicated component classes
in app/globals.css using @layer components with @apply.
No visual changes — the generated CSS output is identical. Only the
authoring surface changes: inline class strings are replaced with
semantic names that are easier to read and maintain.
Summary by CodeRabbit