From 8fdc7a60c2cd445daaa214b2c335d436ba082dcd Mon Sep 17 00:00:00 2001
From: senke <okin.tcs@gmail.com>
Date: Fri, 16 Jan 2026 11:13:36 +0100
Subject: [PATCH] aesthetic-improvements: reduce more decorative cyan
 backgrounds (80/20 rule, batch 5)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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)
---
 EXHAUSTIVE_TODO_LIST.md                              | 12 +++++++++---
 .../src/components/analytics/TrackAnalyticsView.tsx  |  2 +-
 apps/web/src/components/social/PostCard.tsx          |  2 +-
 apps/web/src/components/social/SharePostModal.tsx    |  2 +-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/EXHAUSTIVE_TODO_LIST.md b/EXHAUSTIVE_TODO_LIST.md
index 5ba0df7f1..5d6543db2 100644
--- a/EXHAUSTIVE_TODO_LIST.md
+++ b/EXHAUSTIVE_TODO_LIST.md
@@ -4146,11 +4146,17 @@ Critical path dependencies:
     - **Result**: DashboardPage now follows "Surgical Minimalism" principles with increased whitespace, reduced decorative effects, and solid color backgrounds
   - **Rollback**: Restore original styling
 
-- [ ] **Action 11.5.1.4**: Apply direction to LibraryPage
+- [x] **Action 11.5.1.4**: Apply direction to LibraryPage
   - **Scope**: `apps/web/src/features/library/pages/LibraryPage.tsx` - Apply design direction
-  - **Dependencies**: Action 11.5.1.3 complete
+  - **Dependencies**: Action 11.5.1.3 complete ✅
   - **Risk**: MEDIUM (visual changes)
-  - **Validation**: LibraryPage follows direction
+  - **Validation**: ✅ **COMPLETE** - LibraryPage aligned to design direction:
+    - ✅ **Spacing (8px grid)**: space-y-6 → space-y-8, gap-6 → gap-8 (2 instances), space-y-3 → space-y-4 (aligned to 8px grid)
+    - ✅ **Card padding**: p-6 → p-8 for loading skeleton cards (32px standard)
+    - ✅ **Gradients**: Replaced decorative gradients with solid colors (bg-gradient-to-br from-kodo-ink to-kodo-graphite → bg-kodo-ink, 2 instances: track card cover and list view item number)
+    - ✅ **Preserved**: Functional hover effects (hover:bg-white/5, hover:border-kodo-steel/50, group-hover:text-white), primary actions (cyan for selected states, genre badges), existing functional gradients (overlay for play button visibility)
+    - **Result**: LibraryPage now follows "Surgical Minimalism" principles with increased whitespace, reduced decorative gradients, and solid color backgrounds
+    - **Note**: Pre-existing linter errors (missing imports, unused variables) are unrelated to design direction changes
   - **Rollback**: Restore original styling
 
 - [ ] **Action 11.5.1.5**: Apply direction to all pages
diff --git a/apps/web/src/components/analytics/TrackAnalyticsView.tsx b/apps/web/src/components/analytics/TrackAnalyticsView.tsx
index 57ffc7190..0f5e8806b 100644
--- a/apps/web/src/components/analytics/TrackAnalyticsView.tsx
+++ b/apps/web/src/components/analytics/TrackAnalyticsView.tsx
@@ -106,7 +106,7 @@ export const TrackAnalyticsView: React.FC<TrackAnalyticsViewProps> = ({
               return (
                 <div
                   key={i}
-                  className="flex-1 bg-kodo-cyan/20 hover:bg-kodo-steel/50 transition-colors rounded-t relative group"
+                  className="flex-1 bg-kodo-steel/20 hover:bg-kodo-steel/50 transition-colors rounded-t relative group"
                   style={{ height: `${h}%` }}
                 >
                   <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 pointer-events-none">
diff --git a/apps/web/src/components/social/PostCard.tsx b/apps/web/src/components/social/PostCard.tsx
index 681e7553b..fdf2adbdd 100644
--- a/apps/web/src/components/social/PostCard.tsx
+++ b/apps/web/src/components/social/PostCard.tsx
@@ -174,7 +174,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
                 className="relative h-10 bg-kodo-slate rounded overflow-hidden cursor-pointer hover:bg-kodo-steel/50 transition-colors border border-kodo-steel"
               >
                 <div
-                  className="absolute top-0 left-0 h-full bg-kodo-cyan/20"
+                  className="absolute top-0 left-0 h-full bg-kodo-steel/20"
                   style={{ width: `${opt.votes}%` }}
                 ></div>
                 <div className="absolute inset-0 flex items-center justify-between px-4">
diff --git a/apps/web/src/components/social/SharePostModal.tsx b/apps/web/src/components/social/SharePostModal.tsx
index 0854a6eae..9406dd6cb 100644
--- a/apps/web/src/components/social/SharePostModal.tsx
+++ b/apps/web/src/components/social/SharePostModal.tsx
@@ -118,7 +118,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
             className="w-full flex items-center gap-4 p-3 hover:bg-white/5 rounded-lg transition-colors group"
             onClick={() => setMode('quote')}
           >
-            <div className="w-10 h-10 rounded-full bg-kodo-cyan/10 flex items-center justify-center text-kodo-cyan group-hover:bg-white/5">
+            <div className="w-10 h-10 rounded-full bg-kodo-steel/10 flex items-center justify-center text-kodo-steel group-hover:bg-white/5">
               <MessageSquare className="w-5 h-5" />
             </div>
             <div className="text-left">