salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor-frontend-sites pages

Browse Source
This commit is contained in:
alorig
2025-11-20 09:14:38 +05:00
parent 8e7afa76cd
commit 09232aa1c0
5 changed files with 784 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
refactor-plan/FINAL_REFACTOR_TASKS.md
View File

@@ -298,9 +298,25 @@
3. Add validation checks in components
### Phase 4: Design Consistency - Core Sites Pages (HIGH Priority)
1. Refactor Sites Dashboard
2. Refactor Sites List
3. Refactor Sites Builder pages
**Design System Requirements:**
- **Colors**: Use CSS variables `var(--color-primary)`, `var(--color-success)`, `var(--color-warning)`, `var(--color-purple)` and their `-dark` variants
- **Gradients**: Use `from-[var(--color-primary)] to-[var(--color-primary-dark)]` pattern for icon backgrounds (matching Planner/Writer dashboards)
- **Icons**: Import from `../../icons` (not lucide-react), use same icon patterns as Planner/Writer/Thinker/Automation/Dashboard
- **Components**: Use standard `Button`, `Card`, `Badge`, `PageHeader`, `EnhancedMetricCard` from design system
- **Layout**: Use same spacing (`p-6`, `gap-4`, `rounded-xl`), border-radius, shadow patterns as Dashboard/Planner/Writer pages
- **Buttons**: Use standard Button component with `variant="primary"`, `variant="outline"` etc.
- **Cards**: Use standard Card component or EnhancedMetricCard for metrics (matching Dashboard/Planner patterns)
- **Badges**: Use standard Badge component with color variants matching design system
- **Stat Cards**: Use gradient icon backgrounds like Planner Dashboard: `bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)]`
- **Hover States**: Use `hover:border-[var(--color-primary)]` pattern for interactive cards
**Completed:**
1. ✅ Refactor Sites Dashboard - Replaced lucide-react icons, using EnhancedMetricCard, standard colors/gradients, PageHeader component, matching Planner Dashboard patterns
2. ✅ Refactor Sites List - Replaced lucide-react icons, using standard Button/Card/Badge components, matching Dashboard styling, gradient icon backgrounds
**Remaining:**
3. Refactor Sites Builder pages - Apply same design system patterns
### Phase 5: Design Consistency - Remaining Sites Pages (MEDIUM Priority)
1. Refactor Sites Settings