92 lines
2.7 KiB
Markdown
92 lines
2.7 KiB
Markdown
# Material-UI Migration Summary
|
|
|
|
This document outlines the migration of the Altarra app from Tailwind CSS to Material-UI (MUI).
|
|
|
|
## Dependencies Added
|
|
|
|
- `@mui/material@^5.14.20`
|
|
- `@mui/icons-material@^5.14.20`
|
|
- `@emotion/react@^11.11.1`
|
|
- `@emotion/styled@^11.11.0`
|
|
|
|
## Changes Made
|
|
|
|
### 1. Theme Setup
|
|
- Created `src/context/ThemeProvider.tsx` - Custom MUI theme with:
|
|
- Primary color: `#006600` (green)
|
|
- Secondary color: `#FF0000` (red)
|
|
- Custom typography and component overrides
|
|
|
|
### 2. Layout
|
|
- Updated `src/app/layout.tsx` to:
|
|
- Use `ThemeProvider` wrapper
|
|
- Remove Tailwind CSS import
|
|
- Use MUI `Box` for flex layouts
|
|
|
|
### 3. Component Migration
|
|
|
|
#### FormField.tsx
|
|
- Replaced custom input with `TextField` component
|
|
- Automatic error handling with `helperText` prop
|
|
- Integrated label and validation styling
|
|
|
|
#### SubmitButton.tsx
|
|
- Replaced custom button with `Button` component
|
|
- Used `startIcon` for loading spinner (`CircularProgress`)
|
|
- Automatic disabled state styling
|
|
|
|
#### StatusMessage.tsx
|
|
- Replaced custom alerts with `Alert` component
|
|
- Automatic severity-based styling (success, error, info)
|
|
|
|
#### IdentityForm.tsx
|
|
- Used `Box` component for form wrapper
|
|
- Used `Typography` for headings
|
|
- FormField components integrated
|
|
|
|
#### RackHeightsForm.tsx
|
|
- Replaced form inputs with FormField components
|
|
- Used `Alert` for success message
|
|
- Used `Button` for secondary actions
|
|
- Replaced custom spinner with MUI `CircularProgress`
|
|
|
|
#### HomePage.tsx
|
|
- Used `Box`, `Paper`, `Typography`, and `Button` components
|
|
- Language toggle buttons use variant-based styling
|
|
- Logo and layout uses MUI's sx prop system
|
|
|
|
#### LandingPage.tsx
|
|
- Used `Paper` component for card styling
|
|
- Used `Button` with link functionality
|
|
- Replaced Lucide icon with `OpenInNewIcon` from `@mui/icons-material`
|
|
|
|
#### Footer.tsx
|
|
- Used `Box`, `Typography`, and `Container` components
|
|
- Maintained styling with MUI theming
|
|
|
|
#### Spinner.tsx
|
|
- Replaced custom spinner with `CircularProgress` component
|
|
|
|
## Styling Approach
|
|
|
|
All components now use MUI's `sx` prop system, which provides:
|
|
- Type-safe styling
|
|
- Direct access to theme values
|
|
- Responsive design support
|
|
- Better performance
|
|
|
|
## Migration Benefits
|
|
|
|
1. **Consistency**: Unified design system across the app
|
|
2. **Accessibility**: Better built-in a11y features
|
|
3. **Theming**: Centralized theme management
|
|
4. **Components**: Rich set of pre-built components
|
|
5. **Developer Experience**: Better TypeScript support and IDE integration
|
|
|
|
## Notes
|
|
|
|
- Tailwind CSS configuration can be safely removed if no longer needed
|
|
- The app maintains the same visual appearance and functionality
|
|
- All forms and interactive elements work as before
|
|
- Language switching is preserved
|
|
- Responsive design is maintained through MUI's breakpoint system
|