Minor visual updates

cypress/e2e/home/homepage.cy.js

@@ -6,8 +6,8 @@ describe('home page', () => {
       cy.findByRole('dialog', {timeout: 300000})
           .should('exist')
           .should('be.visible')
-          .contains('build every thing together')
-      cy.title().should('eq', 'About — BLDRS')
+          .contains('Build every thing together')
+      cy.title().should('eq', 'About — Bldrs.ai')
     })
   })
 

package.json

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

src/Components/About/AboutControl.jsx

@@ -8,10 +8,9 @@ import useStore from '../../store/useStore'
 import Dialog from '../Dialog'
 import {ControlButton} from '../Buttons'
 import PrivacyControl from './PrivacyControl'
-import AboutIcon from '../../assets/icons/Information.svg'
 import LogoB from '../../assets/LogoB.svg'
 import {Helmet} from 'react-helmet-async'
-
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 
 /**
  * Button to toggle About panel on and off
@@ -40,7 +39,7 @@ export default function AboutControl() {
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayedLocal}
       icon={
-        <AboutIcon className='icon-share'/>
+        <InfoOutlinedIcon className='icon-share' color='secondary'/>
       }
       dialog={
         <AboutDialog
@@ -88,7 +87,7 @@ function AboutContent({setIsDialogDisplayed}) {
   return (
     <Box sx={{paddingBottom: '10px'}}>
       <Helmet>
-        <title>About — BLDRS</title>
+        <title>About — Bldrs.ai</title>
       </Helmet>
       <Stack
         spacing={3}
@@ -97,24 +96,30 @@ function AboutContent({setIsDialogDisplayed}) {
         alignItems="center"
       >
         <Stack spacing={0}>
-          <Typography variant={'body1'}>build every thing together</Typography>
+          <Typography variant='body1'>Build every thing together</Typography>
           <Link
             underline="always"
             href='https://github.com/bldrs-ai/Share'
+            color='inherit'
+            variant='overline'
           >
             github.com/bldrs-ai/Share
           </Link>
         </Stack>
         <Box sx={{padding: '0px 10px', textAlign: 'left'}} elevation={0}>
           <Typography variant={'body1'}>
             <Box variant='span'>
-              Welcome to Share.
-            </Box>
-            Highlight specific elements within your 3D model,
-            position the camera angle,
+            Welcome to Share.<br/>
+            Upload your IFC model,
+            position the camera, select elements and crop the model using section planes;
             share the exact view using generated link.
-            <Box variant='span' sx={{fontWeight: 'bold'}}>
-              With the Share link everyone has access to the same context in digital space.
+            With Share everyone has access to the same context in model space.
+            </Box>
+            <Box variant='span'>
+              You can reach us on{' '}
+              <Link href='https://discord.com/channels/853953158560743424/853953158560743426' color='inherit' variant='overline'>
+                discord
+              </Link>.
             </Box>
           </Typography>
         </Box>

src/Components/About/AboutControl.test.jsx

@@ -15,7 +15,7 @@ describe('About control tests', () => {
     const {getByTitle, getByText} = render(<MockComponent><AboutControl/></MockComponent>)
     const aboutControl = getByTitle('About')
     fireEvent.click(aboutControl)
-    const dialogTitle = getByText('build every thing together')
+    const dialogTitle = getByText('Build every thing together')
     expect(dialogTitle).toBeInTheDocument()
   })
 
@@ -24,6 +24,6 @@ describe('About control tests', () => {
       wrapper: MockComponent,
     })
 
-    await(waitFor(() => expect(document.title).toBe('About — BLDRS')))
+    await(waitFor(() => expect(document.title).toBe('About — Bldrs.ai')))
   })
 })

src/Components/About/PrivacyControl.jsx

@@ -43,7 +43,7 @@ export default function PrivacyControl() {
         alignItems="flex-start"
       >
         <Typography>Analytics cookies</Typography>
-        <Link href='https://github.com/bldrs-ai/Share/wiki/Design#privacy' >
+        <Link href='https://github.com/bldrs-ai/Share/wiki/Design#privacy' color='inherit' variant='overline'>
           read more
         </Link>
       </Stack>

src/Components/CutPlaneMenu.jsx

@@ -9,7 +9,8 @@ import debug from '../utils/debug'
 import {addHashParams, getHashParams, getObjectParams, removeHashParams} from '../utils/location'
 import {floatStrTrim, isNumeric} from '../utils/strings'
 import {TooltipIconButton} from './Buttons'
-import CutPlaneIcon from '../assets/icons/CutPlane.svg'
+import CropOutlinedIcon from '@mui/icons-material/CropOutlined'
+// import CropOutlinedIcon from '../assets/icons/Cutplane.svg'
 
 
 const PLANE_PREFIX = 'p'
@@ -97,7 +98,7 @@ export default function CutPlaneMenu() {
     <>
       <TooltipIconButton
         title={'Section'}
-        icon={<CutPlaneIcon className='icon-share'/>}
+        icon={<CropOutlinedIcon className='icon-share' color='secondary'/>}
         onClick={handleClick}
         selected={anchorEl !== null || !!cutPlanes.length}
       />
@@ -112,7 +113,7 @@ export default function CutPlaneMenu() {
         PaperProps={{
           style: {
             left: '300px',
-            transform: 'translateX(-50px)',
+            transform: 'translateX(-60px)',
           },
           sx: {
             'color': theme.palette.primary.contrastText,

src/Components/LoginButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {useAuth0} from '@auth0/auth0-react'
 import {TooltipIconButton} from './Buttons'
-import GitHubIcon from '../assets/icons/GitHub.svg'
+import GitHubIcon from '@mui/icons-material/GitHub'
 
 
 const LoginButton = ({
@@ -22,7 +22,7 @@ const LoginButton = ({
   return (
     <TooltipIconButton
       title={'Log in with GitHub'}
-      icon={<GitHubIcon className='icon-share'/>}
+      icon={<GitHubIcon className='icon-share' color='secondary'/>}
       onClick={onClick}
     />
   )

src/Components/OpenModelControl.jsx

@@ -15,8 +15,8 @@ import useStore from '../store/useStore'
 import {handleBeforeUnload} from '../utils/event'
 import {getOrganizations, getRepositories, getFiles, getUserRepositories} from '../utils/GitHub'
 import {RectangularButton} from '../Components/Buttons'
-import OpenIcon from '../assets/icons/Open.svg'
 import UploadIcon from '../assets/icons/Upload.svg'
+import CreateNewFolderIcon from '@mui/icons-material/CreateNewFolder'
 
 
 /**
@@ -54,9 +54,9 @@ export default function OpenModelControl({fileOpen}) {
       <TooltipIconButton
         title={'Open IFC'}
         onClick={() => setIsDialogDisplayed(true)}
-        icon={<OpenIcon className='icon-share'/>}
+        icon={<CreateNewFolderIcon className='icon-share' color='secondary'/>}
         placement={'right'}
-        selected={isDialogDisplayed}
+        selected={true}
         dataTestId='open-ifc'
       />
       {isDialogDisplayed &&
@@ -124,7 +124,7 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen, org
 
   return (
     <Dialog
-      icon={<OpenIcon className='icon-share'/>}
+      icon={<CreateNewFolderIcon className='icon-share'/>}
       headerText={'Open'}
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayed}
@@ -137,41 +137,39 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen, org
           direction="column"
           justifyContent="center"
           alignItems="center"
-          sx={{paddingTop: '6px'}}
+          sx={{paddingTop: '6px', width: '280px'}}
         >
           <SampleModelFileSelector setIsDialogDisplayed={setIsDialogDisplayed}/>
           {isAuthenticated ?
-          <Box>
+          <Stack>
+            <Typography variant='overline' sx={{marginBottom: '6px'}}>Projects</Typography>
             <Selector label={'Organization'} list={orgNamesArrWithAt} selected={selectedOrgName} setSelected={selectOrg}/>
             <Selector label={'Repository'} list={repoNamesArr} selected={selectedRepoName} setSelected={selectRepo} testId={'Repository'}/>
             <Selector label={'File'} list={filesArr} selected={selectedFileName} setSelected={setSelectedFileName} testId={'File'}/>
             {selectedFileName !== '' &&
               <Box sx={{textAlign: 'center', marginTop: '4px'}}>
                 <RectangularButton
-                  title={'Load file'}
-                  icon={<UploadIcon className='icon-share'/>}
+                  title={'LOAD FILE'}
                   onClick={navigateToFile}
                 />
               </Box>
             }
-          </Box> :
+          </Stack> :
           <Box sx={{padding: '0px 10px'}} elevation={0}>
             <Stack sx={{textAlign: 'left'}}>
-              <Typography variant={'body1'}>
-                Please login to get access to your files on GitHub
-              </Typography>
-              <Typography variant={'body1'}>
+              <Typography variant={'body1'} sx={{marginTop: '10px'}}>
+                Please login to GitHub to get access to your projects.
                 Visit our {' '}
-                <Link href='https://github.com/bldrs-ai/Share/wiki/GitHub-model-hosting'>
+                <Link href='https://github.com/bldrs-ai/Share/wiki/GitHub-model-hosting' color='inherit' variant='body1'>
                   wiki
                 </Link> to learn more about GitHub hosting.
               </Typography>
+              <Typography variant={'caption'} sx={{marginTop: '10px'}}>
+               * Local files cannot yet be saved or shared.
+              </Typography>
             </Stack>
           </Box>
           }
-          <Typography variant={'caption'}>
-            * Local files cannot yet be saved or shared.
-          </Typography>
         </Stack>
       }
     />
@@ -190,7 +188,7 @@ function SampleModelFileSelector({setIsDialogDisplayed}) {
   const handleSelect = (e, closeDialog) => {
     setSelected(e.target.value)
     const modelPath = {
-      0: '/share/v/gh/IFCjs/test-ifc-files/main/Schependomlaan/IFC%20Schependomlaan.ifc#c:60.45,-4.32,60.59,1.17,5.93,-3.77',
+      0: '/share/v/gh/bldrs-ai/testModels/test/Schependomlaan.ifc#c:60.45,-4.32,60.59,1.17,5.93,-3.77',
       1: '/share/v/gh/Swiss-Property-AG/Momentum-Public/main/Momentum.ifc#c:-38.64,12.52,35.4,-5.29,0.94,0.86',
       2: '/share/v/gh/Swiss-Property-AG/Schneestock-Public/main/ZGRAGGEN.ifc#c:80.66,11.66,-94.06,6.32,2.93,-8.72',
       3: '/share/v/gh/Swiss-Property-AG/Eisvogel-Public/main/EISVOGEL.ifc#c:107.36,8.46,156.67,3.52,2.03,16.71',
@@ -209,31 +207,31 @@ function SampleModelFileSelector({setIsDialogDisplayed}) {
       sx={{
         'width': '260px',
         '& .MuiOutlinedInput-input': {
-          color: theme.palette.primary.main,
+          color: theme.palette.secondary.main,
         },
         '& .MuiInputLabel-root': {
-          color: theme.palette.primary.main,
+          color: theme.palette.secondary.main,
         },
         '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
-          borderColor: theme.palette.primary.main,
+          borderColor: theme.palette.secondary.main,
         },
         '&:hover .MuiOutlinedInput-input': {
-          color: theme.palette.primary.main,
+          color: theme.palette.secondary.main,
         },
         '&:hover .MuiInputLabel-root': {
-          color: theme.palette.primary.main,
+          color: theme.palette.secondary.main,
         },
         '&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
-          borderColor: theme.palette.primary.main,
+          borderColor: theme.palette.secondary.main,
         },
         '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input': {
-          color: theme.palette.primary.main,
+          color: theme.palette.secondary.main,
         },
         '& .MuiInputLabel-root.Mui-focused': {
-          color: theme.palette.primary.main,
+          color: theme.palette.secondary.main,
         },
         '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
-          borderColor: theme.palette.primary.main,
+          borderColor: theme.palette.secondary.main,
         },
       }}
       value={selected}

src/Components/OpenModelControl.test.jsx

@@ -14,7 +14,7 @@ describe('Open Model Dialog', () => {
     const {getByTitle, getByText} = render(<ShareMock><OpenModelControl/></ShareMock>)
     const button = getByTitle('Open IFC')
     fireEvent.click(button)
-    const loginText = getByText('Please login to get access to your files on GitHub')
+    const loginText = getByText('* Local files cannot yet be saved or shared.')
     expect(loginText).toBeInTheDocument()
   })
   it('Renders file selector if the user is logged in', async () => {

src/Components/OperationsGroup.jsx

@@ -12,14 +12,15 @@ import CutPlaneMenu from './CutPlaneMenu'
 import ShareControl from './ShareControl'
 import {TooltipIconButton} from './Buttons'
 import AuthNav from './AuthNav'
-import ClearIcon from '../assets/icons/Clear.svg'
-import ListIcon from '../assets/icons/List.svg'
-import MoonIcon from '../assets/icons/Moon.svg'
-import NotesIcon from '../assets/icons/Notes.svg'
-import SunIcon from '../assets/icons/Sun.svg'
-import QuestionIcon from '../assets/icons/Question.svg'
 import AppStoreIcon from '../assets/icons/AppStore.svg'
 import {useExistInFeature} from '../hooks/useExistInFeature'
+import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
+import FormatListBulletedOutlinedIcon from '@mui/icons-material/FormatListBulletedOutlined'
+import NightlightOutlinedIcon from '@mui/icons-material/NightlightOutlined'
+import HighlightOffIcon from '@mui/icons-material/HighlightOff'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined'
+
 
 /**
  * OperationsGroup contains tools for sharing, notes, properties, cut
@@ -72,8 +73,6 @@ export default function OperationsGroup({deselectItems}) {
   }
 
   const theme = useTheme()
-  const separatorOpacity = 0.1
-  const separatorColor = hexToRgba(assertDefined(theme.palette.primary.contrastText), separatorOpacity)
   // When the model has dark/black colors, then the icons (also dark)
   // disappear. This keeps them visible.
   const bgOpacity = 0.2
@@ -88,15 +87,6 @@ export default function OperationsGroup({deselectItems}) {
         '@media (max-width: 900px)': {
           padding: '1em 0.5em',
         },
-        '.MuiButtonGroup-root + .MuiButtonGroup-root': {
-          marginTop: '0.5em',
-          paddingTop: '0.5em',
-          borderTop: `solid 1px ${separatorColor}`,
-          borderRadius: 0,
-        },
-        '.MuiButtonBase-root + .MuiButtonBase-root': {
-          marginTop: '0.5em',
-        },
       }}
     >
       {isLoginVisible &&
@@ -115,7 +105,7 @@ export default function OperationsGroup({deselectItems}) {
        <ButtonGroup orientation='vertical'>
          <TooltipIconButton
            title='Notes'
-           icon={<NotesIcon className='icon-share'/>}
+           icon={<ChatOutlinedIcon className='icon-share' color='secondary'/>}
            selected={isNotesOn}
            onClick={() => {
              turnOffTooltips()
@@ -129,15 +119,15 @@ export default function OperationsGroup({deselectItems}) {
              toggle('Properties')
            }}
            selected={isPropertiesOn}
-           icon={<ListIcon className='icon-share'/>}
+           icon={<FormatListBulletedOutlinedIcon className='icon-share' color='secondary'/>}
          />
          <CutPlaneMenu/>
          {/* <ExtractLevelsMenu/> */}
          <TooltipIconButton
            title='Clear'
            onClick={deselectItems}
            selected={isSelected()}
-           icon={<ClearIcon className='icon-share'/>}
+           icon={<HighlightOffIcon className='icon-share'color='secondary'/>}
          />
 
        </ButtonGroup>
@@ -158,16 +148,16 @@ export default function OperationsGroup({deselectItems}) {
            onClick={() => theme.toggleColorMode()}
            icon={
              theme.palette.mode === 'light' ?
-               <MoonIcon className='icon-share'/> :
-               <SunIcon className='icon-share'/>}
+               <WbSunnyOutlinedIcon className='icon-share' color='secondary'/> :
+               <NightlightOutlinedIcon className='icon-share' color='secondary'/> }
          />
+         <AboutControl/>
          <TooltipIconButton
            title='Help'
            onClick={() => toggleIsHelpTooltips()}
            selected={isHelpTooltips}
-           icon={<QuestionIcon className='icon-share'/>}
+           icon={<HelpOutlineIcon className='icon-share' color='secondary'/>}
          />
-         <AboutControl/>
        </ButtonGroup>
       }
       {/* Invisible */}