feat: UI redesign — dashboard, components, animations

[Ermolz69]

Overview

Full visual and interaction redesign of Sheetly across the dashboard, shared components, analytics, and the setup screen. No breaking changes to data models or API contracts.

---

Changes by area

Dashboard

• Balance hero card (2/3 width on desktop): large balance figure, sparkline chart that bleeds to card edges, month-delta badge (green/red based on sign)
• Income / Expense metric cards: colored corner glow orbs, direction icon pill (up/down arrow)
• Layout: lg:grid-cols-3 grid — hero takes lg:col-span-2, metric cards stack in the right column

Card component

Added variant prop with five options:

Variant	Purpose
default	General content surfaces
elevated	Hero / prominent cards with stronger shadow
metric	Gradient background for stat blocks
glass	Frosted glass for overlays
danger	Destructive-state surfaces

Base class adds transition-[transform,box-shadow,border-color] duration-200 to every variant so hover effects work without extra config.

Color system

Semantic CSS tokens expanded in index.css (@theme):

• Income: --color-success, --color-success-soft
• Expense: --color-danger, --color-danger-soft
• Balance/brand: --color-brand, --color-brand-soft
• Matching dark-mode overrides under [data-theme='dark']

Transactions list

Replaced the spreadsheet-style grid with bank-style rows:

• Circle avatar with the first letter of the category name (green = income, red = expense, gray = deleted)
• Category name + meta row (date · paymentMethod · comment)
• Colored amount column + sync status badge
• Deleted rows have muted background and strikethrough text

Analytics

• Picker drawer now slides in from the right (animate-drawer-in-right) with a backdrop overlay
• Chart cards get hover:border-brand on hover
• Labels renamed for clarity: Slot 1/2 -> Main insight / Secondary insight, Wide chart -> Focus view, Change -> Customize, Split view -> Two-column view
• "Choose charts" button renamed to "Customize dashboard"

Create Transaction modal

Replaced the <Select> for transaction kind with a segmented pill control: Expense (red active state) / Income (green active state). Tap-to-switch, no dropdown.

Empty states

Added five SVG line-art illustrations (stroke-only, currentColor for light/dark compatibility):

• wallet — used in TransactionsHistory
• chart — used in DashboardAnalytics
• receipt, spreadsheet, sync — available for future use

Setup screen

Redesigned as a split landing layout on desktop (lg:grid-cols-2):

• Left panel: logo, headline with brand-color accent, three feature bullets with green checkmarks, two decorative glow orbs, decorative mini dashboard preview
• Right panel: Card variant="elevated" with connect and settings buttons

Micro-animations

Added via CSS @keyframes (no new runtime dependencies):

Element	Animation
Buttons	active:scale-[0.98] press feedback; disabled:active:scale-100 guard
Modal backdrop	animate-backdrop-in — fade in
Modal dialog	animate-modal-in — fade + scale from 0.97
Analytics drawer	animate-drawer-in-right — slide + fade from right
Skeleton	Replaced animate-pulse with animate-shimmer — moving gradient
Balance hero card	hover:-translate-y-0.5 hover:shadow-2xl
Metric cards	hover:-translate-y-0.5 hover:shadow-md
Chart slot cards	hover:border-brand

---

Test plan

• Dashboard loads with correct hero / metric layout on mobile and desktop
• Balance sparkline renders only when there are more than 2 transactions
• Month-delta badge is green (positive) and red (negative)
• Hovering Balance, Income, Expense cards produces lift animation
• Transaction rows show correct icon color for income / expense / deleted
• Deleted transactions have muted background and strikethrough
• Create Transaction modal — pill toggle switches kind correctly, form submits
• Opening the analytics drawer produces slide-in animation and backdrop
• Chart slot cards show brand border on hover
• Modal open produces fade + scale entrance
• Skeleton shimmer is visible during loading state
• Button press produces scale feedback; disabled buttons do not scale
• Light and dark themes render all color tokens correctly
• Setup screen shows split layout on lg+ and single column on mobile
• TypeScript: tsc --noEmit exits clean