Skip to content

Tribu 1.1: Design Overhaul

Choose a tag to compare

View all tags
@itsDNNS itsDNNS released this 28 Mar 08:14
· 347 commits to main since this release
v1.1.0
72d8d86
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Tribu 1.1: Design Overhaul

Complete UI redesign across all views. Stripped AI-generated glassmorphism, extracted ~600 inline styles to CSS, added shared components, and improved accessibility throughout.

Highlights

Design System

  • Solid card backgrounds -- Replaced glassmorphism (backdrop-filter blur) with solid --void-surface backgrounds across all views: dashboard, calendar, rewards, notifications, shopping, tasks, contacts, settings, admin
  • ~600 inline styles extracted -- Every view now uses proper CSS classes instead of inline style objects
  • Consistent spacing -- row-gap/column-gap differentiation, spacing scale enforced throughout
  • Light theme support -- All new classes have proper [data-theme="light"] overrides

Shared Components

  • ConfirmDialog -- Reusable confirmation dialog with focus trap, Escape handling, backdrop click, loading state to prevent double-submit. Replaces all browser confirm() calls
  • FormModal -- Shared modal for contacts and birthdays with focus trap and a11y
  • CurrencyIcon -- Lucide-based currency icons replacing emoji strings (full stack: frontend, backend schema, DB migration)
  • DayDetailPanel -- Deduplicated mobile/desktop calendar day detail into single component
  • DeleteButton -- Shared inline delete confirmation pattern

Dashboard (#118, #120)

  • Content-first layout -- Welcome hero card removed, greeting moved to header
  • Events promoted -- Events card is now the top row (what a parent checks at 7am)
  • Actionable empty states -- CTAs that guide new users (gated for child accounts)
  • Proximity-based birthday colors -- Red (<=3d), amber (<=7d), muted (>7d)
  • Birthday emoji replaced -- Lucide Cake icon with colored backgrounds

Rewards (#119)

  • Visual section differentiation -- Colored left borders: green (earn), amethyst (spend), warning (pending), blue (task)
  • Proper tab pattern -- Segmented control matching calendar, not btn-ghost hack
  • Child progress bar -- Shows progress toward next affordable reward
  • Empty states -- For rules and catalog lists
  • Lucide currency icons -- Full stack migration from emoji to icon names with DB migration (0019)
  • API validation -- Currency icon restricted to known Lucide names via Pydantic regex

Calendar (#121)

  • Floating Action Button -- Visible "+" for event creation at all times
  • DayDetailPanel -- Mobile now has feature parity with desktop (recurrence end-date, end-time)
  • Weekday grid fix -- Removed ghost 40px column from CSS
  • Color swatches -- 32px for proper touch targets
  • Onboarding CTA -- Promoted calendar import for zero-event users

Notifications (#122)

  • Slide-in panel -- Bell icon triggers right-side panel (380px desktop, bottom-sheet mobile) instead of full-page navigation
  • Time grouping -- Heute/Gestern/Alter sections
  • Focus management -- Focus trap, Escape, focus restoration to bell button
  • Keyboard accessible -- Notification rows focusable and activatable

Shopping (#123)

  • Check animation -- Scale bounce on item completion
  • List progress bars -- Visual checked/total indicator on each list card
  • ConfirmDialog -- For list deletion and clearing checked items

Tasks (#124)

  • Collapsible create form -- Title-only by default, "More options" reveals fields
  • ConfirmDialog -- For task deletion with task title in message

Contacts (#125)

  • Shared FormModal -- 506 lines reduced to 208 (-59%)
  • Normalized tabs -- Segmented control matching all other views

Settings (#126)

  • 125 inline styles extracted -- Across all 6 settings tabs
  • Scoped settings-section -- :not(.glass) prevents override when combined with glass elsewhere

Admin (#127)

  • 77 inline styles extracted -- Across all 4 admin files
  • ConfirmDialog loading state -- Buttons disabled during async action, prevents double-submit
  • Time toggle normalized -- Segmented control pattern

Accessibility

  • 44px touch targets -- Enforced on all interactive elements across all views
  • Focus traps -- On ConfirmDialog, FormModal, notification panel
  • Focus restoration -- All dialogs/panels return focus to trigger element
  • aria-expanded -- On collapsible form toggle
  • aria-describedby -- On ConfirmDialog message text
  • sr-only labels -- On CurrencyIcon for screen reader currency context
  • Keyboard navigation -- Notification rows, Enter/Space activation

Testing

  • Unit tests -- 71/71 passing, updated for new class names and ConfirmDialog
  • E2E tests -- 44/44 passing, updated for new dialog patterns
  • Jest config -- e2e/ excluded from Jest runs (pre-existing fix)
Assets 2
Loading