Cleanup vertical align of Login and OperationsGroup.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r659",
+  "version": "1.0.0-r618",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/AuthNav.test.jsx

@@ -5,19 +5,19 @@ import AuthNav from './AuthNav'
 
 
 describe('AuthNav', () => {
-  it('renders the login button when not logged in', () => {
+  it('renders the login button when not logged in', async () => {
     mockedUseAuth0.mockReturnValue(mockedUserLoggedOut)
 
     render(<AuthNav/>)
-    const loginButton = screen.getByTitle(/Log in with GitHub/i)
+    const loginButton = await screen.findByTitle(/Log in with GitHub/i)
     expect(loginButton).toBeInTheDocument()
   })
 
-  it('renders the user avatar when logged in', () => {
+  it('renders the user avatar when logged in', async () => {
     mockedUseAuth0.mockReturnValue(mockedUserLoggedIn)
 
     render(<AuthNav/>)
-    const avatarImage = screen.getByAltText(/Unit Testing/i)
+    const avatarImage = await screen.findByAltText(/Unit Testing/i)
     expect(avatarImage).toBeInTheDocument()
   })
 })

src/Components/Buttons.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import ToggleButton from '@mui/material/ToggleButton'
 import Tooltip from '@mui/material/Tooltip'
@@ -30,7 +29,7 @@ export function TooltipIconButton({
   assertDefined(title, onClick, icon)
   const isMobile = useIsMobile()
   return (
-    <Box>
+    <>
       {isMobile ?
        <ToggleButton selected={selected} onClick={onClick} value={''} size={size}>
          {icon}
@@ -41,7 +40,7 @@ export function TooltipIconButton({
          </ToggleButton>
        </Tooltip>
       }
-    </Box>
+    </>
   )
 }
 
@@ -65,15 +64,15 @@ export function ControlButton({
 }) {
   assertDefined(title, isDialogDisplayed, setIsDialogDisplayed, icon, dialog)
   return (
-    <Box>
+    <>
       <TooltipIconButton
         title={title}
+        onClick={() => setIsDialogDisplayed(true)}
         icon={icon}
         selected={isDialogDisplayed}
-        onClick={() => setIsDialogDisplayed(true)}
       />
       {isDialogDisplayed && dialog}
-    </Box>
+    </>
   )
 }
 

src/Components/CutPlaneMenu.jsx

@@ -94,7 +94,7 @@ export default function CutPlaneMenu() {
 
 
   return (
-    <div>
+    <>
       <TooltipIconButton
         title={'Section'}
         icon={<CutPlaneIcon/>}
@@ -135,7 +135,7 @@ export default function CutPlaneMenu() {
         >Z
         </MenuItem>
       </Menu>
-    </div>
+    </>
   )
 }
 

src/Components/OperationsGroup.jsx

@@ -1,9 +1,11 @@
 import React, {useContext} from 'react'
 import Box from '@mui/material/Box'
 import ButtonGroup from '@mui/material/ButtonGroup'
-import Divider from '@mui/material/Divider'
+import {useTheme} from '@mui/styles'
 import useStore from '../store/useStore'
 import {ColorModeContext} from '../Context/ColorMode'
+import {assertDefined} from '../utils/assert'
+import {hexToRgba} from '../utils/color'
 import AboutControl from './About/AboutControl'
 import CameraControl from './CameraControl'
 import CutPlaneMenu from './CutPlaneMenu'
@@ -35,13 +37,11 @@ export default function OperationsGroup({deselectItems}) {
   const selectedElement = useStore((state) => state.selectedElement)
   const colorMode = useContext(ColorModeContext)
 
+  const isLoginVisible = useStore((state) => state.isLoginVisible)
   const isCollaborationGroupVisible = useStore((state) => state.isCollaborationGroupVisible)
   const isModelInteractionGroupVisible = useStore((state) => state.isModelInteractionGroupVisible)
   const isSettingsVisible = useStore((state) => state.isSettingsVisible)
 
-  const isFirstDividerVisible = useStore((state) => state.getFirstDividerVisibility)
-  const isSecondDividerVisible = useStore((state) => state.getSecondDividerVisibility)
-
   const isSelected = () => {
     const ifSelected = (
       selectedElement !== null ||
@@ -51,7 +51,6 @@ export default function OperationsGroup({deselectItems}) {
     return ifSelected
   }
 
-
   const toggle = (panel) => {
     openDrawer()
     if (panel === 'Properties') {
@@ -62,57 +61,76 @@ export default function OperationsGroup({deselectItems}) {
     }
   }
 
+  const theme = useTheme()
+  const separatorOpacity = 0.1
+  const separatorColor = hexToRgba(assertDefined(theme.palette.primary.contrastText), separatorOpacity)
   return (
-    <Box sx={{
-      'display': 'flex',
-      'flexDirection': 'column',
-      'margin': '1em 1em 0 0',
-      '@media (max-width: 900px)': {
-        margin: '1em 0.5em 0 0',
-      },
-    }}
+    <Box
+      sx={{
+        'display': 'flex',
+        'flexDirection': 'column',
+        'margin': '1em 1em 0 0',
+        '@media (max-width: 900px)': {
+          margin: '1em 0.5em 0 0',
+        },
+        '.MuiButtonGroup-root + .MuiButtonGroup-root': {
+          marginTop: '0.5em',
+          paddingTop: '0.5em',
+          borderTop: `solid 1px ${separatorColor}`,
+          borderRadius: 0,
+        },
+        '.MuiButtonBase-root + .MuiButtonBase-root': {
+          marginTop: '0.5em',
+        },
+      }}
     >
-      <AuthNav/>
-      <Divider/>
+      {isLoginVisible &&
+       <ButtonGroup orientation='vertical'>
+         <AuthNav/>
+       </ButtonGroup>
+      }
 
       {isCollaborationGroupVisible &&
-        <ButtonGroup orientation="vertical" >
-          <ShareControl/>
-        </ButtonGroup>}
-      {isFirstDividerVisible() && <Divider sx={{margin: '0.5em 0'}}/>}
+       <ButtonGroup orientation='vertical'>
+         <ShareControl/>
+       </ButtonGroup>
+      }
+
       {isModelInteractionGroupVisible &&
-      <ButtonGroup orientation="vertical" >
-        <TooltipIconButton
-          title='Notes'
-          icon={<NotesIcon/>}
-          selected={isNotesOn}
-          onClick={() => toggle('Notes')}
-        />
-        <TooltipIconButton
-          title="Properties"
-          onClick={() => toggle('Properties')}
-          selected={isPropertiesOn}
-          icon={<ListIcon/>}
-        />
-        <CutPlaneMenu/>
-        {/* <ExtractLevelsMenu/> */}
-        <TooltipIconButton
-          title="Clear"
-          onClick={deselectItems}
-          selected={isSelected()}
-          icon={<ClearIcon/>}
-        />
-      </ButtonGroup>}
-      {isSecondDividerVisible() && <Divider sx={{margin: '0.5em 0'}}/>}
+       <ButtonGroup orientation='vertical'>
+         <TooltipIconButton
+           title='Notes'
+           icon={<NotesIcon/>}
+           selected={isNotesOn}
+           onClick={() => toggle('Notes')}
+         />
+         <TooltipIconButton
+           title='Properties'
+           onClick={() => toggle('Properties')}
+           selected={isPropertiesOn}
+           icon={<ListIcon/>}
+         />
+         <CutPlaneMenu/>
+         {/* <ExtractLevelsMenu/> */}
+         <TooltipIconButton
+           title='Clear'
+           onClick={deselectItems}
+           selected={isSelected()}
+           icon={<ClearIcon/>}
+         />
+       </ButtonGroup>
+      }
+
       {isSettingsVisible &&
-      <ButtonGroup orientation="vertical">
-        <TooltipIconButton
-          title={`${colorMode.isDay() ? 'Night' : 'Day'} theme`}
-          onClick={() => colorMode.toggleColorMode()}
-          icon={colorMode.isDay() ? <MoonIcon/> : <SunIcon/>}
-        />
-        <AboutControl/>
-      </ButtonGroup>}
+       <ButtonGroup orientation='vertical'>
+         <TooltipIconButton
+           title={`${colorMode.isDay() ? 'Night' : 'Day'} theme`}
+           onClick={() => colorMode.toggleColorMode()}
+           icon={colorMode.isDay() ? <MoonIcon/> : <SunIcon/>}
+         />
+         <AboutControl/>
+       </ButtonGroup>
+      }
       {/* Invisible */}
       <CameraControl/>
     </Box>

src/Components/ShareControl.jsx

@@ -31,14 +31,7 @@ export default function ShareControl() {
   return (
     <ControlButton
       title='Share'
-      icon={
-        <ShareIcon
-          style={{
-            width: '20px',
-            height: '20px',
-          }}
-        />
-      }
+      icon={<ShareIcon style={{width: '20px', height: '20px'}}/>}
       isDialogDisplayed={openedDialog}
       setIsDialogDisplayed={setIsDialogDisplayed}
       dialog={

src/Theme.jsx

@@ -179,7 +179,8 @@ function loadTheme(mode) {
     MuiToggleButton: {
       styleOverrides: {
         sizeMedium: {
-          'margin': '.2em 0em .2em 0em',
+          'width': '50px',
+          'height': '50px',
           'border': 'none',
           '&.Mui-selected, &.Mui-selected:hover': {
             backgroundColor: activePalette.primary.background,
@@ -188,6 +189,8 @@ function loadTheme(mode) {
         },
         sizeSmall: {
           border: 'none',
+          width: '40px',
+          height: '40px',
         },
       },
     },

src/WidgetApi/event-handlers/UIComponentsVisibilityEventHandler.js

@@ -33,19 +33,19 @@ class UIComponentsVisibilityEventHandler extends ApiEventHandler {
    */
   handler(data) {
     if (('searchBar' in data)) {
-      useStore.getState().setSearchbarVisibility(data.searchBar)
+      useStore.getState().setIsSearchbarVisibile(data.searchBar)
     }
     if (('navigationPanel' in data)) {
-      useStore.getState().setNavigationPanelVisibility(data.navigationPanel)
+      useStore.getState().setIsNavigationPanelVisibile(data.navigationPanel)
     }
     if (('collaboration' in data)) {
-      useStore.getState().setCollaborationGroupVisibility(data.collaboration)
+      useStore.getState().setIsCollaborationGroupVisibile(data.collaboration)
     }
     if (('modelInteraction' in data)) {
-      useStore.getState().setModelInteractionGroupVisibility(data.modelInteraction)
+      useStore.getState().setIsModelInteractionGroupVisibile(data.modelInteraction)
     }
     if (('settings' in data)) {
-      useStore.getState().setSettingsVisibility(data.settings)
+      useStore.getState().setIsSettingsVisibile(data.settings)
     }
     return this.apiConnection.successfulResponse({})
   }

src/store/UIVisibilitySlice.js

@@ -7,22 +7,19 @@
  */
 export default function createUIVisibilitySlice(set, get) {
   return {
+    isLoginVisible: true,
     isSearchBarVisible: true,
     isNavigationPanelVisible: true,
     isCollaborationGroupVisible: true,
     isModelInteractionGroupVisible: true,
     isSettingsVisible: true,
 
-    getFirstDividerVisibility: () => get().isCollaborationGroupVisible &&
-      (get().isModelInteractionGroupVisible || get().isSettingsVisible),
+    setIsLoginVisibile: (isVisible) => set(() => ({isSearchBarVisible: isVisible})),
+    setIsSearchbarVisibile: (isVisible) => set(() => ({isSearchBarVisible: isVisible})),
+    setIsNavigationPanelVisibile: (isVisible) => set(() => ({isNavigationPanelVisible: isVisible})),
 
-    getSecondDividerVisibility: () => get().isSettingsVisible && get().isModelInteractionGroupVisible,
-
-    setSearchbarVisibility: (isVisible) => set(() => ({isSearchBarVisible: isVisible})),
-    setNavigationPanelVisibility: (isVisible) => set(() => ({isNavigationPanelVisible: isVisible})),
-
-    setCollaborationGroupVisibility: (isVisible) => set(() => ({isCollaborationGroupVisible: isVisible})),
-    setModelInteractionGroupVisibility: (isVisible) => set(() => ({isModelInteractionGroupVisible: isVisible})),
-    setSettingsVisibility: (isVisible) => set(() => ({isSettingsVisible: isVisible})),
+    setIsCollaborationGroupVisibile: (isVisible) => set(() => ({isCollaborationGroupVisible: isVisible})),
+    setIsModelInteractionGroupVisibile: (isVisible) => set(() => ({isModelInteractionGroupVisible: isVisible})),
+    setIsSettingsVisibile: (isVisible) => set(() => ({isSettingsVisible: isVisible})),
   }
 }