Refactor dashboard UI: consolidate theme, redesign layout and components

[BookJJun-IJ]

Summary

Full dashboard UI refactor. Consolidated theme into a single file, redesigned sidebar/layout/login, and unified component styling across all pages.

Changes

1. Theme Consolidation (softTheme.ts: 125 → 706 lines)

• Before: Only MUI theme config (softDarkTheme, softLightTheme)
• After: Single source of truth — design tokens + reusable styles + MUI themes
  • Added colors, radius, font, spacing design tokens
  • Added card, title, button, chip, icon, text reusable sx styles
  • All components now import exclusively from this file

2. AppWrapper Redesign (AppWrapper.tsx)

• AppBar: Fixed 90px height, enlarged logo (30px→50px), title 28px/bold
• Sidebar Menu: Replaced dashboard-core Menu with custom implementation
  • Styles applied via direct sx prop (theme styleOverrides unreliable on refresh)
  • Active state: gradient border (blue↔pink)
  • Icons hidden, category label and placeholder items added
• Layout: Sidebar fixed at 315px (!important to prevent stretching on refresh), rounded content area, custom scrollbar
• Moved padding from RaSidebar-fixed to Menu Box (fixed double-padding bug)

3. Login Page Redesign (Login.tsx)

• Removed unsplash random background image → solid colors.bgApp background
• Card: Applied softTheme tokens (bgCard, radius.card, borderMuted), minWidth 300 → 400
• Avatar: secondary.main → colors.primary
• Text: palette.grey[500] → colors.textMuted
• Button: MUI default → button.primary (pill shape)
• Removed unused useNavigate import

4. HealthPanel Layout (HealthPanel.tsx)

• Removed PageContainer (dashboard-core) → custom Box layout
• Page title: 24px/bold/white, centered
• Card spacing: <br /> → gap: 50px, maxWidth: 800px

5. Component Styling

DockerUpdate.tsx

• List/ListItem → Box/Stack layout
• MUI semantic colors → direct hex values
• Removed WarningIcon → unified with ErrorIcon
• Applied card.root + card.header + card.content

SelfCheck.tsx

• List/ListItem → Box/Stack layout
• useState init: empty object → null
• getStatusColor → getStatusHexColor (direct hex)
• Removed unused WarningIcon, ScheduleIcon, PageContainer

EnvConfiguration.tsx

• Removed unused axios, CardHeader, Divider, CircularProgress imports
• Applied colors.textMuted to field icons
• Applied card.root + card.header + card.content

UpdateChannel.tsx

• Applied card structure + custom Select/MenuItem styling

YunderaDahsboard.tsx

• Full restyle using softTheme tokens

Dashboard.tsx

• Imported and applied styles from softTheme

6. Other

• Added English JSDoc comments to all files
• Converted all Korean comments to English

Backend Impact

No backend logic changes. All API calls, data processing, and state management remain identical.

Files Changed (10 files)

File	Change
softTheme.ts	Design tokens + reusable styles, MUI themes kept
AppWrapper.tsx	Redesigned AppBar, Menu, Layout
Login.tsx	Applied softTheme, redesigned background/card/button
HealthPanel.tsx	PageContainer → Box layout
DockerUpdate.tsx	List→Box, MUI colors→hex, card structure
SelfCheck.tsx	List→Box, MUI colors→hex, null init, card structure
EnvConfiguration.tsx	Removed axios, card structure, input styles
UpdateChannel.tsx	Card structure, Select styling
YunderaDahsboard.tsx	Full restyle
Dashboard.tsx	softTheme import, style applied