GLobal Styling part 1

docs/plans/FRONTEND-AUDIT-PLAN.md

@@ -48,12 +48,12 @@ This file contains:
 ```css
 :root {
   /* ===== THE ONLY 6 HEX VALUES IN THE ENTIRE SYSTEM ===== */
-  --color-primary: #0077B6;     /* Brand Blue */
-  --color-success: #00B894;     /* Success Green */
-  --color-warning: #F59E0B;     /* Warning Amber */
-  --color-danger: #DC2626;      /* Error Red */
-  --color-purple: #7C3AED;      /* Premium Purple */
-  --color-gray-base: #667085;   /* Neutral Gray Base */
+  --color-primary: #2C7AA1;      /* Brand Blue - main CTA, links, primary actions */
+  --color-success: #2CA18E;      /* Success Green - confirmations, positive states */
+  --color-warning: #D9A12C;      /* Warning Amber - alerts, cautions */
+  --color-danger: #A12C40;       /* Danger Red - errors, destructive actions */
+  --color-purple: #2C40A1;       /* Purple - premium features, special emphasis */
+  --color-gray-base: #667085;    /* Gray Base - neutral text, borders, backgrounds */
 }
 ```
 
@@ -186,11 +186,11 @@ echo "  08-inline-components.txt (review - extract to /components/)"
 
 | Token | Hex Value | Purpose |
 |-------|-----------|---------|
-| `--color-primary` | `#0077B6` | Brand/Primary actions |
-| `--color-success` | `#00B894` | Success states |
-| `--color-warning` | `#F59E0B` | Warning states |
-| `--color-danger` | `#DC2626` | Error/Danger states |
-| `--color-purple` | `#7C3AED` | Premium/Special features |
+| `--color-primary` | `#2C7AA1` | Brand/Primary actions, links, CTA |
+| `--color-success` | `#2CA18E` | Success states, confirmations |
+| `--color-warning` | `#D9A12C` | Warning states, alerts, cautions |
+| `--color-danger` | `#A12C40` | Error/Danger states, destructive |
+| `--color-purple` | `#2C40A1` | Premium/Special features |
 | `--color-gray-base` | `#667085` | Neutral base for grays |
 
 ### 2.2 Allowed Color Classes (ALL derived from 6 primaries)
@@ -523,23 +523,25 @@ import { Check } from 'lucide-react';
 ```css
 /* ✅ ONLY in design-system.css - the 6 primary tokens */
 :root {
-  --color-primary: #0077B6;
-  --color-success: #00B894;
-  --color-warning: #F59E0B;
-  --color-danger: #DC2626;
-  --color-purple: #7C3AED;
+  --color-primary: #2C7AA1;
+  --color-success: #2CA18E;
+  --color-warning: #D9A12C;
+  --color-danger: #A12C40;
+  --color-purple: #2C40A1;
   --color-gray-base: #667085;
 }
 
-/* ✅ All other colors derived */
+/* ✅ All other colors derived using color-mix() */
+--color-primary-dark: color-mix(in srgb, var(--color-primary) 75%, black);
 --color-brand-600: color-mix(in srgb, var(--color-primary) 85%, black);
+--color-gray-700: color-mix(in srgb, var(--color-gray-base) 70%, black);
 ```
 
 ---
 
 ## 🚨 CRITICAL RULES
 
-1. **6 PRIMARY HEX ONLY**: Only `--color-primary`, `--color-success`, `--color-warning`, `--color-danger`, `--color-purple`, `--color-gray-base` use hex values
+1. **6 PRIMARY HEX ONLY**: Only `--color-primary`, `--color-success`, `--color-warning`, `--color-danger`, `--color-purple`, `--color-gray-base` use hex values (plus `#ffffff` for white)
 2. **ALL SHADES DERIVED**: Every shade (25-950) is computed from primary using `color-mix()`
 3. **NO TAILWIND DEFAULTS**: blue-*, red-*, green-*, etc. are DISABLED
 4. **NO INLINE STYLES**: Never use `style={{}}` for colors/spacing
@@ -582,6 +584,55 @@ The entire application must look like it was designed and built by **ONE person*
 
 ---
 
+---
+
+## 🚨 CRITICAL ISSUES - Fix First
+
+### Issue 1: Missing Components After Changes
+
+**Problem**: Many pages have missing components after lucide-react → local icons migration
+
+**Affected Files** (from git diff):
+- `ImportExport.tsx` - Uses `Database`, `CheckCircle` etc. from lucide-react
+- `WordPressIntegrationDebug.tsx` - Uses `CheckCircle`, `XCircle`, `AlertTriangle`, etc.
+- `PostEditor.tsx` - Uses `SaveIcon`, `XIcon`, `FileTextIcon`, etc.
+- `NotificationsPage.tsx` - Uses `Bell`, `CheckCircle`, `AlertTriangle`, etc.
+- `AccountSettingsPage.tsx` - Uses `Save`, `Loader2`, `Settings`, etc.
+- `PlansAndBillingPage.tsx` - Uses `CreditCard`, `Package`, etc.
+- `ContentSettingsPage.tsx` - Uses `Save`, `Loader2`, `Image`, etc.
+- `UsageAnalyticsPage.tsx` - Uses `TrendingUp`, `Activity`, etc.
+- `PurchaseCreditsPage.tsx` - Uses `AlertCircle`, `Check`, etc.
+- Multiple components in `/components/sites/`, `/components/billing/`, `/components/auth/`
+
+**Fix**: Replace lucide-react imports with local `/icons/` imports. Add missing aliases to `/icons/index.ts`
+
+### Issue 2: Table Row Height Too Big (Planner & Writer)
+
+**Problem**: Planner and Writer table font sizes too big for some columns, increasing overall row height - tables not compact anymore
+
+**Root Cause**: Font size changes in CSS or component updates affecting table cell sizing
+
+**Fix Locations**:
+- `/src/styles/design-system.css` - `.igny8-table-compact td` rules
+- Planner and Writer table components - check for increased text sizes
+
+**Required Changes**:
+```css
+/* Ensure compact table styling */
+.igny8-table-compact td {
+  padding: 6px 10px !important;  /* Reduced from 8px 12px */
+  font-size: 13px !important;     /* Reduced from 14px */
+  line-height: 1.3 !important;    /* Tighter line height */
+}
+
+.igny8-table-compact th {
+  padding: 8px 12px !important;   /* Reduced from 12px 16px */
+  font-size: 12px !important;     /* Reduced from 14px */
+}
+```
+
+---
+
 ## Notes
 
 - Gray scale (`gray-25` to `gray-950`) is ALLOWED - derived from `--color-gray-base`