add the button group styles to the the theme

bldrs-ai · Oct 8, 2023 · 649104b · 649104b
1 parent 7fd5fd5
commit 649104b
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 47 deletions.
diff --git a/src/Components/ControlsGroup.jsx b/src/Components/ControlsGroup.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import ButtonGroup from '@mui/material/ButtonGroup'
-import Paper from '@mui/material/Paper'
 import OpenModelControl from './OpenModelControl'
 import useStore from '../store/useStore'
 import {TooltipIconButton} from './Buttons'
@@ -23,39 +22,34 @@ export default function OperationsGroup({fileOpen}) {
   const isSearchVisible = useStore((state) => state.isSearchVisible)
 
   return (
-    <Paper
-      variant='control'
-      elevation={1}
-      sx={{opacity: .9}}
+    <ButtonGroup
+      orientation='horizontal'
+      variant='contained'
     >
-      <ButtonGroup
-        orientation='horizontal'
-      >
-        <OpenModelControl fileOpen={fileOpen}/>
-        <TooltipIconButton
-          title='Search'
-          icon={<SearchIcon className='icon-share' color='secondary'/>}
-          placement='bottom'
-          aboutInfo={false}
-          selected={isSearchVisible}
-          onClick={toggleIsSearchVisible}
-        />
-        <TooltipIconButton
-          title='Navigation'
-          icon={<TreeIcon className='icon-share' color='secondary' style={{width: '17px', height: '17px'}}/>}
-          placement='bottom'
-          aboutInfo={false}
-          selected={isNavigationVisible}
-          onClick={toggleIsNavigationVisible}
-        />
-        {/* <TooltipIconButton
+      <OpenModelControl fileOpen={fileOpen}/>
+      <TooltipIconButton
+        title='Search'
+        icon={<SearchIcon className='icon-share' color='secondary'/>}
+        placement='bottom'
+        aboutInfo={false}
+        selected={isSearchVisible}
+        onClick={toggleIsSearchVisible}
+      />
+      <TooltipIconButton
+        title='Navigation'
+        icon={<TreeIcon className='icon-share' color='secondary' style={{width: '17px', height: '17px'}}/>}
+        placement='bottom'
+        aboutInfo={false}
+        selected={isNavigationVisible}
+        onClick={toggleIsNavigationVisible}
+      />
+      {/* <TooltipIconButton
         title='Project History'
         icon={<HistoryIcon className='icon-share' color='secondary'/>}
         placement='bottom'
         selected={false}
         onClick={toggleIsNavigationVisible}
       /> */}
-      </ButtonGroup>
-    </Paper>
+    </ButtonGroup>
   )
 }
diff --git a/src/Components/OperationsGroup.jsx b/src/Components/OperationsGroup.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import Box from '@mui/material/Box'
-import Paper from '@mui/material/Paper'
 import ButtonGroup from '@mui/material/ButtonGroup'
 import useTheme from '@mui/styles/useTheme'
 import useStore from '../store/useStore'
@@ -73,24 +72,22 @@ export default function OperationsGroup({deselectItems}) {
 
   const theme = useTheme()
   return (
-    <Paper
-      variant='control'
-      sx={{margin: '1em .5em', opacity: .9}}
+    <ButtonGroup
+      orientation='vertical'
+      variant='contained'
+      sx={{margin: '1em .5em'}}
     >
-      <ButtonGroup
-        orientation='vertical'
-      >
-        {isLoginVisible &&
+      {isLoginVisible &&
           <AuthNav/>
-        }
+      }
 
-        {isCollaborationGroupVisible &&
+      {isCollaborationGroupVisible &&
         <Box>
           <ShareControl/>
         </Box>
-        }
+      }
 
-        {isModelInteractionGroupVisible &&
+      {isModelInteractionGroupVisible &&
         <>
           <TooltipIconButton
             title='Notes'
@@ -118,9 +115,9 @@ export default function OperationsGroup({deselectItems}) {
             icon={<HighlightOffIcon className='icon-share'color='secondary'/>}
           />
         </>
-        }
+      }
 
-        {isSettingsVisible &&
+      {isSettingsVisible &&
         <>
           {isAppStoreEnabled &&
           <TooltipIconButton
@@ -146,10 +143,9 @@ export default function OperationsGroup({deselectItems}) {
             icon={<HelpOutlineIcon className='icon-share'/>}
           />
         </>
-        }
-        {/* Invisible */}
-        <CameraControl/>
-      </ButtonGroup>
-    </Paper>
+      }
+      {/* Invisible */}
+      <CameraControl/>
+    </ButtonGroup>
   )
 }
diff --git a/src/theme/Components.js b/src/theme/Components.js
@@ -42,6 +42,18 @@ export function getComponentOverrides(palette, typography) {
         disableRipple: true,
       },
     },
+    MuiButtonGroup: {
+      variants: [
+        {
+          props: {variant: 'contained'},
+          style: ({theme}) => ({
+            backgroundColor: palette.scene.background,
+            boxShadow: theme.shadows[1],
+            opacity: .9,
+          }),
+        },
+      ],
+    },
     MuiToggleButton: {
       styleOverrides: {
         sizeMedium: {

diff --git a/src/theme/Theme.jsx b/src/theme/Theme.jsx
@@ -55,6 +55,9 @@ function loadTheme(mode, setMode, themeChangeListeners) {
     components: getComponentOverrides(activePalette),
     shape: {borderRadius: 0},
     palette: activePalette,
+    zIndex: {
+      modal: 2000,
+    },
     toggleColorMode: () => {
       setMode((prevMode) => {
         const newMode = prevMode === Themes.Day ? Themes.Night : Themes.Day