senke
e197ba8734
feat(ui): form polish + micro-interactions for premium feel
...
Forms quality:
- Password visibility toggle (Eye/EyeOff) on FloatingInput, AuthInput
- Applied to LoginForm and RegisterForm password fields
- Focus glow effect on all inputs (primary color shadow ring)
- Error shake animation (0.4s spring shake on validation errors)
Micro-interactions:
- Like button bounce animation (scale 1→1.3→0.9→1.1→1)
- useCopyToClipboard hook — reusable copy with visual feedback
- Applied to CreateAPIKeyModal, ShareDialog, SharePostModal (Check icon swap)
- Universal button press effect: active:scale-[0.98] on all variants
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:31:52 +01:00
senke
1e897c95a0
ui(tokens): migrate kodo-cyan to primary (51 files, 88 instances)
...
Replace legacy text-kodo-cyan/border-kodo-cyan/bg-kodo-cyan with semantic
text-primary/border-primary/bg-primary across 51 components.
The brand primary color now uses the design system token, enabling proper
theme adaptation. Covers UI primitives, search, dashboard, chat, playlists,
settings, social, marketplace, and auth components.
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:19:12 +01:00
senke
f9ed6915fc
ui(tokens): migrate text-kodo-red → text-destructive, text-kodo-lime → text-success (56 files)
...
Replace remaining legacy semantic color tokens:
- text-kodo-red → text-destructive (36 files, 50 instances): errors,
deletions, validation, destructive actions
- text-kodo-lime → text-success (36 files, 48 instances): success states,
confirmations, positive indicators
These tokens now adapt to theme changes instead of being hardcoded.
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:14:40 +01:00
senke
66a56409ad
feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout
...
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y):
- Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source
for layout/shell (index.css), shadows (design-system.css), durations/easing.
- Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height
(max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500
replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes.
- Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls,
AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item,
TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable.
- ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary.
- Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts.
- Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories.
- .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification.
- apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual).
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 17:15:58 +01:00
