Minor UI adjustments

src/Components/AboutControl.jsx

@@ -80,7 +80,7 @@ function AboutContent({installPrefix}) {
   const privacyLevelFunctional = 0
   const privacyLevelUsage = 10
   const privacyLevelSocial = 20
-  const bulletStyle = {textAlign: 'center'}
+  const bulletStyle = {textAlign: 'center', fontSize: '.9em'}
   useEffect(() => {
     if (Privacy.isPrivacySocialEnabled()) {
       setPrivacySlider(privacyLevelSocial)

src/Components/CutPlaneMenu.jsx

@@ -39,10 +39,11 @@ export default function CutPlaneMenu() {
     viewer.clipper.deleteAllPlanes()
     const modelCenter = getModelCenter(model)
     const planeHash = getHashParams(location, 'p')
+    setAnchorEl(null)
     if (normalDirection === cutPlaneDirection) {
       viewer.clipper.deleteAllPlanes()
       removeHashParams(window.location, PLANE_PREFIX)
-      setCutPlaneDirection('')
+      setCutPlaneDirection(null)
       return
     }
     let normal
@@ -82,7 +83,7 @@ export default function CutPlaneMenu() {
         title={'Section'}
         icon={<CutPlaneIcon/>}
         onClick={handleClick}
-        selected={anchorEl !== null}
+        selected={anchorEl !== null || cutPlaneDirection !== null}
       />
       <Menu
         elevation={1}

src/Components/OpenModelControl.jsx

@@ -32,7 +32,9 @@ export default function OpenModelControl({fileOpen}) {
         <Tooltip title={'Open IFC'} describeChild placement={'top'}>
           <ToggleButton
             selected={isDialogDisplayed}
-            onClick={() => setIsDialogDisplayed(true)}
+            onClick={() => {
+              setIsDialogDisplayed(true)
+            }}
             color='primary'
             value={'something'}
           >

src/Components/OperationsGroup.jsx

@@ -35,12 +35,21 @@ export default function OperationsGroup({unSelectItem, installPrefix, fileOpen,
   const isCommentsOn = useStore((state) => state.isCommentsOn)
   const isPropertiesOn = useStore((state) => state.isPropertiesOn)
   const viewer = useStore((state) => state.viewerStore)
+  const cutPlaneDirection = useStore((state) => state.cutPlaneDirection)
   const selectedElement = useStore((state) => state.selectedElement)
   const isMobile = useIsMobile()
   const classes = useStyles({isCommentsOn: isCommentsOn})
   const theme = useContext(ColorModeContext)
 
 
+  const isSelected = () => {
+    const ifSelected = (
+      selectedElement !== null ||
+      cutPlaneDirection !== null
+    )
+    return ifSelected
+  }
+
   const toggle = (panel) => {
     openDrawer()
     if (panel === 'Properties') {
@@ -88,7 +97,7 @@ export default function OperationsGroup({unSelectItem, installPrefix, fileOpen,
         <TooltipIconButton
           title="Clear"
           onClick={unSelectItem}
-          selected={selectedElement !== null}
+          selected={isSelected()}
           icon={<ClearIcon />}
         />
       </ButtonGroup>

src/Containers/CadView.jsx

@@ -2,9 +2,7 @@ import React, {useContext, useEffect, useState} from 'react'
 import {Color, MeshLambertMaterial} from 'three'
 import {IfcViewerAPI} from 'web-ifc-viewer'
 import {useNavigate, useSearchParams, useLocation} from 'react-router-dom'
-
 import {makeStyles} from '@mui/styles'
-
 import * as Privacy from '../privacy/Privacy'
 import Alert from '../Components/Alert'
 import debug from '../utils/debug'
@@ -15,8 +13,6 @@ import useStore from '../store/useStore'
 import SearchBar from '../Components/SearchBar'
 import SideDrawerWrapper, {SIDE_DRAWER_WIDTH} from '../Components/SideDrawer'
 import SnackBarMessage from '../Components/SnackbarMessage'
-
-
 import {assertDefined} from '../utils/assert'
 import {computeElementPathIds, setupLookupAndParentLinks} from '../utils/TreeUtils'
 import {ColorModeContext} from '../Context/ColorMode'

src/store/UISlice.js

@@ -8,11 +8,13 @@
 export default function createUISlice(set, get) {
   return {
     isDrawerOpen: false,
+    isOpenControlHighlighted: true,
     isPropertiesOn: false,
     isCommentsOn: false,
     snackMessage: null,
     cutPlaneDirection: null,
     openDrawer: () => set(() => ({isDrawerOpen: true})),
+    unHighlightOpenControl: () => set(() => ({isOpenControlHighlighted: false})),
     closeDrawer: () => set(() => ({isDrawerOpen: false})),
     toggleIsPropertiesOn: () => set((state) => ({isPropertiesOn: !state.isPropertiesOn})),
     toggleIsCommentsOn: () => set((state) => ({isCommentsOn: !state.isCommentsOn})),

src/utils/cutPlane.js

@@ -79,7 +79,7 @@ export function getElementBoundingBox(selection) {
 /**
  * toggleClippingPlane turns clipping plane on and off
  *
- * @param {IfcViewerAPI } viewer bouding box
+ * @param {object} viewer bouding box
  */
 export function removePlanes(viewer) {
   viewer?.clipper.deleteAllPlanes()