makiolaj/SimpleFinanceDash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(05-03): remove rounded-* and upgrade spacing on all 9 pages

Browse Source 
- DashboardPage: space-y-6->space-y-8, gap-6->gap-8 in chart grid
- BudgetListPage: remove rounded-md from template toggle row
- BudgetDetailPage: remove rounded-sm/md from skeleton and group headings, rounded-md from summary box, rounded-full from category dot
- TemplatePage: remove rounded-sm/full/md from skeleton and group headings and category dot; gap-6->gap-8, space-y-6->space-y-8
- CategoriesPage: remove rounded-sm/full/md from skeleton and group headings; space-y-6->space-y-8
- QuickAddPage: remove rounded-full/md from skeleton items
- SettingsPage: space-y-4->space-y-6 in CardContent (skeleton and live)
This commit is contained in:
Jean-Luc Makiola
2026-04-20 17:16:29 +02:00
parent 12ed62e430
commit 00670afe4e
7 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/BudgetDetailPage.tsx
View File

@@ -287,7 +287,7 @@ export default function BudgetDetailPage() {
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24" />
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<div key={i} className="space-y-2"> <div key={i} className="space-y-2">
<div className="flex items-center gap-3 rounded-sm border-l-4 border-muted bg-muted/30 px-3 py-2"> <div className="flex items-center gap-3 border-l-4 border-muted bg-muted/30 px-3 py-2">
<Skeleton className="h-4 w-28" /> <Skeleton className="h-4 w-28" />
</div> </div>
{[1, 2].map((j) => ( {[1, 2].map((j) => (
@@ -300,7 +300,7 @@ export default function BudgetDetailPage() {
))} ))}
</div> </div>
))} ))}
<Skeleton className="h-20 w-full rounded-md" /> <Skeleton className="h-20 w-full" />
</div> </div>
</PageShell> </PageShell>
) )
@@ -350,7 +350,7 @@ export default function BudgetDetailPage() {
<div key={type}> <div key={type}>
{/* Group heading */} {/* Group heading */}
<div <div
className="mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2" className="mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2"
style={{ borderLeftColor: categoryColors[type] }} style={{ borderLeftColor: categoryColors[type] }}
> >
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span> <span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
@@ -436,7 +436,7 @@ export default function BudgetDetailPage() {
})} })}
{/* Overall totals */} {/* Overall totals */}
<div className="rounded-md border p-4"> <div className="border p-4">
<div className="grid grid-cols-3 gap-4 text-sm"> <div className="grid grid-cols-3 gap-4 text-sm">
<div> <div>
<p className="text-muted-foreground">{t("budgets.budgeted")}</p> <p className="text-muted-foreground">{t("budgets.budgeted")}</p>
@@ -494,7 +494,7 @@ export default function BudgetDetailPage() {
<SelectGroup key={type}> <SelectGroup key={type}>
<SelectLabel className="flex items-center gap-1.5"> <SelectLabel className="flex items-center gap-1.5">
<div <div
className="size-2 rounded-full" className="size-2"
style={{ backgroundColor: categoryColors[type] }} style={{ backgroundColor: categoryColors[type] }}
/> />
{t(`categories.types.${type}`)} {t(`categories.types.${type}`)}

2
src/pages/BudgetListPage.tsx
View File

@@ -240,7 +240,7 @@ export default function BudgetListPage() {
</div> </div>
{/* Template toggle */} {/* Template toggle */}
<div className="flex items-center gap-3 rounded-md border p-3"> <div className="flex items-center gap-3 border p-3">
<input <input
id="use-template" id="use-template"
type="checkbox" type="checkbox"

12
src/pages/CategoriesPage.tsx
View File

@@ -95,17 +95,17 @@ export default function CategoriesPage() {
if (loading) return ( if (loading) return (
<PageShell title={t("categories.title")}> <PageShell title={t("categories.title")}>
<div className="space-y-6"> <div className="space-y-8">
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<div key={i} className="space-y-2"> <div key={i} className="space-y-2">
<div className="flex items-center gap-3 rounded-sm border-l-4 border-muted bg-muted/30 px-3 py-2"> <div className="flex items-center gap-3 border-l-4 border-muted bg-muted/30 px-3 py-2">
<Skeleton className="h-4 w-28" /> <Skeleton className="h-4 w-28" />
</div> </div>
{[1, 2].map((j) => ( {[1, 2].map((j) => (
<div key={j} className="flex items-center gap-4 px-4 py-2.5 border-b border-border"> <div key={j} className="flex items-center gap-4 px-4 py-2.5 border-b border-border">
<Skeleton className="h-4 w-36" /> <Skeleton className="h-4 w-36" />
<Skeleton className="h-5 w-16 rounded-full" /> <Skeleton className="h-5 w-16" />
<Skeleton className="ml-auto h-7 w-7 rounded-md" /> <Skeleton className="ml-auto h-7 w-7" />
</div> </div>
))} ))}
</div> </div>
@@ -127,11 +127,11 @@ export default function CategoriesPage() {
{categories.length === 0 ? ( {categories.length === 0 ? (
<p className="text-muted-foreground">{t("categories.empty")}</p> <p className="text-muted-foreground">{t("categories.empty")}</p>
) : ( ) : (
<div className="space-y-6"> <div className="space-y-8">
{grouped.map(({ type, items }) => ( {grouped.map(({ type, items }) => (
<div key={type}> <div key={type}>
<div <div
className="mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2" className="mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2"
style={{ borderLeftColor: categoryColors[type] }} style={{ borderLeftColor: categoryColors[type] }}
> >
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span> <span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>

4
src/pages/DashboardPage.tsx
View File

@@ -183,7 +183,7 @@ function DashboardContent({ budgetId }: { budgetId: string }) {
const carryoverIsNegative = carryover < 0 const carryoverIsNegative = carryover < 0
return ( return (
<div className="space-y-6"> <div className="space-y-8">
{/* Summary cards */} {/* Summary cards */}
<SummaryStrip <SummaryStrip
income={{ income={{
@@ -204,7 +204,7 @@ function DashboardContent({ budgetId }: { budgetId: string }) {
/> />
{/* 3-column chart grid */} {/* 3-column chart grid */}
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-base">{t("dashboard.expenseDonut")}</CardTitle> <CardTitle className="text-base">{t("dashboard.expenseDonut")}</CardTitle>

4
src/pages/QuickAddPage.tsx
View File

@@ -95,9 +95,9 @@ export default function QuickAddPage() {
<div className="space-y-1"> <div className="space-y-1">
{[1, 2, 3, 4, 5].map((i) => ( {[1, 2, 3, 4, 5].map((i) => (
<div key={i} className="flex items-center gap-4 px-4 py-2.5 border-b border-border"> <div key={i} className="flex items-center gap-4 px-4 py-2.5 border-b border-border">
<Skeleton className="h-5 w-10 rounded-full" /> <Skeleton className="h-5 w-10" />
<Skeleton className="h-4 w-36" /> <Skeleton className="h-4 w-36" />
<Skeleton className="ml-auto h-7 w-7 rounded-md" /> <Skeleton className="ml-auto h-7 w-7" />
</div> </div>
))} ))}
</div> </div>

4
src/pages/SettingsPage.tsx
View File

@@ -66,7 +66,7 @@ export default function SettingsPage() {
<PageShell title={t("settings.title")}> <PageShell title={t("settings.title")}>
<div className="max-w-lg"> <div className="max-w-lg">
<Card> <Card>
<CardContent className="space-y-4 pt-6"> <CardContent className="space-y-6 pt-6">
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<div key={i} className="space-y-2"> <div key={i} className="space-y-2">
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24" />
@@ -84,7 +84,7 @@ export default function SettingsPage() {
<PageShell title={t("settings.title")}> <PageShell title={t("settings.title")}>
<div className="max-w-lg"> <div className="max-w-lg">
<Card> <Card>
<CardContent className="space-y-4 pt-6"> <CardContent className="space-y-6 pt-6">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t("settings.displayName")}</Label> <Label>{t("settings.displayName")}</Label>
<Input <Input

18
src/pages/TemplatePage.tsx
View File

@@ -239,23 +239,23 @@ export default function TemplatePage() {
// ------------------------------------------------------------------ // ------------------------------------------------------------------
if (loading) return ( if (loading) return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-8">
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
<Skeleton className="h-8 w-48" /> <Skeleton className="h-8 w-48" />
<Skeleton className="h-9 w-24" /> <Skeleton className="h-9 w-24" />
</div> </div>
<div className="space-y-6"> <div className="space-y-8">
{[1, 2].map((i) => ( {[1, 2].map((i) => (
<div key={i} className="space-y-2"> <div key={i} className="space-y-2">
<div className="flex items-center gap-3 rounded-sm border-l-4 border-muted bg-muted/30 px-3 py-2"> <div className="flex items-center gap-3 border-l-4 border-muted bg-muted/30 px-3 py-2">
<Skeleton className="h-4 w-28" /> <Skeleton className="h-4 w-28" />
</div> </div>
{[1, 2, 3].map((j) => ( {[1, 2, 3].map((j) => (
<div key={j} className="flex items-center gap-4 px-4 py-2.5 border-b border-border"> <div key={j} className="flex items-center gap-4 px-4 py-2.5 border-b border-border">
<Skeleton className="h-4 w-36" /> <Skeleton className="h-4 w-36" />
<Skeleton className="h-5 w-16 rounded-full" /> <Skeleton className="h-5 w-16" />
<Skeleton className="ml-auto h-4 w-20" /> <Skeleton className="ml-auto h-4 w-20" />
<Skeleton className="h-7 w-7 rounded-md" /> <Skeleton className="h-7 w-7" />
</div> </div>
))} ))}
</div> </div>
@@ -265,7 +265,7 @@ export default function TemplatePage() {
) )
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-8">
{/* Header — mirrors PageShell's flex items-start justify-between gap-4 layout */} {/* Header — mirrors PageShell's flex items-start justify-between gap-4 layout */}
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
<TemplateName <TemplateName
@@ -284,12 +284,12 @@ export default function TemplatePage() {
{items.length === 0 ? ( {items.length === 0 ? (
<p className="text-muted-foreground">{t("template.empty")}</p> <p className="text-muted-foreground">{t("template.empty")}</p>
) : ( ) : (
<div className="space-y-6"> <div className="space-y-8">
{grouped.map(({ type, items: groupItems }) => ( {grouped.map(({ type, items: groupItems }) => (
<div key={type}> <div key={type}>
{/* Group heading */} {/* Group heading */}
<div <div
className="mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2" className="mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2"
style={{ borderLeftColor: categoryColors[type] }} style={{ borderLeftColor: categoryColors[type] }}
> >
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span> <span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
@@ -382,7 +382,7 @@ export default function TemplatePage() {
<SelectGroup key={type}> <SelectGroup key={type}>
<SelectLabel className="flex items-center gap-1.5"> <SelectLabel className="flex items-center gap-1.5">
<div <div
className="size-2 rounded-full" className="size-2"
style={{ backgroundColor: categoryColors[type] }} style={{ backgroundColor: categoryColors[type] }}
/> />
{t(`categories.types.${type}`)} {t(`categories.types.${type}`)}