senke
c9fe2318a9
aesthetic-improvements: reduce decorative cyan in UI components (80/20 rule, batch 9)
...
- LiveView: decorative chat message username color (text-kodo-cyan → text-kodo-steel)
- Sidebar: decorative section header icon (text-kodo-cyan → text-kodo-steel)
- CartView: decorative promo code link (text-kodo-cyan → text-kodo-steel)
- Total: ~3 files, ~3 instances replaced
- Preserved: Functional links (LoginPage register link, RegisterPage login link, LiveView streamer profile link, LiveView wallet link), design system variants (Spinner default variant, alert.tsx info variant, badge.tsx cyan variant, ErrorDisplay.tsx info variant, Toast.tsx info variant, Alert.tsx info variant - intentional design system options), semantic status indicators (PasswordStrengthIndicator strong password - semantic color), interactive states (radio-group.tsx focus/interaction, select.tsx selected option, dropdown-menu.tsx checked state), primary actions
- Action 11.3.1.3 in progress (ninth batch: UI components decorative elements)
2026-01-16 11:21:33 +01:00
senke
7ca691f9cb
aesthetic-improvements: reduce decorative cyan in views and pages (80/20 rule, batch 8)
...
- Loading spinners: PurchasesView, NotificationsView, MarketplaceView, EducationView, SearchPageView (text-kodo-cyan → text-kodo-steel, 5 instances)
- Decorative text/emphasis: CartView total price, CheckoutView total price, FullPlayer artist name, DashboardPage username highlight (text-kodo-cyan → text-kodo-steel, 4 instances)
- Decorative icons: CheckoutView credit card icon, CreateGroupModal header icon, DeveloperPage icon, SocialPage icon, DashboardPage activity icons (text-kodo-cyan → text-kodo-steel, 5 instances)
- Informational badges: PurchasesView product type badge (text-kodo-cyan → text-kodo-steel, 1 instance)
- Total: ~10 files, ~15 instances replaced
- Preserved: Active/selected states (DashboardPage selected button 30J, CheckoutView checkbox accents - focus/interaction, SearchPageView radio button accent - focus/interaction), primary actions, design system variants, functional loading indicators (PlayerLoading spinner - already preserved)
- Action 11.3.1.3 in progress (eighth batch: views and pages decorative elements)
2026-01-16 11:19:41 +01:00
senke
03b9873953
aesthetic-improvements: reduce more decorative cyan backgrounds (80/20 rule, batch 5)
...
- PostCard: poll progress bar background (bg-kodo-cyan/20 → bg-kodo-steel/20) - decorative visualization
- SharePostModal: quote option icon background (bg-kodo-cyan/10 → bg-kodo-steel/10, text-kodo-cyan → text-kodo-steel) - decorative icon
- TrackAnalyticsView: chart bar background (bg-kodo-cyan/20 → bg-kodo-steel/20) - decorative visualization
- Total: ~3 files, ~3 instances replaced
- Preserved: Active/selected states (QuizModal selected answer, CourseLearningView active lesson), primary actions
- Action 11.3.1.3 in progress (fifth batch: social and analytics decorative elements)
2026-01-16 11:13:36 +01:00
senke
318b8df131
aesthetic-improvements: reduce informational cyan backgrounds (80/20 rule, batch 4)
...
- OfflineQueueManager: normal priority badge and info banner (2 instances) - informational status indicators
- Total: ~1 file, ~2 instances replaced
- Preserved: Active/selected states (select.tsx selected option), design system variants (badge.tsx cyan variant, StatCard.tsx cyan variant - intentional design system options), informational alerts/toasts (alert.tsx info, Toast.tsx info, ErrorDisplay.tsx info - important status indicators), BulkModeBanner active state (functional active mode indicator)
- Action 11.3.1.3 in progress (fourth batch: informational status indicators)
2026-01-16 11:08:45 +01:00
senke
e79d6f9f87
aesthetic-improvements: replace Header decorative icon (80/20 rule, batch 3 follow-up)
...
- Header.tsx: decorative icon background (bg-kodo-cyan/20 → bg-kodo-steel/20, border-kodo-cyan/30 → border-kodo-steel/30, icon text-kodo-cyan → text-kodo-steel, shadow-neon-cyan/20 → shadow-2xl)
- Preserved: Header active notification state (isUserMenuOpen) - correctly keeps cyan
- Action 11.3.1.3 in progress (third batch follow-up)
2026-01-16 11:07:31 +01:00
senke
f399327097
aesthetic-improvements: reduce more decorative cyan backgrounds (80/20 rule, batch 3)
...
- Layout components: Sidebar hub header icon, Header icon background (2 instances) - decorative icons
- AutoMetadataDetectionModal: modal border (decorative)
- CourseDetailView: card border (decorative)
- Total: ~4 files, ~4 instances replaced
- Preserved: Active/selected states (AudioPlayer dragged item, Header active notification, VisualizerSettingsModal selected mode, CreateProjectModal selected DAW, AIToolsView active tool, CourseLearningView active lesson, TipStreamerModal selected payment, CloudFileBrowser active tag, PlaylistDetailView dragged item, AddToPlaylistModal selected playlist, CreatorModal selected visibility)
- Action 11.3.1.3 in progress (third batch: layout and modal decorative elements)
2026-01-16 11:07:01 +01:00
senke
8588e3a9aa
aesthetic-improvements: reduce more decorative cyan backgrounds (80/20 rule, batch 2)
...
- Settings modals: DataExportView, ChangeEmailModal, PasskeyModal decorative icon backgrounds (3 instances)
- DashboardPage: chart bars and tooltip (decorative visualization, 2 instances)
- TwoFactorSetup: decorative icon background (1 instance)
- Total: ~6 files, ~6 instances replaced
- Preserved: Active/selected states (DashboardPage selected button, TrackList current track indicator, StudioView active tab, SessionManagement current session, AccountSettings selected theme, IntegrationsView connected state)
- Action 11.3.1.3 in progress (second batch: settings modals and chart visualization)
2026-01-16 11:05:45 +01:00
senke
baebc293eb
aesthetic-improvements: reduce decorative cyan backgrounds (80/20 rule)
...
- KodoEmptyState: decorative background blur and border (bg-kodo-cyan/20 → bg-kodo-steel/20, border-kodo-cyan/30 → border-kodo-steel/30, icon text-kodo-cyan → text-kodo-steel)
- PWAInstallBanner: decorative icon background and blur effect (2 instances)
- Page headers: SettingsPage, GearPage, DeveloperPage, SocialPage icon backgrounds (4 instances) - decorative header icons
- DashboardPage: activity item icon gradient background (decorative)
- FileManagerView: selection banner background (decorative)
- Total: ~8 files, ~9 instances replaced
- Preserved: Active/selected states (StudioView active tab, AccountSettings selected theme, SessionManagement current session), primary actions, informational alerts
- Action 11.3.1.3 in progress (first batch: decorative backgrounds)
2026-01-16 11:03:48 +01:00
senke
46f586b6af
aesthetic-improvements: replace remaining secondary cyan hover states with steel
...
- TrackListSelectionActions: clear selection button hover (1 instance)
- CreateGroupModal: upload zone placeholder text hover (1 instance)
- AddToPlaylistModal: new playlist button icon hover (1 instance)
- Total: ~3 files, ~3 instances replaced
- Preserved: Primary send button (ChatInput), all primary player controls, all primary CTAs
- Action 11.3.1.2 in progress (sixth batch complete)
2026-01-16 11:00:12 +01:00
senke
936b2c36fe
aesthetic-improvements: replace secondary cyan hover states with steel (batch 5)
...
- PlayerControls: visualizer toggle hover text (1 instance)
- Header: theme toggle hover text (1 instance)
- PlaylistCard: checkbox hover border (1 instance)
- GearView: equipment card hover border (1 instance)
- ProfileView: track title hover text (1 instance)
- ProjectsManager: project title hover text (1 instance)
- CourseCard: course title hover text (1 instance)
- TwoFactorSetup: 2FA option hover states (2 instances: bg and text)
- Total: ~8 files, ~9 instances replaced
- Preserved: Active/selected states (cyan), primary actions (cyan)
- Action 11.3.1.2 in progress (fifth batch complete)
2026-01-16 10:59:09 +01:00
senke
4396d9ea63
aesthetic-improvements: replace secondary cyan hover states with steel (batch 4)
...
- LibraryPage: card hover border, title hover text (3 instances, also removed scale transform)
- ProductCard: title hover text (1 instance)
- TrackListSelectionActions: action button hovers (5 instances: play, like, download, more, clear) - replaced with hover:bg-white/5
- AuthLayout: footer link hover text (1 instance)
- Pages: SocialPage, GearPage, DeveloperPage outline button hovers (3 instances)
- SocialPage: comment button hover text (1 instance)
- Total: ~8 files, ~14 instances replaced
- Preserved: Primary buttons (cyan), player control buttons (cyan - primary actions), AuthButton primary variant (cyan)
- Action 11.3.1.2 in progress (fourth batch complete)
2026-01-16 10:57:14 +01:00
senke
16df575a9a
aesthetic-improvements: replace secondary cyan hover states with steel (batch 3)
...
- UI components: accordion hover text (1 file)
- Player components: AudioPlayer, MiniPlayer icon button hovers (2 files, 3 instances)
- Social components: CreatePostModal, SharePostModal, ProductDetailView (3 files, 3 instances)
- Settings: AccessibilitySettingsView hover text (1 file)
- Analytics: TrackAnalyticsView, AnalyticsView chart bar hovers (2 files, 2 instances)
- Gamification: LeaderboardView hover text (1 file)
- Upload: FileUploadZone hover border (1 file)
- Banner: BulkModeBanner close button hover (1 file)
- Total: ~12 files, ~15 instances replaced
- Preserved: Focus rings (cyan), active/selected states (cyan), primary actions (cyan)
- Note: ChatSidebar selected state hover kept cyan (primary state)
- Note: VirtualizedChatMessages scroll button kept cyan (primary action)
- Action 11.3.1.2 in progress (third batch complete)
2026-01-16 10:55:42 +01:00
senke
132da11941
aesthetic-improvements: replace secondary cyan hover states with steel (batch 2)
...
- Card components: CartItem, WishlistView, PostCard, GroupCard, PlaylistsView, UserCard (7 files)
- Settings components: BackupsView, SessionManagement, CloudIntegrationView, OfflineQueueManager (4 files)
- DashboardPage: stat cards and activity items hover states (2 instances)
- FeedView: input and button hover states (2 instances)
- Upload zones: MetadataForm, CreatePlaylistModal, CreateProductView, AddEquipmentView, CreateGroupModal (5 files, 6 instances)
- UserCard: avatar border hover state
- Total: ~18 files, ~20 instances replaced
- Preserved: Focus rings (cyan), active/selected states (cyan)
- Action 11.3.1.2 in progress (second batch complete)
2026-01-16 10:53:34 +01:00
senke
0a9c67de40
aesthetic-improvements: replace secondary cyan hover states with steel
...
- Button outline variant: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- Header secondary nav: hover:text-kodo-cyan → hover:text-white, hover:bg-kodo-cyan/5 → hover:bg-white/5
- FileManagerView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50 (kept selected state cyan)
- ProjectsManager: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50, hover:text-kodo-cyan → hover:text-white
- GroupDetailView: hover:border-kodo-cyan/30 → hover:border-kodo-steel/50
- AIToolsView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- CloudFileBrowser: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50 (kept selected state cyan)
- ProfileView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- CourseCard: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- TwoFactorSetup: hover:border-kodo-cyan → hover:border-kodo-steel/50
- GearView: hover:text-kodo-cyan → hover:text-white, hover:border-kodo-cyan → hover:border-kodo-steel/50
- ChatInput: hover:text-kodo-cyan → hover:text-white (3 instances)
- ChatMessage: hover:text-kodo-cyan → hover:text-white (2 instances)
- ChatRoom: hover:text-kodo-cyan → hover:text-white
- AddToPlaylistModal: hover:border-kodo-cyan → hover:border-kodo-steel/50, hover:text-kodo-cyan → hover:text-white
- Preserved focus rings (cyan) and active/selected states (cyan) as per audit
- Action 11.3.1.2 in progress (first batch of ~15 files)
2026-01-16 10:51:30 +01:00
senke
b711eee52d
aesthetic-improvements: increase card padding for more whitespace
...
- Increased CardHeader padding from p-6 (24px) to p-8 (32px)
- Increased CardContent padding from p-6 (24px) to p-8 (32px)
- Increased CardFooter padding from p-6 (24px) to p-8 (32px)
- All values align to 8px grid system (32px = 4× base)
- Provides more breathing room and improves visual hierarchy
- Aligns with Surgical Minimalism principle of increased whitespace
- Action 11.4.3.1 complete
2026-01-16 10:39:37 +01:00
senke
f8bffc8fa3
aesthetic-improvements: remove gradients from card components
...
- Removed decorative hover gradient overlay from UserCard
- Replaced gradient backgrounds with solid colors in PostCard, MyCoursesView, DiscoverView
- Genre cards now use solid bg-kodo-graphite with border instead of colorful gradients
- All card components now use solid backgrounds, aligning with Surgical Minimalism
- Updated 4 files: UserCard, PostCard, MyCoursesView, DiscoverView
- Action 11.4.2.1 complete
2026-01-16 10:36:29 +01:00
senke
85911dce7f
aesthetic-improvements: remove excessive hover effects from high-priority files
...
- Removed scale transforms (hover:scale-[1.02], hover:scale-110, group-hover:scale-110/105) from cards and images
- Removed decorative shadow/glow effects (hover:shadow-neon-cyan/20, hover:shadow-lg) from cards
- Removed hover-lift class (translateY + shadow) from base Card and Button components
- Replaced excessive effects with subtle hover:bg-white/5 or hover:opacity-90
- Preserved functional hover states (group-hover:opacity-100 for play overlays, hover:bg-accent/50 for interactive feedback)
- Updated 14 files: ProductCard, TrackCard, CourseCard, EquipmentCard, PostCard, ProfileView, card.tsx, SearchPage, PlayerControls, OrderSummary, DiscoverView, PlaylistCard, Sidebar, button.tsx
- Effects are now subtle and purposeful, aligning with Surgical Minimalism
- Action 11.4.1.3 complete
2026-01-16 10:34:41 +01:00
senke
0c6700acf5
aesthetic-improvements: use dim text sparingly for better contrast
...
- Updated button variants (outline, ghost) to use text-white
- Updated empty state descriptions to use text-white with opacity
- Updated page subtitles to use text-white opacity-80
- Updated Navbar interactive elements to use text-white
- Preserved text-kodo-secondary for truly secondary info (metadata, timestamps, helper text)
- Action 11.1.1.2 complete
2026-01-16 10:14:17 +01:00
senke
ad83364674
cognitive-load: create onboarding flow component for new users
...
- Created Onboarding component with multi-step flow
- Progress indicator shows current and completed steps
- Navigation: Next, Previous, Skip buttons
- Uses Dialog component for modal display
- Supports custom content per step
- French labels for UI
- Action 10.4.1.3 complete
2026-01-16 02:32:53 +01:00
senke
6eef4b7efa
cognitive-load: add tooltips to advanced features
...
- Added optional tooltip prop to AdvancedFilters component
- Added tooltips to LibraryPage view mode toggles (Grid/List)
- Added tooltip to LibraryPage sort button
- Added context-aware tooltip to LibraryPage bulk mode button
- Tooltips explain functionality and improve discoverability
- Action 10.4.1.2 complete
2026-01-16 02:22:41 +01:00
senke
bec6e835b1
cognitive-load: create AdvancedFilters component
...
- Created collapsible AdvancedFilters component for progressive disclosure
- Uses existing Collapsible component for consistency
- Supports controlled and uncontrolled modes
- Customizable label and optional filter icon
- Follows Kodo design system styling
- Ready to wrap Genre, Format, and Sort filters in LibraryPage
- Action 10.3.1.1 complete
2026-01-16 02:20:26 +01:00
senke
91a45cb46c
consistency: add JSDoc documentation for button variants
...
- Added comprehensive JSDoc comments for buttonVariants
- Documented all 5 variants (default, destructive, outline, secondary, ghost) with use cases
- Documented all 4 sizes (default, sm, lg, icon) with descriptions
- Added ButtonProps interface documentation with examples
- Added Button component documentation with usage examples
- Action 9.3.1.5 complete
2026-01-16 02:15:30 +01:00
senke
ccc2daf27f
consistency: simplify button glow effects
...
- Removed excessive glows from button variants
- default: removed base glow, reduced hover glow (30px→15px, opacity 0.5→0.3)
- destructive: removed hover glow
- outline: removed hover glow
- Buttons now have minimal, subtle glows for better visual hierarchy
- Action 9.3.1.4 complete
2026-01-16 02:14:52 +01:00
senke
f8655ebaed
consistency: remove unused button variants (neon, glass, premium, link)
...
- Removed neon, glass, premium, and link variants from Button component
- Replaced variant="link" in PostCard with variant="ghost" (with underline)
- Replaced variant="premium" in LibraryPage and FAB with variant="default"
- Updated COMPONENT_USAGE.md to reflect removed variants
- Remaining variants: default, destructive, outline, secondary, ghost
- Action 9.3.1.2 complete
2026-01-16 02:13:51 +01:00
senke
8cece18a3e
consistency: replace custom components with design system components
...
- Fixed UserCard: removed invalid Card variant prop, fixed Button variants
- Fixed LicenceCard: removed invalid Card variant prop, fixed Button variants
- Replaced FormField Input with design system Input (removed Tailwind defaults)
- Replaced FormField Textarea with design system Textarea (removed Tailwind defaults)
- Replaced FormField Select with design system Select (maintained backward compatibility)
- All components now use design system components with proper error handling
- Action 9.2.1.6 complete
2026-01-16 02:11:40 +01:00
senke
169d81c0c1
consistency: create component usage guide
...
- Created comprehensive guide documenting design system components
- Documents Button, Card, Input, Select, Dialog, Alert, Badge components
- Includes use cases, variants, sizes, examples, and best practices
- Provides migration guide for custom implementations
- Action 9.2.1.4 complete
2026-01-16 02:08:56 +01:00
senke
c4363aaa85
consistency: replace custom buttons with Button component (partial)
...
- Replaced custom button implementations with Button component in 14 files
- Files updated: LiveStreamDetailView, DashboardPage, CommentItem, PostCard, SocialPage, SocialView, AdminUsersView, UserTableRow, ProjectsManager, CloudFileBrowser, FileManagerView, CreatorModal, ImageCropper, BulkUploadModal
- ~31 buttons replaced across high-priority files
- Used appropriate Button variants: ghost, outline, default, secondary, link
- Preserved visual appearance with className overrides where needed
- Action 9.2.1.2 in progress (partial completion)
2026-01-16 02:06:14 +01:00
senke
de79895e5d
consistency: fix remaining Tailwind default colors in auth and features components
2026-01-16 01:59:31 +01:00
senke
00f5712230
consistency: fix remaining Tailwind default color edge cases
2026-01-16 01:58:12 +01:00
senke
db88a6e64e
consistency: auto-migrate Tailwind default colors (Batch 8, 47 instances)
2026-01-16 01:56:47 +01:00
senke
4772d87140
consistency: auto-migrate Tailwind default colors (Batch 7, 37 instances)
2026-01-16 01:56:44 +01:00
senke
08bdf7b0db
consistency: auto-migrate Tailwind default colors (Batch 6, 21 instances)
2026-01-16 01:56:41 +01:00
senke
f6970f7937
consistency: auto-migrate Tailwind default colors (Batch 5, 50 instances)
2026-01-16 01:56:37 +01:00
senke
226e970da2
consistency: auto-migrate Tailwind default colors (Batch 4, 114 instances)
2026-01-16 01:56:34 +01:00
senke
c0b8be0c77
consistency: auto-migrate Tailwind default colors (Batch 3, 70 instances)
2026-01-16 01:56:30 +01:00
senke
8d9cc601b0
consistency: auto-migrate Tailwind default colors (Batch 2, 64 instances)
2026-01-16 01:56:27 +01:00
senke
e4edc8f8c1
consistency: auto-migrate Tailwind default colors (Batch 1, 83 instances)
2026-01-16 01:56:24 +01:00
senke
4032172050
consistency: migrate Tailwind default colors in CheckoutView and FileManagerView (Batches 19-20)
2026-01-16 01:49:52 +01:00
senke
43b2257657
consistency: migrate Tailwind default colors in CartView and SearchPageView (Batches 17-18)
2026-01-16 01:48:26 +01:00
senke
bedd11f75f
consistency: migrate Tailwind default colors in AdminView and EducationView (Batches 15-16)
2026-01-16 01:47:43 +01:00
senke
ed86d17752
consistency: migrate Tailwind default colors in ProfileView.tsx (Batch 14)
2026-01-16 01:46:58 +01:00
senke
174bd68ebb
consistency: migrate Tailwind default colors in LiveView, StudioView, and UploadView (Batches 11-13)
2026-01-16 01:46:02 +01:00
senke
06bc449c24
consistency: migrate Tailwind default colors in SettingsView and SocialView (Batches 9-10)
2026-01-16 01:45:00 +01:00
senke
8ff7ee485c
consistency: migrate Tailwind default colors in PurchasesView.tsx (Batch 8)
2026-01-16 01:44:12 +01:00
senke
e2feab93e4
consistency: migrate Tailwind default colors in NotificationsView.tsx (Batch 7)
2026-01-16 01:43:37 +01:00
senke
90f9d61fa1
consistency: migrate Tailwind default colors in DiscoverView.tsx (Batch 6)
2026-01-16 01:43:00 +01:00
senke
8506102c20
consistency: migrate Tailwind default colors in FileDetailsView.tsx (Batch 5)
2026-01-16 01:42:21 +01:00
senke
fafab26478
consistency: migrate Tailwind default colors in MarketplaceView.tsx (Batch 4)
2026-01-16 01:41:40 +01:00
senke
1ba118cc57
consistency: migrate Tailwind default colors in AnalyticsView.tsx (Batch 3)
2026-01-16 01:41:11 +01:00
senke
d8493ebdf0
cognitive-load: mark Tabs as complete and create Accordion component (Actions 10.1.1.2, 10.1.1.4)
...
- Action 10.1.1.2: Tabs component already exists at apps/web/src/components/ui/tabs.tsx
- Action 10.1.1.4: Created Accordion component at apps/web/src/components/ui/accordion.tsx
- Components: Accordion, AccordionItem, AccordionTrigger, AccordionContent
- Features: Single/multiple modes, controlled/uncontrolled, smooth animations
- Design: Kodo design system styling, accessible, follows Tabs pattern
- Ready for use in Dashboard and other pages for collapsible sections
2026-01-16 01:36:19 +01:00