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" />
{[1, 2, 3].map((i) => (
<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" />
</div>
{[1, 2].map((j) => (
@@ -300,7 +300,7 @@ export default function BudgetDetailPage() {
))}
</div>
))}
<Skeleton className="h-20 w-full rounded-md" />
<Skeleton className="h-20 w-full" />
</div>
</PageShell>
)
@@ -350,7 +350,7 @@ export default function BudgetDetailPage() {
<div key={type}>
{/* Group heading */}
<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] }}
>
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
@@ -436,7 +436,7 @@ export default function BudgetDetailPage() {
})}
{/* 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>
<p className="text-muted-foreground">{t("budgets.budgeted")}</p>
@@ -494,7 +494,7 @@ export default function BudgetDetailPage() {
<SelectGroup key={type}>
<SelectLabel className="flex items-center gap-1.5">
<div
className="size-2 rounded-full"
className="size-2"
style={{ backgroundColor: categoryColors[type] }}
/>
{t(`categories.types.${type}`)}

2
src/pages/BudgetListPage.tsx
View File

@@ -240,7 +240,7 @@ export default function BudgetListPage() {
</div>
{/* 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
id="use-template"
type="checkbox"

12
src/pages/CategoriesPage.tsx
View File

@@ -95,17 +95,17 @@ export default function CategoriesPage() {
if (loading) return (
<PageShell title={t("categories.title")}>
<div className="space-y-6">
<div className="space-y-8">
{[1, 2, 3].map((i) => (
<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" />
</div>
{[1, 2].map((j) => (
<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-5 w-16 rounded-full" />
<Skeleton className="ml-auto h-7 w-7 rounded-md" />
<Skeleton className="h-5 w-16" />
<Skeleton className="ml-auto h-7 w-7" />
</div>
))}
</div>
@@ -127,11 +127,11 @@ export default function CategoriesPage() {
{categories.length === 0 ? (
<p className="text-muted-foreground">{t("categories.empty")}</p>
) : (
<div className="space-y-6">
<div className="space-y-8">
{grouped.map(({ type, items }) => (
<div key={type}>
<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] }}
>
<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
return (
<div className="space-y-6">
<div className="space-y-8">
{/* Summary cards */}
<SummaryStrip
income={{
@@ -204,7 +204,7 @@ function DashboardContent({ budgetId }: { budgetId: string }) {
/>
{/* 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>
<CardHeader>
<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">
{[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">
<Skeleton className="h-5 w-10 rounded-full" />
<Skeleton className="h-5 w-10" />
<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>

4
src/pages/SettingsPage.tsx
View File

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

18
src/pages/TemplatePage.tsx
View File

@@ -239,23 +239,23 @@ export default function TemplatePage() {
// ------------------------------------------------------------------
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">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-9 w-24" />
</div>
<div className="space-y-6">
<div className="space-y-8">
{[1, 2].map((i) => (
<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" />
</div>
{[1, 2, 3].map((j) => (
<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-5 w-16 rounded-full" />
<Skeleton className="h-5 w-16" />
<Skeleton className="ml-auto h-4 w-20" />
<Skeleton className="h-7 w-7 rounded-md" />
<Skeleton className="h-7 w-7" />
</div>
))}
</div>
@@ -265,7 +265,7 @@ export default function TemplatePage() {
)
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 */}
<div className="flex items-start justify-between gap-4">
<TemplateName
@@ -284,12 +284,12 @@ export default function TemplatePage() {
{items.length === 0 ? (
<p className="text-muted-foreground">{t("template.empty")}</p>
) : (
<div className="space-y-6">
<div className="space-y-8">
{grouped.map(({ type, items: groupItems }) => (
<div key={type}>
{/* Group heading */}
<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] }}
>
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
@@ -382,7 +382,7 @@ export default function TemplatePage() {
<SelectGroup key={type}>
<SelectLabel className="flex items-center gap-1.5">
<div
className="size-2 rounded-full"
className="size-2"
style={{ backgroundColor: categoryColors[type] }}
/>
{t(`categories.types.${type}`)}