Use Material UI Elements Using React

[vidhitamittal]

Summary:
Update the to-do list application to use Material components for a modern, responsive, and visually appealing user interface. This enhancement will improve the user experience by leveraging MUI's pre-built, customizable, and accessible design components.

Things to add:

1. Replace existing UI components with Material UI components
2. Utilize MUI’s theming system for customizing.

Changes:

• Install the Material UI library and configure it within the project.
• Replace existing UI elements with equivalent MUI components such as:
  - Buttons: Replace all buttons with <Button> components, utilizing variants like contained, outlined, or text as needed.
  - Forms: Use <TextField> components for inputs and <Select> or <Autocomplete> for dropdowns and category selectors.
  - Tables and Lists: Use <Table> or <List> components for displaying tasks.
  - Filters and Sorting: Add MUI <Chip> or <Tabs> components for filters and sort options.
• Configure a custom MUI theme using createTheme to define colors, typography, and other designs.
• Provide a dark mode option using MUI's themes.
• Replace custom CSS with MUI’s sx prop.
• Utilize <Grid> and <Box> components for responsive layouts.