use theme provider to handle button colors

watertap-org · Aug 16, 2024 · 35b88a7 · 35b88a7
1 parent c948293
commit 35b88a7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/electron/ui/src/App.js b/electron/ui/src/App.js
@@ -11,6 +11,8 @@ import {getProjectName} from './services/projectName.service';
 import MainContent from "./components/MainContent/MainContent";
 import WaitForProject from "./components/WaitForProject/WaitForProject";
 import {themes} from './theme';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
 
 function App() {
     let navigate = useNavigate();
@@ -21,6 +23,14 @@ function App() {
     const [checkAgain, setCheckAgain] = useState(1)
     const WAIT_TIME = 2
 
+    const mui_theme = createTheme({
+        palette: {
+            primary: {
+                main: theme?.button.background,
+            },
+        },
+    });
+
     useEffect(() => {
         if (hasTheme && checkAgain !== 0)
         {
@@ -43,12 +53,15 @@ function App() {
 
     const subProcState = {value: numberOfSubprocesses, setValue: setNumberOfSubprocesses}
     return (
-        <div className="App">
-            <MainContent theme={theme} hasTheme={hasTheme} hasFlowsheets={hasFlowsheetsList}
-                         subProcState={subProcState}/>
-            <WaitForProject hasTheme={hasTheme}></WaitForProject>
-            <SplashPage theme={theme} hasTheme={hasTheme} hasFlowsheets={hasFlowsheetsList}/>
-        </div>
+
+        <ThemeProvider theme={mui_theme}>
+            <div className="App">
+                <MainContent theme={theme} hasTheme={hasTheme} hasFlowsheets={hasFlowsheetsList}
+                            subProcState={subProcState}/>
+                <WaitForProject hasTheme={hasTheme}></WaitForProject>
+                <SplashPage theme={theme} hasTheme={hasTheme} hasFlowsheets={hasFlowsheetsList}/>
+            </div>
+        </ThemeProvider>
     )
 }
 

diff --git a/electron/ui/src/theme.js b/electron/ui/src/theme.js
@@ -35,9 +35,6 @@ export const themes = {
         },
         button: {
             background: '#1976d2',
-            "&.Mui-disabled": {
-                background: '#E0E0E0'
-            }
         },
         tabs: {
             background: '#F1F3F3', color: '#727272'
@@ -66,9 +63,6 @@ export const themes = {
         },
         button: {
             background: '#1669B6',
-            "&.Mui-disabled": {
-                background: '#E0E0E0'
-            }
         },
         tabs: {
             background: '#F6F4F4', color: '#727272'
@@ -93,10 +87,7 @@ export const themes = {
             color: '#FFFFFF', background: '#000000', logoBackground: '#333333' // FIXME?
         },
         button: {
-            background: '#1669B6',
-            "&.Mui-disabled": {
-                background: '#E0E0E0'
-            }
+            background: '#333333',
         },
         tabs: {
             background: '#F1F3F3', color: '#727272'

diff --git a/electron/ui/src/views/FlowsheetConfig/ConfigInput/ConfigInput.js b/electron/ui/src/views/FlowsheetConfig/ConfigInput/ConfigInput.js
@@ -487,7 +487,6 @@ const RunButton = forwardRef(({...props}, ref) => {
             title={disableRun ? "To run a sweep, at least one variable must be set to sweep" : ""}>
             <div>
                 <Button variant="contained"
-                        sx={theme.button}
                         onClick={() => updateFlowsheetData(flowsheetData.inputData, solveType)}
                         disabled={disableRun}>RUN</Button>
             </div>