Theme update (#838)

bldrs-ai · Nov 8, 2023 · 2e5d3bc · 2e5d3bc
1 parent a72d555
commit 2e5d3bc
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 23 deletions.
diff --git a/src/Components/About/AboutControl.jsx b/src/Components/About/AboutControl.jsx
@@ -10,7 +10,7 @@ import {ControlButton} from '../Buttons'
 import PrivacyControl from './PrivacyControl'
 import LogoB from '../../assets/LogoB.svg'
 import {Helmet} from 'react-helmet-async'
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import PkgJson from '../../../package.json'
 
 /**
  * Button to toggle About panel on and off
@@ -31,11 +31,11 @@ export default function AboutControl() {
 
   return (
     <ControlButton
-      title='About'
+      title={`Bldrs: ${PkgJson.version}`}
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayedLocal}
       icon={
-        <InfoOutlinedIcon className='icon-share' color='secondary'/>
+        <LogoB/>
       }
       dialog={
         <AboutDialog

diff --git a/src/Components/About/AboutControl.test.jsx b/src/Components/About/AboutControl.test.jsx
@@ -2,18 +2,20 @@ import React from 'react'
 import {render, fireEvent, waitFor} from '@testing-library/react'
 import {MockComponent} from '../../__mocks__/MockComponent'
 import AboutControl from './AboutControl'
+import PkgJson from '../../../package.json'
 
 
+const bldrsVersionString = `Bldrs: ${PkgJson.version}`
 describe('About control tests', () => {
   test('renders the AboutControl button', () => {
     const {getByTitle} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About')
+    const aboutControl = getByTitle(bldrsVersionString)
     expect(aboutControl).toBeInTheDocument()
   })
 
   test('renders AboutDialog when control is pressed', () => {
     const {getByTitle, getByText} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About')
+    const aboutControl = getByTitle(bldrsVersionString)
     fireEvent.click(aboutControl)
     const dialogTitle = getByText('Build every thing together')
     expect(dialogTitle).toBeInTheDocument()

diff --git a/src/Components/Buttons.jsx b/src/Components/Buttons.jsx
@@ -28,6 +28,7 @@ export function TooltipIconButton({
   size = 'medium',
   dataTestId = '',
   aboutInfo = true,
+  variant = 'rounded',
 }) {
   assertDefined(title, onClick, icon)
   const [openLocal, setOpenLocal] = React.useState(false)
@@ -51,7 +52,7 @@ export function TooltipIconButton({
         data-testid={dataTestId || title}
         PopperProps={{style: {zIndex: 0}}}
       >
-        <ToggleButton selected={selected} onClick={onClick} value={''} size={size}>
+        <ToggleButton selected={selected} onClick={onClick} value={''} size={size} variant={variant}>
           {icon}
         </ToggleButton>
       </Tooltip>
@@ -106,6 +107,7 @@ export function CloseButton({onClick}) {
       icon={<CloseIcon className='icon-share icon-small'/>}
       aboutInfo={false}
       className='closeButton'
+      variant='noBackground'
     />
   )
 }

diff --git a/src/Components/ElementGroup.jsx b/src/Components/ElementGroup.jsx
@@ -44,7 +44,8 @@ export default function ElementGroup({deselectItems, viewer}) {
     >
       <ButtonGroup
         orientation='horizontal'
-        variant='contained'
+        variant='outlined'
+        sx={{borderRadius: '10px', padding: '0px 10px'}}
       >
         {!isIsolate &&
           <>

diff --git a/src/Components/Notes/NotesNavBar.jsx b/src/Components/Notes/NotesNavBar.jsx
@@ -107,13 +107,15 @@ export default function NotesNavBar() {
             onClick={toggleIsCreateNoteActive}
             icon={<BackIcon className='icon-share'/>}
             size='medium'
+            variant='noBackground'
           /> :
           <TooltipIconButton
             title='ADD A NOTE'
             placement='bottom'
             onClick={toggleIsCreateNoteActive}
             icon={<AddNoteIcon className='icon-share' color='secondary'/>}
             size='medium'
+            variant='noBackground'
           />
         )}
         <CloseButton onClick={closeNotes}/>

diff --git a/src/Components/Notes/NotesNavBar_original.jsx b/src/Components/Notes/NotesNavBar_original.jsx
@@ -88,12 +88,14 @@ export default function NotesNavBar() {
               onClick={() => selectNote('previous')}
               icon={<NavigateBeforeIcon className='icon-share' color='secondary'/>}
               placement='bottom'
+              variant='noBackground'
             />
             <TooltipIconButton
               title='Next Note'
               onClick={() => selectNote('next')}
               icon={<NavigateNextIcon className='icon-share' color='secondary'/>}
               placement='bottom'
+              variant='noBackground'
             />
           </>
         }
@@ -113,13 +115,15 @@ export default function NotesNavBar() {
             onClick={toggleIsCreateNoteActive}
             icon={<ArrowBackIcon className='icon-share' color='secondary'/>}
             size='medium'
+            variant='noBackground'
           /> :
           <TooltipIconButton
             title='ADD A NOTE'
             placement='bottom'
             onClick={toggleIsCreateNoteActive}
             icon={<AddCommentOutlinedIcon className='icon-share' color='secondary'/>}
             size='medium'
+            variant='noBackground'
           />
         )}
         <CloseButton onClick={closeNotes}/>

diff --git a/src/Components/OperationsGroup.jsx b/src/Components/OperationsGroup.jsx
@@ -13,8 +13,6 @@ import {useExistInFeature} from '../hooks/useExistInFeature'
 import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
 import NightlightOutlinedIcon from '@mui/icons-material/NightlightOutlined'
 import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined'
-import AboutControl from './About/AboutControl'
-
 
 /**
  * OperationsGroup contains tools for sharing, notes, properties, cut
@@ -57,7 +55,7 @@ export default function OperationsGroup({deselectItems}) {
     <ButtonGroup
       orientation='vertical'
       variant='contained'
-      sx={{margin: '1em .5em'}}
+      sx={{margin: '1em 1em'}}
     >
       {isLoginVisible &&
           <AuthNav/>
@@ -101,7 +99,6 @@ export default function OperationsGroup({deselectItems}) {
                 <WbSunnyOutlinedIcon className='icon-share' color='secondary'/> :
                 <NightlightOutlinedIcon className='icon-share'/> }
           />
-          <AboutControl/>
         </>
       }
       {/* Invisible */}

