Gladyson/openmonetis
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: adjust padding and layout in various dashboard widgets for improved UI consistency

Browse Source
This commit is contained in:
Felipe Coutinho
2025-12-02 13:54:13 +00:00
parent 9cf89829f6
commit 9d03387079
5 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/globals.css
View File

@@ -74,7 +74,6 @@
--shadow-xl: 0 20px 25px -5px oklch(35% 0.02 45 / 0.1), --shadow-xl: 0 20px 25px -5px oklch(35% 0.02 45 / 0.1),
0 8px 10px -6px oklch(35% 0.02 45 / 0.08); 0 8px 10px -6px oklch(35% 0.02 45 / 0.08);
--shadow-2xl: 0 25px 50px -12px oklch(35% 0.02 45 / 0.2); --shadow-2xl: 0 25px 50px -12px oklch(35% 0.02 45 / 0.2);
--tracking-normal: 0em; --tracking-normal: 0em;
--spacing: 0.25rem; --spacing: 0.25rem;
@@ -106,7 +105,7 @@
/* Muted - subtle surface variant */ /* Muted - subtle surface variant */
--muted: oklch(20% 0.004 285); --muted: oklch(20% 0.004 285);
--muted-foreground: oklch(60% 0.003 285); --muted-foreground: oklch(72.285% 0.00436 286.016);
/* Accent - subtle highlight */ /* Accent - subtle highlight */
--accent: oklch(26% 0.006 285); --accent: oklch(26% 0.006 285);
@@ -230,7 +229,7 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
scroll-padding-top: 80px; /* Offset para o header sticky */ scroll-padding-top: 80px;
} }
body { body {

5
components/dashboard/installment-expenses-widget.tsx
View File

@@ -172,11 +172,12 @@ export function InstallmentExpensesWidget({
<p className="text-xs text-muted-foreground "> <p className="text-xs text-muted-foreground ">
{endDate && `Termina em ${endDate}`} {endDate && `Termina em ${endDate}`}
{` - Restante (${remainingInstallments}) `} {" | Restante "}
<MoneyValues <MoneyValues
amount={remainingAmount} amount={remainingAmount}
className="inline-block font-medium" className="inline-block font-medium"
/> />{" "}
({remainingInstallments})
</p> </p>
<Progress value={progress} className="h-2 mt-1" /> <Progress value={progress} className="h-2 mt-1" />

4
components/dashboard/payment-conditions-widget.tsx
View File

@@ -53,12 +53,12 @@ export function PaymentConditionsWidget({
return ( return (
<li <li
key={condition.condition} key={condition.condition}
className="flex items-center gap-3 border-b border-dashed pb-4 last:border-b-0 last:pb-0" className="flex items-center gap-3 border-b border-dashed pb-3 last:border-b-0 last:pb-0"
> >
<div className={CONDITION_ICON_CLASSES}>{Icon}</div> <div className={CONDITION_ICON_CLASSES}>{Icon}</div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between">
<p className="font-medium text-foreground text-sm"> <p className="font-medium text-foreground text-sm">
{condition.condition} {condition.condition}
</p> </p>

4
components/dashboard/payment-methods-widget.tsx
View File

@@ -54,12 +54,12 @@ export function PaymentMethodsWidget({ data }: PaymentMethodsWidgetProps) {
return ( return (
<li <li
key={method.paymentMethod} key={method.paymentMethod}
className="flex items-center gap-3 border-b border-dashed pb-4 last:border-b-0 last:pb-0" className="flex items-center gap-3 border-b border-dashed pb-3 last:border-b-0 last:pb-0"
> >
<div className={ICON_WRAPPER_CLASS}>{icon}</div> <div className={ICON_WRAPPER_CLASS}>{icon}</div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between">
<p className="font-medium text-foreground text-sm"> <p className="font-medium text-foreground text-sm">
{method.paymentMethod} {method.paymentMethod}
</p> </p>

8
components/dashboard/recurring-expenses-widget.tsx
View File

@@ -37,12 +37,12 @@ export function RecurringExpensesWidget({
return ( return (
<li <li
key={expense.id} key={expense.id}
className="flex items-start gap-3 border-b border-dashed pb-2 last:border-b-0 last:pb-0" className="flex items-center gap-3 border-b border-dashed pb-2 last:border-b-0 last:pb-0"
> >
<EstabelecimentoLogo name={expense.name} size={38} /> <EstabelecimentoLogo name={expense.name} size={38} />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between">
<p className="truncate text-foreground text-sm font-medium"> <p className="truncate text-foreground text-sm font-medium">
{expense.name} {expense.name}
</p> </p>
@@ -50,11 +50,11 @@ export function RecurringExpensesWidget({
<MoneyValues amount={expense.amount} /> <MoneyValues amount={expense.amount} />
</div> </div>
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground"> <div className="flex items-center justify-between text-xs text-muted-foreground">
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
{expense.paymentMethod} {expense.paymentMethod}
</span> </span>
-<span>{formatOccurrences(expense.recurrenceCount)}</span> <span>{formatOccurrences(expense.recurrenceCount)}</span>
</div> </div>
</div> </div>
</li> </li>