From ab89db0a3b49d8be2be15b403b0dd6873c2e82a3 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Fri, 26 Jun 2026 11:06:18 +0200
Subject: [PATCH] feat(libra): make the "Other" account hint compact

Replace the boxed amber Alert with a single inline amber line (warning
icon + text) on both account-selection steps. Keeps the hint visible
but removes the bulky border/background padding. Drops the now-unused
Alert imports.
---
 src/accounting-app/views/AddIncome.vue         | 13 +++++--------
 src/modules/expenses/components/AddExpense.vue | 13 +++++--------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/accounting-app/views/AddIncome.vue b/src/accounting-app/views/AddIncome.vue
index cc2938f..abb71b9 100644
--- a/src/accounting-app/views/AddIncome.vue
+++ b/src/accounting-app/views/AddIncome.vue
@@ -78,15 +78,13 @@
 
           <!-- Step 1: Revenue Account Selection -->
           <div v-if="currentStep === 1">
-            <p class="text-sm text-muted-foreground mb-4">
+            <p class="text-sm text-muted-foreground mb-1">
               {{ t('libra.income.selectAccount') }}
             </p>
-            <Alert class="mb-4 border-amber-500/50 bg-amber-50 text-amber-800 dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-200">
-              <AlertTriangle class="text-amber-600 dark:text-amber-400" />
-              <AlertDescription class="text-amber-800 dark:text-amber-200">
-                {{ t('libra.income.otherAccountHint') }}
-              </AlertDescription>
-            </Alert>
+            <p class="flex items-center gap-1.5 mb-4 text-sm font-medium text-amber-600 dark:text-amber-400">
+              <AlertTriangle class="h-4 w-4 shrink-0" />
+              {{ t('libra.income.otherAccountHint') }}
+            </p>
             <AccountSelector
               v-model="selectedRevenueAccount"
               root-account="Income"
@@ -203,7 +201,6 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Badge } from '@/components/ui/badge'
-import { Alert, AlertDescription } from '@/components/ui/alert'
 import {
   FormControl,
   FormField,
diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 214f431..2eb1f2a 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -84,15 +84,13 @@
 
       <!-- Step 1: Account Selection -->
       <div v-if="currentStep === 1">
-        <p class="text-sm text-muted-foreground mb-4">
+        <p class="text-sm text-muted-foreground mb-1">
           Select the account for this expense.
         </p>
-        <Alert class="mb-4 border-amber-500/50 bg-amber-50 text-amber-800 dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-200">
-          <AlertTriangle class="text-amber-600 dark:text-amber-400" />
-          <AlertDescription class="text-amber-800 dark:text-amber-200">
-            Use the "Other" account if you're not sure.
-          </AlertDescription>
-        </Alert>
+        <p class="flex items-center gap-1.5 mb-4 text-sm font-medium text-amber-600 dark:text-amber-400">
+          <AlertTriangle class="h-4 w-4 shrink-0" />
+          Use the "Other" account if you're not sure.
+        </p>
         <AccountSelector
           v-model="selectedAccount"
           root-account="Expenses"
@@ -254,7 +252,6 @@ import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Badge } from '@/components/ui/badge'
-import { Alert, AlertDescription } from '@/components/ui/alert'
 import {
   FormControl,
   FormDescription,