diff --git a/src/Containers/CadView.jsx b/src/Containers/CadView.jsx
@@ -5,11 +5,11 @@ import Box from '@mui/material/Box'
 import useTheme from '@mui/styles/useTheme'
 import {navToDefault} from '../Share'
 import Alert from '../Components/Alert'
+import AboutControl from '../Components/About/AboutControl'
 import ElementGroup from '../Components/ElementGroup'
 import ControlsGroup from '../Components/ControlsGroup'
 import BranchesControl from '../Components/BranchesControl'
 import HelpControl from '../Components/HelpControl'
-import Logo from '../Components/Logo'
 import NavPanel from '../Components/NavPanel'
 import SearchBar from '../Components/SearchBar'
 import SideDrawer from '../Components/SideDrawer/SideDrawer'
@@ -687,7 +687,6 @@ export default function CadView({
           }
         </Box>
       )}
-      <Logo onClick={() => navToDefault(navigate, appPrefix)}/>
       {alert}
       {viewer &&
         <Box
@@ -706,11 +705,20 @@ export default function CadView({
         sx={{
           position: 'fixed',
           bottom: '1.0em',
-          right: '.5em',
+          right: '1.0em',
         }}
       >
         <HelpControl/>
       </Box>
+      <Box
+        sx={{
+          position: 'fixed',
+          bottom: '1.0em',
+          left: '1.0em',
+        }}
+      >
+        <AboutControl/>
+      </Box>
     </Box>
   )
 }

diff --git a/src/theme/Components.js b/src/theme/Components.js
@@ -30,9 +30,10 @@ export function getComponentOverrides(palette, typography) {
           style: {
             width: '180px',
             height: '40px',
-            textTransform: 'none',
+            borderRadius: '20px',
             border: 'none',
             backgroundColor: palette.primary.main,
+            color: 'white',
           },
         },
       ],
