[editor] Add MantineProvider to Unblock Styling Work

[rholinshead]

[editor] Add MantineProvider to Unblock Styling Work

Adding the MantineProvider around the editor to allow customizing theme/styles from the root component. This will allow differentiation between local editor and gradio

Testing:

• Load editor without issue
• Temporarily set theme={{primaryColor: "red"}} and see the correct changes

---

Stack created with Sapling. Best reviewed with ReviewStack.

• -> [editor] Add MantineProvider to Unblock Styling Work #640
• [editor] Run Prompt Button UI #639
• [editor] Prompt Output Bar #638

[rossdanlm]

Looks interesting! Can you show screenshot and/or video in diff summary/comments?

[rholinshead]

Looks interesting! Can you show screenshot and/or video in diff summary/comments?

As-is this has no implications / changes to the UI. It will let us set global theme/styles for our UI/style pass through.

For example, we can set the primary color (applied to buttons, highlighting, etc.) to match figma with:

  const primaryColor = "#FF1CF7";

  return (
    <div>
      <MantineProvider
        withGlobalStyles
        withNormalizeCSS
        theme={{
          colors: {
            primaryColor: [
              // Must be an array of size 10 statically-defined colours for different shades
              primaryColor, // TODO: Change for highlighting
              primaryColor,
              primaryColor,
              primaryColor,
              primaryColor,
              primaryColor,
              primaryColor,
              primaryColor,
              primaryColor,
              primaryColor,
            ],
          },
          primaryColor: "primaryColor",
        }}
      >

and get: