altarra/MUI_MIGRATION.md

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