@@ -42,13 +43,31 @@ export function getComponentOverrides(palette, typography) {
         disableRipple: true,
       },
     },
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          color: 'white',
+          backgroundColor: palette.primary.main,
+          maxWidth: '20em',
+          borderRadius: '10px',
+        },
+      },
+    },
     MuiButtonGroup: {
       variants: [
         {
           props: {variant: 'contained'},
           style: ({theme}) => ({
-            backgroundColor: palette.primary.background,
-            boxShadow: theme.shadows[1],
+            backgroundColor: theme.palette.scene.background,
+            boxShadow: theme.shadows[0],
+            opacity: .9,
+          }),
+        },
+        {
+          props: {variant: 'outlined'},
+          style: ({theme}) => ({
+            backgroundColor: theme.palette.primary.background,
+            boxShadow: theme.shadows[0],
             opacity: .9,
           }),
         },
@@ -67,21 +86,61 @@ export function getComponentOverrides(palette, typography) {
         },
         sizeSmall: {
           border: 'none',
-          width: '40px',
-          height: '40px',
+          width: '30px',
+          height: '30px',
         },
       },
+      variants: [
+        {
+          props: {variant: 'rounded'},
+          style: {
+            'width': '40px',
+            'height': '40px',
+            'borderRadius': '10px',
+            'border': 'none',
+            'margin': '0px 4px 4px 0px',
+            'backgroundColor': palette.scene.background,
+            '&.Mui-selected, &.Mui-selected:hover': {
+              backgroundColor: palette.primary.background,
+              opacity: .9,
+            },
+          },
+        },
+        {
+          props: {variant: 'solid'},
+          style: {
+            borderRadius: '0px',
+          },
+        },
+        {
+          props: {variant: 'noBackground'},
+          style: {
+            'width': '40px',
+            'height': '40px',
+            'borderRadius': '10px',
+            'border': 'none',
+            'margin': '0px 4px 2px 0px',
+            // 'backgroundColor': palette.scene.background,
+            '&.Mui-selected, &.Mui-selected:hover': {
+              backgroundColor: palette.primary.background,
+              opacity: .9,
+            },
+          },
+        },
+      ],
     },
     MuiDialog: {
       styleOverrides: {
-        root: {
+        paper: {
+          borderRadius: '10px',
         },
       },
     },
     MuiDialogContent: {
       styleOverrides: {
         root: {
           padding: '0px 10px',
+          overflowX: 'hidden',
         },
       },
     },
@@ -90,7 +149,7 @@ export function getComponentOverrides(palette, typography) {
         {
           props: {variant: 'control'},
           style: ({ownerState, theme}) => ({
-            backgroundColor: palette.secondary.background,
+            backgroundColor: palette.primary.background,
             boxShadow: theme.shadows[ownerState.elevation],
           }),
         },
@@ -115,7 +174,7 @@ export function getComponentOverrides(palette, typography) {
         root: {
           fontWeight: 400,
           textAlign: 'center',
-          capitalize: 'none',
+          textTransform: 'uppercase',
         },
       },
 
@@ -158,5 +217,6 @@ export function getComponentOverrides(palette, typography) {
         transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       },
     },
+
   }
 }
diff --git a/src/theme/Theme.jsx b/src/theme/Theme.jsx
@@ -10,6 +10,7 @@ import {day, night} from './Palette'
  */
 export default function useShareTheme() {
   const [mode, setMode] = useState(Preferences.getTheme() || getSystemCurrentLightDark())
+
   const [themeChangeListeners] = useState({})
 
 
@@ -49,7 +50,7 @@ function loadTheme(mode, setMode, themeChangeListeners) {
   const activePalette = mode === Themes.Day ? day : night
   const theme = {
     components: getComponentOverrides(activePalette),
-    shape: {borderRadius: 0},
+    shape: {borderRadius: 10},
     palette: activePalette,
     zIndex: {
       modal: 2000,