Files

T

Fusion 2b5331a1a0 feat: implement responsive spacing improvements

- Add CSS custom properties for spacing scale (4px base), breakpoints, and fluid typography
- Create layout utilities: Container, Stack, Row, Grid
- Update AppShell with responsive mobile navigation
- Update card grid with responsive columns
- Update dialogs with viewport-aware sizing and mobile fullscreen
- Update workspace layout for mobile stacking
- Ensure minimum 44px touch targets for buttons
- Add table-responsive and text truncation utilities
- Update page headers for mobile stacking

Quality gates: typecheck ✓, lint ✓, build ✓

2026-05-19 19:50:36 +02:00

2.2 KiB

Raw Blame History

Universal Icon System

Problem

The current project uses inconsistent icon implementations across the frontend:

Raw Unicode symbols (✓, ✗, ⚠, etc.) which render differently across browsers and operating systems
No standardized icon component or library
Inconsistent visual language throughout the UI
Some icons may not render at all on certain systems

This creates a fragmented user experience and potential accessibility issues.

Solution

Implement a universal icon system using Phosphor Icons - a comprehensive, lightweight icon library designed for modern web applications:

Consistent rendering across all browsers and platforms
Comprehensive icon set with 7000+ icons covering all use cases
Multiple weights (thin, light, regular, bold, fill, duotone) for flexibility
Tree-shakeable - only includes icons that are actually used
React integration with phosphor-react library
Accessible with proper ARIA labels and focus management

Key Features

Icon Component

Centralized <Icon> component wrapping Phosphor icons
Consistent sizing (sm, md, lg, xl)
Color inheritance from parent or explicit color prop
Accessibility support (aria-label, role)

Icon Categories

Navigation (home, settings, user, etc.)
Actions (edit, delete, save, add, etc.)
Status (success, error, warning, info)
Files and folders
Git operations (branch, commit, merge, etc.)
Development tools (terminal, code, database, etc.)

Migration Strategy

Replace all raw Unicode symbols with proper icon components
Update existing components to use the new icon system
Maintain visual consistency during migration

Benefits

Cross-browser consistency - Icons render identically everywhere
Better accessibility - Screen reader friendly with proper labels
Improved maintainability - Single source of truth for icons
Enhanced UX - Professional, polished appearance
Future-proof - Easy to add new icons as needed

Success Criteria

All raw Unicode symbols replaced with icon components
Consistent icon sizing and styling across all pages
No visual regressions in existing UI
Icons render correctly in all supported browsers

2.2 KiB Raw Blame History