From ebebb9c4bb3bd6e6e1106d1c78e302a51903f4d9 Mon Sep 17 00:00:00 2001
From: Jeremy Letto <jletto87@gmail.com>
Date: Wed, 20 Oct 2021 19:03:05 -0500
Subject: [PATCH] add Material UI theme support (#4437)

* add Material UI theme support

* add primary color palette

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
---
 webclient/src/index.css         |  2 +-
 webclient/src/index.tsx         | 11 ++++-
 webclient/src/material-theme.ts | 85 +++++++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 webclient/src/material-theme.ts

diff --git a/webclient/src/index.css b/webclient/src/index.css
index ca1be1c8..3dc46340 100644
--- a/webclient/src/index.css
+++ b/webclient/src/index.css
@@ -63,4 +63,4 @@ a {
 
 .disabled-link {
   pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/webclient/src/index.tsx b/webclient/src/index.tsx
index d63d7ebe..b462cc85 100644
--- a/webclient/src/index.tsx
+++ b/webclient/src/index.tsx
@@ -1,7 +1,16 @@
+import { ThemeProvider } from '@material-ui/styles';
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 
+import { materialTheme } from './material-theme';
+
 import { AppShell } from "containers";
 
-ReactDOM.render(<AppShell />, document.getElementById("root"));
+const appWithMaterialTheme = () => (
+  <ThemeProvider theme={materialTheme}>
+    <AppShell />
+  </ThemeProvider>
+);
+
+ReactDOM.render(appWithMaterialTheme(), document.getElementById("root"));
diff --git a/webclient/src/material-theme.ts b/webclient/src/material-theme.ts
new file mode 100644
index 00000000..472c27d5
--- /dev/null
+++ b/webclient/src/material-theme.ts
@@ -0,0 +1,85 @@
+import { createMuiTheme } from '@material-ui/core';
+
+export const materialTheme = createMuiTheme({
+  // overrides: {
+  //   MuiCssBaseline: {
+  //     '@global': {
+  //       '@font-face': [],
+  //     },
+  //   },
+  //   MuiButton: {
+  //     text: {
+  //       color: 'white',
+  //     },
+  //   },
+  // },
+
+  palette: {
+    primary: {
+      main: '#7033DB',
+      light: 'rgba(112, 51, 219, .3)',
+      dark: '#401C7F',
+      contrastText: '#FFFFFF',
+    },
+    // secondary: {
+    //   main: '',
+    //   light: '',
+    //   dark: '',
+    //   contrastText: '',
+    // },
+    // error: {
+    //   main: '',
+    //   light: '',
+    //   dark: '',
+    //   contrastText: '',
+    // },
+    // warning: {
+    //   main: '',
+    //   light: '',
+    //   dark: '',
+    //   contrastText: '',
+    // },
+    // info: {
+    //   main: '',
+    //   light: '',
+    //   dark: '',
+    //   contrastText: '',
+    // },
+    // success: {
+    //   main: '',
+    //   light: '',
+    //   dark: '',
+    //   contrastText: '',
+    // },
+  },
+
+  typography: {
+    fontSize: 12,
+
+    // h1: {},
+    // h2: {},
+    // h3: {},
+    // h4: {},
+    // h5: {},
+    // h6: {},
+    // subtitle1: {},
+    // subtitle2: {},
+    // body1: {},
+    // body2: {},
+    // button: {},
+    // caption: {},
+    // overline: {},
+  },
+
+  spacing: 8,
+
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+    },
+  },
+});