Skip to content

Shadcn/Tailwind refactor: CSS utility migration, UI components, layout polish - #1

Merged
xcheljd merged 21 commits into
mainfrom
chore/tailwind-core-css
Apr 22, 2026
Merged

Shadcn/Tailwind refactor: CSS utility migration, UI components, layout polish#1
xcheljd merged 21 commits into
mainfrom
chore/tailwind-core-css

Conversation

@xcheljd

@xcheljd xcheljd commented Apr 21, 2026

Copy link
Copy Markdown
Owner

Summary

This branch migrates the entire CSS codebase to Tailwind utilities and integrates shadcn/ui components throughout the app.

CSS Migration (79% overall reduction)

  • core.css: 894 → 369 lines (59%)
  • charts.css: 279 → 31 lines (89%)
  • dashboard.css: 1,037 → 54 lines (95%)
  • modules.css: 1,335 → 307 lines (77%)
  • Settings.css: 1,206 → 253 lines (79%)

Shadcn/UI Components Added

  • Checkbox, Badge, Progress, Separator, Alert
  • Sheet, ToggleGroup, AlertDialog, Dialog+Select
  • Card, Radio Group, Table, Chart

Layout & UX Improvements

  • Symmetric 20px spacing around search bar (header-to-search and search-to-cards)
  • Sticky search bar with view toggle (grid/list/table)
  • Compact list view with left accent bar on hover
  • New table view for modules
  • Seamless theme-aware loading screen
  • Consistent z-index scale and dialog positioning
  • Prettier formatting across all files

Test plan

  • Verify all three module views (grid, list, table) render correctly
  • Confirm search bar sticks on scroll with proper spacing
  • Check light/dark themes across all views
  • Validate dialog animations and z-index stacking
  • Run npm run lint and npm run format:check (both passing)

xcheljd and others added 21 commits April 18, 2026 09:55
@xcheljd @factory-droid
Convert core.css to Tailwind utilities (894 -> 369 lines, 59% reduction)
97f0c37 
Move hand-written CSS to Tailwind utility classes in App.js and LoadingScreen.js.
Add header/loading/sidebar color tokens to @theme block for Tailwind usage.
Keep only :nth-child animations and ::after pseudo-elements in CSS.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Convert charts.css to Tailwind utilities (279 -> 31 lines, 89% reduct…
525153c 
…ion)

Replace chart-container, chart-card, chart-controls with Tailwind utilities.
Use shadcn Card component for chart cards. Convert all inline styles
to Tailwind classes. Keep only heatmap intensity CSS (uses CSS custom properties).

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Convert dashboard.css to Tailwind utilities (1,037 -> 54 lines, 95% r…
beaaed0 
…eduction)

Use shadcn Card/CardHeader/CardTitle/CardContent for dashboard sections.
Convert StudyStreak, GoalCard, UpcomingMilestones, SmartRecommendations
to Tailwind utilities. Keep only dashboard layout, grid-pair, and
CircularProgress SVG styles in CSS. Update tests to match new selectors.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Convert modules.css to Tailwind utilities (1,335 -> 307 lines, 77% re…
3a479a0 
…duction)

Convert ModuleList, ModuleDetail, VideoCard, ConfidenceRating, GoalModal
to Tailwind utility classes. Keep only pseudo-element styles, nth-child
animation delays, custom checkbox styling, and keyframe animations in CSS.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Convert Settings.css to Tailwind utilities (1,206 -> 253 lines, 79% r…
e34e6ff 
…eduction)

Convert all settings tabs (Theme, Dashboard, Data Management, Resources,
YouTube, About), WelcomeDialog, and YoutubeSigninDialog to Tailwind
utilities. Keep only Radix dialog overrides, drag-and-drop states, custom
checkboxes, and keyframe animations in CSS. Also fix nav button arrows
to use lucide-react ChevronLeft/ChevronRight for perfect vertical centering.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Integrate 5 shadcn components (Checkbox, Badge, Progress, Separator, …
d01ac21 
…Alert)

Replace custom checkbox implementations in VideoCard, ModuleDetail, and
DashboardTab with shadcn Checkbox. Replace inline badges with shadcn Badge
in StudyStreak, ThemeTab, and DashboardTab. Replace milestone progress bar
with shadcn Progress in StudyStreak. Replace border dividers with Separator.
Replace video-note, warning-banner, confidence-hint, danger-zone with Alert.
Clean up now-unused CSS for checkboxes and section-checkboxes.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Shadcn refactor phases 2-5: Sheet, ToggleGroup, AlertDialog, Dialog+S…
bcc718d 
…elect, normalize z-index scale

- Phase 2: Remove hamburger sidebar, add Settings gear icon, blurBounceIn animation
- Phase 3: Convert 3 toggle groups to shadcn ToggleGroup (ModuleList, PerformanceCharts, header)
- Phase 4: Replace 4 window.confirm() calls with AlertDialog (GoalCard, DashboardTab, ResourcesPathTab, YoutubeTab)
- Phase 5: Replace GoalModal overlay with Dialog, native select with shadcn Select
- Normalize z-index: 40 (loading), 50 (dialogs), 60/70 (alert), 80 (select), 90 (toast)
- Default time range changed from 30 to 7 days

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Shadcn refactor phases 6-7, dialog positioning/animation fixes, Setti…
6510811 
…ngs.css cleanup

- Phase 6: RadioGroup installed (ConfidenceRating kept as raw buttons -- better accessibility)
- Phase 7: Replace custom ToastProvider with Sonner adapter (backward-compatible useToast API)
- Fix dialog centering: use CSS translate property instead of transform to avoid animation conflicts
- Fix dialog animations: explicit fadeIn/fadeOut keyframes replace Tailwind animate-in/out (no slide)
- Fix z-index: header z-[45] sits below dialog overlay z-50
- Remove blanket !important dialog overrides from Settings.css
- Settings and GoalModal widened to max-w-3xl (768px)

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Shadcn refactor phases 8-9: Chart container wrapping, Badge for day l…
f12d31e 
…abels

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Seamless theme-aware loading screen, ModuleDetail alignment fix
d22c889 
- Inline theme CSS variables in index.html <head> before first paint
- Static loader and React LoadingScreen now visually identical
  (network icon, title, pulsing progress bar)
- Removed spinner, status text, and percentage from LoadingScreen
- Moved video hint text below video list in ModuleDetail
- Aligned Resources heading margin to match Videos heading

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Remove subtle lift hover effects, fix hardcoded shadow colors
0bf9212 
- Removed translate-y/translate-x/scale hover effects across all cards,
  buttons, tabs, recommendations, heatmap cells
- Restored hover:-translate-y-1 on ConfidenceRating (intentional interaction)
- Replaced rgba(0,0,0,0.08) with hsl(var(--foreground)/0.08) for dark theme support
- Replaced hardcoded blue focus ring with hsl(var(--primary)/...) in ResourcesPathTab
- Added hover:border-primary to module list view cards

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Symmetric spacing around search bar, sticky search, table view, compa…
cfdaefb 
…ct list view

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Prettier formatting, shadcn UI components, table view, layout refinem…
f758e15 
…ents

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Add tests for chart.jsx, UI components, and chart sub-components (602…
b8a129f 
… tests, all thresholds passing)

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Prettier formatting for new test files
6436508 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Fix unused variable warnings (prefix with underscore)
fd3357f 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Add custom Packet Map icon (warm amber variant) for all platforms
a1ba39e 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Fix icon: solid background fill for cross-platform compatibility
c8f3cfc 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Fix icon background: extend fill to cover full canvas
6b60fc9 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Fix icon: multi-size ico (16-256px), 512px png and icns
5255f99 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd @factory-droid
Icon: circular globe background only, transparent corners
25e3c48 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@xcheljd
xcheljd merged commit 4049d6d into main Apr 22, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@xcheljd