Equalize styling

Equalize Styling Task

Objective

The goal of this task is to standardize the styling across all currently used components. This involves updating HTML tags to MUI components, unifying styling with Tailwind CSS, and aligning color schemes according to the provided specifications.

Color Palette

• Background: #fed7aa (Orange 200)
• Bold Header Text: #172554 (Blue 950)
• Subtext: #f472b6 (Pink 400)
• Background Divs: #f1f5f9 (Slate 100)
• Normal Text: #0f172a (Slate 900)

Font

Use a nice-looking font consistently across all text elements.

Tasks

1. Replace HTML Tags with MUI Components:

   • Review all currently used components and replace HTML tags with corresponding Material-UI (MUI) components where applicable.

2. Standardize Styling with Tailwind CSS:

   • Utilize Tailwind CSS classes to standardize styling across all components.
   • Ensure consistency in spacing, typography, and layout throughout the application.

3. Align Color Scheme:

   • Update color values to match the specified palette across all components.
   • Ensure that background colors, text colors, and other elements adhere to the provided color scheme.

4. Implement Font:

   • Select a visually appealing font and apply it consistently to all text elements.
   • Ensure that the chosen font enhances readability and complements the overall design.

5. Testing and Refinement:

   • Test the updated styling across different screen sizes and devices.
   • Refine any inconsistencies or issues discovered during testing to achieve a polished and cohesive appearance.