Guide details (#592)

public/index.html

@@ -30,7 +30,7 @@
       test: `random`,
     })
   </script>
-  <title>BLDRS</title>
+  <title>bldrs.ai</title>
   <!-- Start Single Page Apps for GitHub Pages -->
   <script type="text/javascript">
       // Single Page Apps for GitHub Pages

src/Components/About/AboutControl.jsx

@@ -25,7 +25,7 @@ export default function AboutControl() {
 
   return (
     <ControlButton
-      title='About BLDRS'
+      title='About bldrs'
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayed}
       icon={

src/Components/About/AboutControl.test.jsx

@@ -7,13 +7,13 @@ import AboutControl from './AboutControl'
 describe('About control tests', () => {
   test('renders the AboutControl button', () => {
     const {getByTitle} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About BLDRS')
+    const aboutControl = getByTitle('About bldrs')
     expect(aboutControl).toBeInTheDocument()
   })
 
   test('renders AbotDialog when control is pressed', () => {
     const {getByTitle, getByText} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About BLDRS')
+    const aboutControl = getByTitle('About bldrs')
     fireEvent.click(aboutControl)
     const dialogTitle = getByText('build every thing together')
     expect(dialogTitle).toBeInTheDocument()

src/Components/About/AboutGuide.jsx

@@ -5,6 +5,7 @@ import CutPlaneIcon from '../../assets/icons/CutPlane.svg'
 import ListIcon from '../../assets/icons/List.svg'
 import LogoBuildings from '../../assets/Logo_Buildings.svg'
 import NotesIcon from '../../assets/icons/Notes.svg'
+import OpenIcon from '../../assets/icons/Open.svg'
 import ShareIcon from '../../assets/icons/Share.svg'
 
 
@@ -23,18 +24,18 @@ export default function AboutGuide() {
         fontSize: '0.8em',
         borderRadius: '10px',
         margin: '2em 0',
-        padding: '.5em 1em .5em .5em',
+        padding: '.3em 1em .5em .5em',
         color: theme.palette.primary.contrastText,
-        backgroundColor: theme.palette.primary.background,
+        backgroundColor: theme.palette.scene.background,
       }}
     >
       <Box
         sx={{
           'float': 'right',
           'margin': '.4em 0em 0em 0em',
           '& svg': {
-            width: '12px',
-            height: '12px',
+            width: '13px',
+            height: '13px',
             verticalAlign: 'middle',
             lineHeight: '15px',
             fill: theme.palette.primary.contrastText,
@@ -43,43 +44,51 @@ export default function AboutGuide() {
             textAlign: 'right',
             verticalAlign: 'middle',
             whiteSpace: 'nowrap',
-            lineHeight: '15px',
+            lineHeight: '16px',
+            fontSize: '14px',
           },
           '& a': {
             textAlign: 'right',
             verticalAlign: 'middle',
             whiteSpace: 'nowrap',
-            lineHeight: '15px',
+            lineHeight: '20px',
           },
         }}
       >
-        <div>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            width: '234px',
+          }}
+        >
           <a
-            href='https://bldrs.ai/share/v/p/index.ifc#c:-111.37,14.94,90.63,-43.48,15.73,-4.34::i:1493510953'
+            href='https://bldrs.ai/share/v/p/index.ifc#c:-111.37,14.94,90.63,-43.48,15.73,-4.34::i:1506392033'
             target='_new'
           >
-              Share model → <ShareIcon/>
+            <OpenIcon/> ← <span style={{textDecoration: 'underline'}}>Open</span>
           </a>
-        </div>
-        <div>Collaborate with Notes → <NotesIcon/></div>
-        <div>
           <a
-            href='http://bldrs.ai/share/v/p/index.ifc#c:-111.37,14.94,90.63,-43.48,15.73,-4.34::i:1527240734'
+            href='https://bldrs.ai/share/v/p/index.ifc#c:-111.37,14.94,90.63,-43.48,15.73,-4.34::i:1493510953'
             target='_new'
           >
-              View model item properties → <ListIcon/>
+            <span style={{textDecoration: 'underline'}}>Share</span> → <ShareIcon/>
           </a>
+        </Box>
+        <div>Notes → <NotesIcon/></div>
+        <div>
+          Properties → <ListIcon/>
         </div>
-        <div>Section and Plan views → <CutPlaneIcon/></div>
+        <div>Section → <CutPlaneIcon/></div>
       </Box>
       <Box
         sx={{
           'float': 'right',
-          'margin': '1.4em 4em 0em 0em',
+          'margin': '-1em 4em 0em 0em',
           '& svg': {
-            width: '120px',
-            height: '50px',
-            opacity: .9,
+            width: '130px',
+            height: '100px',
           },
         }}
       >

src/Components/CutPlaneMenu.jsx

@@ -117,23 +117,23 @@ export default function CutPlaneMenu() {
           sx: {
             'color': theme.palette.primary.contrastText,
             '& .Mui-selected': {
-              color: theme.palette.primary.highlight,
+              color: theme.palette.secondary.main,
               fontWeight: 800,
             },
           },
         }}
       >
         <MenuItem onClick={() => togglePlane({direction: 'x'})}
           selected={cutPlanes.findIndex((cutPlane) => cutPlane.direction === 'x') > -1}
-        >X
+        >X - Section
         </MenuItem>
         <MenuItem onClick={() => togglePlane({direction: 'y'})}
           selected={cutPlanes.findIndex((cutPlane) => cutPlane.direction === 'y') > -1}
-        >Y
+        >Y - Plan
         </MenuItem>
         <MenuItem onClick={() => togglePlane({direction: 'z'})}
           selected={cutPlanes.findIndex((cutPlane) => cutPlane.direction === 'z') > -1}
-        >Z
+        >Z - Section
         </MenuItem>
       </Menu>
     </>

src/Components/CutPlaneMenu.test.jsx

@@ -19,9 +19,9 @@ describe('CutPlaneMenu', () => {
     const {getByTitle, getByText} = render(<ShareMock><CutPlaneMenu/></ShareMock>)
     const sectionButton = getByTitle('Section')
     fireEvent.click(sectionButton)
-    expect(getByText('X')).toBeInTheDocument()
-    expect(getByText('Y')).toBeInTheDocument()
-    expect(getByText('Z')).toBeInTheDocument()
+    expect(getByText('X - Section')).toBeInTheDocument()
+    expect(getByText('Y - Plan')).toBeInTheDocument()
+    expect(getByText('Z - Section')).toBeInTheDocument()
   })
 
 
@@ -34,7 +34,7 @@ describe('CutPlaneMenu', () => {
       result.current.setViewerStore(viewer)
     })
     fireEvent.click(sectionButton)
-    const xDirection = getByText('X')
+    const xDirection = getByText('X - Section')
     fireEvent.click(xDirection)
     const callCreatePlanes = viewer.clipper.createFromNormalAndCoplanarPoint.mock.calls
     expect(callCreatePlanes.length).toBe(1)

src/Components/SnackbarMessage.jsx

@@ -22,11 +22,11 @@ export default function SnackBarMessage({message, severity, open}) {
           'backgroundColor': theme.palette.primary.background,
           'color': theme.palette.primary.contrastText,
           'position': 'relative',
-          'bottom': '90px',
+          'bottom': '60px',
           'left': '-6px',
           '@media (max-width: 900px)': {
             left: '18px',
-            bottom: '100px',
+            bottom: '80px',
             width: '305px',
             inlineSize: '305px',
             overflow: 'visible',

src/Share.jsx

@@ -102,9 +102,9 @@ export function navToDefault(navigate, appPrefix) {
   const mediaSizeTabletWith = 900
   window.removeEventListener('beforeunload', handleBeforeUnload)
   if (window.innerWidth <= mediaSizeTabletWith) {
-    navigate(`${appPrefix}/v/p/index.ifc#c:-158.5,-86,165.36,-39.36,18.57,-5.33`)
+    navigate(`${appPrefix}/v/p/index.ifc#c:-150.147,-85.796,167.057,-32.603,17.373,-1.347`)
   } else {
-    navigate(`${appPrefix}/v/p/index.ifc#c:-111.37,14.94,90.63,-43.48,15.73,-4.34`)
+    navigate(`${appPrefix}/v/p/index.ifc#c:-119.076,0.202,83.165,-44.967,19.4,-4.972`)
   }
 }