Skip to content

refactor(css): extract repeated Tailwind patterns into @layer components #380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Junman140 merged 2 commits into from
May 27, 2026
Merged

refactor(css): extract repeated Tailwind patterns into @layer components #380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
92c67da
refactor(css): extract repeated Tailwind patterns into @layer components
fantababa May 26, 2026
fa7f961
Merge branch 'dev' into refactor/tailwind-component-classes-352
Junman140 May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/activity/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@ export default function ActivityPage() {

return (
<>
<div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
<div className="px-4 py-3 flex items-center gap-3">
<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>
Comment on lines +43 to 47

@coderabbitai coderabbitai Bot May 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

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.

</div>
<PageContainer>
Expand Down
2 changes: 1 addition & 1 deletion app/auth/2fa/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ function TwoFactorForm() {
<div>
<label
htmlFor="auth-code"
className="text-sm font-medium text-foreground mb-2 block"
className="form-label"
>
Authentication Code
</label>
Expand Down
6 changes: 3 additions & 3 deletions app/auth/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ export default function AuthError({
};

return (
<div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
<div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
<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" />
</div>

<div className="space-y-2">
Expand Down
4 changes: 2 additions & 2 deletions app/auth/signin/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ function SignInForm() {
<div>
<label
htmlFor="signin-detail"
className="text-sm font-medium text-foreground mb-2 block"
className="form-label"
>
Username, email, or phone
</label>
Expand All @@ -138,7 +138,7 @@ function SignInForm() {
</div>

<div>
<label className="text-sm font-medium text-foreground mb-2 block">
<label className="form-label">
Passcode
</label>
<div className="relative">
Expand Down
6 changes: 3 additions & 3 deletions app/auth/signup/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export default function SignUpPage() {
<div>
<label
htmlFor="signup-username"
className="text-sm font-medium text-foreground mb-2 block"
className="form-label"
>
Username
</label>
Expand All @@ -168,7 +168,7 @@ export default function SignUpPage() {
<div>
<label
htmlFor="signup-passcode"
className="text-sm font-medium text-foreground mb-2 block"
className="form-label"
>
Passcode (min 12 characters)
</label>
Expand Down Expand Up @@ -229,7 +229,7 @@ export default function SignUpPage() {
<div>
<label
htmlFor="confirm-passcode"
className="text-sm font-medium text-foreground mb-2 block"
className="form-label"
>
Confirm passcode
</label>
Expand Down
4 changes: 2 additions & 2 deletions app/auth/wallet-setup/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,9 +214,9 @@ export default function WalletSetupPage() {

return (
<>
<div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
<div className="page-header">
<div className="px-4 py-3">
<h1 className="text-lg font-bold text-foreground">Finish Wallet Setup</h1>
<h1 className="page-title">Finish Wallet Setup</h1>
<p className="text-xs text-muted-foreground">Complete your wallet activation</p>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/bills/catalog/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { ArrowLeft } from 'lucide-react';
export default function BillsCatalogPage() {
return (
<>
<div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
<div className="px-4 py-3 flex items-center gap-3">
<Link href="/bills" className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
<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>

@coderabbitai coderabbitai Bot May 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

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="page-title">Bill catalog</h1>
</div>
</div>
<PageContainer>
Expand Down
6 changes: 3 additions & 3 deletions app/bills/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ export default function BillsError({
};

return (
<div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
<div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
<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" />
</div>

<div className="space-y-2">
Expand Down
4 changes: 2 additions & 2 deletions app/bills/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,7 @@ export default function BillsPage() {
<div>
<label
htmlFor="payment-amount"
className="text-sm font-medium text-foreground mb-2 block"
className="form-label"
>
Amount
</label>
Expand Down Expand Up @@ -387,7 +387,7 @@ export default function BillsPage() {
<div>
<label
htmlFor="payment-reference"
className="text-sm font-medium text-foreground mb-2 block"
className="form-label"
>
Reference (optional)
</label>
Expand Down
8 changes: 4 additions & 4 deletions app/bills/pay/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { ArrowLeft } from 'lucide-react';
export default function BillsPayPage() {
return (
<>
<div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
<div className="px-4 py-3 flex items-center gap-3">
<Link href="/bills" className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
<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>

@coderabbitai coderabbitai Bot May 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

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.

<h1 className="page-title">Pay bill</h1>
</div>
</div>
<PageContainer>
Expand Down
8 changes: 4 additions & 4 deletions app/burn/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,16 +194,16 @@ function BurnPageContent() {

return (
<>
<div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
<div className="px-4 py-3 flex items-center gap-3">
<div className="page-header">
<div className="page-header-row">
<Link
href="/mint"
aria-label="Go back to Mint page"
className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"
className="touch-target"
>
<ArrowLeft className="w-5 h-5 text-primary" />
</Link>
<h1 className="text-lg font-bold text-foreground">Withdraw (Burn)</h1>
<h1 className="page-title">Withdraw (Burn)</h1>
</div>
</div>
<PageContainer>
Expand Down
4 changes: 2 additions & 2 deletions app/business/sme/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ export default function SmePage() {
return (
<>
<div className="border-b border-border bg-card/95 backdrop-blur-sm sticky top-0 z-10">
<div className="px-4 py-3 flex items-center gap-3">
<div className="page-header-row">
<Link href="/business" className="text-primary">
<ArrowLeft className="w-5 h-5" />
Comment on lines +21 to 23

@coderabbitai coderabbitai Bot May 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

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.

</Link>
<div>
<h1 className="text-lg font-bold text-foreground">SME Services</h1>
<h1 className="page-title">SME Services</h1>
<p className="text-sm text-muted-foreground">Apply for business banking, transfers, and statements.</p>
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions app/currency/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ export default function CurrencyPage() {
</Card>

<div className="mb-4">
<Label className="text-sm font-medium text-foreground mb-2 block">
<Label className="form-label">
Amount to Mint
</Label>
<div className="flex gap-2">
Expand All @@ -323,7 +323,7 @@ export default function CurrencyPage() {
</div>

<div>
<Label className="text-sm font-medium text-foreground mb-2 block">
<Label className="form-label">
Destination Wallet Address
</Label>
<Input
Expand Down Expand Up @@ -391,7 +391,7 @@ export default function CurrencyPage() {
</Card>

<div>
<Label className="text-sm font-medium text-foreground mb-2 block">
<Label className="form-label">
Amount to Burn
</Label>
<div className="flex gap-2">
Expand Down Expand Up @@ -507,7 +507,7 @@ export default function CurrencyPage() {

<div className="space-y-4">
<div>
<label className="text-sm font-medium text-foreground mb-2 block">
<label className="form-label">
Recipient Country
</label>
<select
Expand All @@ -524,7 +524,7 @@ export default function CurrencyPage() {
</div>

<div>
<label className="text-sm font-medium text-foreground mb-2 block">
<label className="form-label">
Currency
</label>
<select
Expand All @@ -541,7 +541,7 @@ export default function CurrencyPage() {
</div>

<div>
<label className="text-sm font-medium text-foreground mb-2 block">
<label className="form-label">
Amount (ACBU)
</label>
<div className="flex gap-2">
Expand Down
6 changes: 3 additions & 3 deletions app/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export default function Error({
};

return (
<div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
<div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
<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" />

@coderabbitai coderabbitai Bot May 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 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.tsx

Repository: 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.

</div>

<div className="space-y-2">
Expand Down
34 changes: 34 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,3 +123,37 @@
@apply bg-background text-foreground;
}
}

@layer components {
.page-header {
@apply sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm;
}

.page-header-row {
@apply px-4 py-3 flex items-center gap-3;
}

.page-title {
@apply text-lg font-bold text-foreground;
}

.form-label {
@apply text-sm font-medium text-foreground mb-2 block;
}

.error-state {
@apply flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center;
}

.error-icon-wrapper {
@apply rounded-full bg-red-100 dark:bg-red-900/30 p-3;
}

.error-icon {
@apply h-8 w-8 text-red-600 dark:text-red-400;
}

.touch-target {
@apply flex items-center justify-center min-w-[44px] min-h-[44px] -m-2;
}
}
8 changes: 4 additions & 4 deletions app/help/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ export default function HelpPage() {
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-foreground mb-2 block">
<label className="form-label">
Name
</label>
Comment on lines +239 to 241

@coderabbitai coderabbitai Bot May 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

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.

<Input
Expand All @@ -252,7 +252,7 @@ export default function HelpPage() {
</div>

<div>
<label className="text-sm font-medium text-foreground mb-2 block">
<label className="form-label">
Email
</label>
<Input
Expand All @@ -269,7 +269,7 @@ export default function HelpPage() {
</div>

<div>
<label className="text-sm font-medium text-foreground mb-2 block">
<label className="form-label">
Subject
</label>
<Input
Expand All @@ -285,7 +285,7 @@ export default function HelpPage() {
</div>

<div>
<label className="text-sm font-medium text-foreground mb-2 block">
<label className="form-label">
Message
</label>
<Textarea
Expand Down
4 changes: 2 additions & 2 deletions app/lending/admin/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@ export default function LendingAdminPage() {

return (
<>
<header className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
<header className="page-header">
<div className="mx-auto max-w-md px-4 py-4 flex items-center gap-3">
<Link href="/lending" className="p-2 hover:bg-muted rounded transition-colors" aria-label="Back to lending">
<ArrowLeft className="w-5 h-5" />
</Link>
<div className="flex-1">
<h1 className="text-lg font-bold text-foreground">Lending · Backoffice</h1>
<h1 className="page-title">Lending · Backoffice</h1>
<p className="text-xs text-muted-foreground">Review loan applications</p>
</div>
<Button
Expand Down
4 changes: 2 additions & 2 deletions app/lending/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,13 +231,13 @@ export default function LendingPage() {

return (
<>
<header className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
<header className="page-header">
<div className="mx-auto max-w-md px-4 py-4 flex items-center gap-3">
<Link href="/" className="p-2 hover:bg-muted rounded transition-colors" aria-label="Go back">
<ArrowLeft className="w-5 h-5" />
</Link>
<div className="flex-1">
<h1 className="text-lg font-bold text-foreground">Lending</h1>
<h1 className="page-title">Lending</h1>
<p className="text-xs text-muted-foreground">Apply for a loan</p>
</div>
<Link
Expand Down
8 changes: 4 additions & 4 deletions app/me/activity/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ export default function MeActivityPage() {
const router = useRouter();
return (
<>
<div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
<div className="px-4 py-3 flex items-center gap-3">
<Link href="/me" className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
<h1 className="text-lg font-bold text-foreground">My activity</h1>
<div className="page-header">
<div className="page-header-row">
<Link href="/me" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
<h1 className="page-title">My activity</h1>
</div>
</div>
<PageContainer>
Expand Down
6 changes: 3 additions & 3 deletions app/me/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ export default function ProfileError({
};

return (
<div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
<div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
<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" />
</div>

<div className="space-y-2">
Expand Down
Loading