In Progress:
• Migrating custom CSS to the MUI theme to remove dependencies on custom CSS/LESS files.
• Integrating legacy theming and custom component styles into the new MUI theme to maintain compatibility with minimal changes.
• Moving the Theme Provider to the root component instead of individual child components. Reviewing and updating affected applications accordingly.

Questions/Clarifications:
• Legacy-themed components currently use a default font size of 16px (body1) for inputs and labels, while the new theme uses 14px (body2). Should we retain the existing font size or inherit the new theme’s properties?

Leads App UI

Page Background

• - Set the page background color to Grey/50

Title Bar

• - Change the title to use H3 font size.
• - Set the font weight to Bold.

Import CSV/XML Button

• - Update button properties:
• - Type: Outline
• - Size: Small
• - Color: Inherit
• - Shift the button to the right of the Search Bar.

Search Bar

• - Update placeholder text to "Filter Redirects".
• - Change to use the Input Component.

Create Bar

• - Set background color to Grey/100.
• - Add a margin of 24px between the Create Bar and Table.
• - Update Button Group (302/301) color to Primary.

Create Redirect Button

• - Update button properties:
• - Type: Outline
• - Size: Small
• - Color: Primary

Table

Table Cell Text

• - Set text color to Text/Primary.
• - Use Body 2 font size with Regular font weight.
• - Change icon color in the table to Text/Secondary.

Delete Button

• - Change button color to Inherit.

Header

• - Move the Info Icon to the right of the column header text.
• - Set the header background color to Grey/100.
• - Change Redirect Target External Links color to Primary/Main.

Code App Delete Modal

Alert Box

• Change color to Warning Shades / 190p
• Change the icon and text color to Warning Shades / 160p
• Swap the position of the Delete and Cancel Buttons.
• Cancel Button. Make it Outline Neutral Small Size

Code App

Sidebar

• Change Create File Button to Primary Filled Button Small.

TitleBar

• Make Title text be right at the start.
• Group all buttons together on the right. The order should be (left to right):
  • Delete Button
  • Copy ZUID Button
  • Edit Content Button
  • Edit Model Button
  • Go to Activity Log Button
  • Save Button
  • Publish Button

Button Updates

• Change Delete Button to Icon Button (Inherit).
• Change Copy ZUID Button to Icon Button (Inherit).
• Change Edit Content Button to Icon Button (Inherit).
• Change Edit Model Button to Icon Button (Inherit).
• Change Go to Activity Log Button to Icon Button (Inherit).
• Change Copy ZUID to Text Inherit Button.
• Change Save Button to Primary Filled Button.
• Change Publish Button to Success Filled Button.

Bottom Bar

• Change Down Arrow Button to Icon Button (Inherit).
• Change Copy ZUID Button to Icon Button (Inherit).

Code App - Create File Modal

General

• Change Modal Color to Background/Paper.

Buttons

• Swap Create File and Cancel Buttons.
• Change Create File Button to Primary Filled Button.
• Change Cancel Button to Text Inherit Button.

Inputs

• Change File Type to Autocomplete Component.
• Change File Type to Text Input Component.

Code App

Titlebar

Title Text

• Change Title Color to Primary Common White
• Change Title Font Size to H6

Icon Buttons

• Shift Thunderbolt Icon (for Instant JSON) to the right of the Activity Log icon button and make it an icon button inherit type
• Use the same Copy ZUID icon from the Media Preview More Menu for the Copy ZUID icon in the Code App Titlebar
• Change the icon for the View Model button to Database

Save Button

• Update Save Button
  • Use the same button style as in Content (should display "Saved" when the file is saved)
  • Update text to just say "Save"
  • Add Tooltip (similar to Content)
    • On Mac: `"Save File (⌘S)"
    • On Windows: `"Save File (Ctrl S)"

Publish Button

• Update Publish Button
  • Use the same button style as in Content (should display "Published when the file is saved)
  • Update text to just say "Publish"
  • Add Tooltip (similar to Content)
    • On Mac: `"Publish File (⌘P)"
    • On Windows: `"Publish File (Ctrl P)"

Drawer

• Set Drawer background to Grey 900

• Update Padding of the Drawer to be 16px

• Update Card

• Set Card Boxes background to Grey 800

  • Update Gap between cards in drawer to be 16px
  • Update Card Widths to all be equal and to fit the width of the container
  • Update the Heading of Each Card to be Font Size - H6 (Bold Font Weight)
  • Update the Body Text to be Font Size - Body 2 (Regular Font Weight)
  • Update the Model Icon to be the Database Icon
  • Update the Icon Color in each card title to be Grey 400

• Update Copy ZUID button

  • Make it a text button
  • Allow text inside to wrap
  • Allow the button to grow in height if there is no available space

Reference Figma Sheet

https://www.figma.com/design/hvcEgWx1WBxc5LzXrgIIRo/Code-App?node-id=20-569&t=gW4cG9TbyPTHmlVQ-1