Introduce html-based AboutGuide. Normalize dialogs. Use theme.

config/common.js

@@ -16,7 +16,7 @@ export const buildDir = path.resolve(__dirname, '..', 'docs')
 export const build = {
   entryPoints: [entryPoint],
   bundle: true,
-  minify: process.env.NODE_ENV === 'production',
+  minify: false, // process.env.NODE_ENV === 'production',
   // https://esbuild.github.io/api/#keep-names
   // We use code identifiers e.g. in ItemProperties for their names
   keepNames: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r584",
+  "version": "1.0.0-r593",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
@@ -57,6 +57,7 @@
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
+    "@mui/types": "^7.2.3",
     "@pablo-mayrgundter/cookies.js": "^1.0.0",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",

public/index.html

@@ -13,11 +13,10 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&amp;display=swap" />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&amp;display=swap"
     rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="stylesheet" href="./index.css">
 
   <!-- Global site tag (gtag.js) - Google Analytics snippet -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-210924287-3"></script>

src/Components/About/AboutControl.jsx

@@ -0,0 +1,87 @@
+import React, {useState} from 'react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import {getCookieBoolean, setCookieBoolean} from '../../privacy/Privacy'
+import Dialog from '../Dialog'
+import {ControlButton} from '../Buttons'
+import AboutGuide from './AboutGuide'
+import PrivacyControl from './PrivacyControl'
+import AboutIcon from '../../assets/2D_Icons/Information.svg'
+import LogoB from '../../assets/LogoB_3.svg'
+
+
+/**
+ * Button to toggle About panel on and off
+ *
+ * @return {React.ReactElement}
+ */
+export default function AboutControl() {
+  const [isDialogDisplayed, setIsDialogDisplayed] = useState(getCookieBoolean({
+    component: 'about',
+    name: 'isFirstTime',
+    defaultValue: true,
+  }))
+
+
+  return (
+    <ControlButton
+      title='About BLDRS'
+      isDialogDisplayed={isDialogDisplayed}
+      setIsDialogDisplayed={setIsDialogDisplayed}
+      icon={<AboutIcon/>}
+      dialog={
+        <AboutDialog
+          isDialogDisplayed={isDialogDisplayed}
+          setIsDialogDisplayed={() => {
+            setIsDialogDisplayed(false)
+            setCookieBoolean({component: 'about', name: 'isFirstTime', value: false})
+          }}
+        />
+      }
+    />
+  )
+}
+
+
+/**
+ * The AboutDialog component
+ *
+ * @param {boolean} isDialogDisplayed
+ * @param {Function} setIsDialogDisplayed
+ * @return {React.Component} React component
+ */
+function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
+  return (
+    <Dialog
+      icon={
+        <Box sx={{display: 'inline-flex', flexDirection: 'column', textAlign: 'center'}}>
+          <LogoB style={{width: '80px', height: '80px'}}/>
+          bldrs.ai
+        </Box>
+      }
+      headerText={''}
+      isDialogDisplayed={isDialogDisplayed}
+      setIsDialogDisplayed={setIsDialogDisplayed}
+      content={<AboutContent/>}
+      actionTitle='OK'
+      actionCb={() => setIsDialogDisplayed(false)}
+    />)
+}
+
+
+/**
+ * The content portion of the AboutDialog
+ *
+ * @return {React.ReactElement} React component
+ */
+function AboutContent() {
+  return (
+    <Box>
+      <Typography variant='h1' gutterBottom={true}>Build Every Thing Together</Typography>
+      <a href='https://github.com/bldrs-ai/Share' target='_new'>
+        github.com/bldrs-ai/Share
+      </a>
+      <AboutGuide/>
+      <PrivacyControl/>
+    </Box>)
+}

src/Components/AboutControl.test.jsx → src/Components/About/AboutControl.test.jsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import {render, fireEvent} from '@testing-library/react'
-import * as Privacy from '../privacy/Privacy'
-import {MockComponent} from '../__mocks__/MockComponent'
+import {MockComponent} from '../../__mocks__/MockComponent'
 import AboutControl from './AboutControl'
-import {setPrivacy} from './AboutControl'
 
 
 describe('About control tests', () => {
@@ -20,13 +18,4 @@ describe('About control tests', () => {
     const dialogTitle = getByText('Build Every Thing Together')
     expect(dialogTitle).toBeInTheDocument()
   })
-
-  test('sets privacy settings correctly', () => {
-    // Test setting privacy to disabled
-    setPrivacy(true)
-    expect(Privacy.isPrivacySocialEnabled()).toBe(false)
-    // Test setting privacy to enabled
-    setPrivacy(false)
-    expect(Privacy.isPrivacySocialEnabled()).toBe(true)
-  })
 })

src/Components/About/AboutGuide.jsx

@@ -0,0 +1,67 @@
+import React, {useContext} from 'react'
+import Box from '@mui/material/Box'
+import {useTheme} from '@mui/styles'
+import {ColorModeContext} from '../../Context/ColorMode'
+import CutPlaneIcon from '../../assets/2D_Icons/CutPlane.svg'
+import ListIcon from '../../assets/2D_Icons/List.svg'
+import NotesIcon from '../../assets/2D_Icons/Notes.svg'
+import ShareIcon from '../../assets/2D_Icons/Share.svg'
+
+
+/**
+ * A miniature view of the App to show as a guide in the About dialog.
+ *
+ * @return {React.ReactElement}
+ */
+export default function AboutGuide() {
+  const theme = useTheme()
+  const colorMode = useContext(ColorModeContext)
+  return (
+    <Box
+      sx={{
+        width: '250px',
+        height: '150px',
+        fontSize: '0.8em',
+        borderRadius: '5px',
+        opacity: .8,
+        margin: '2em 0',
+        padding: '0.5em',
+        color: theme.palette.primary.contrastText,
+        backgroundColor: colorMode.isDay() ? '#E8E8E8' : '#4C4C4C',
+      }}
+    >
+      <Box
+        sx={{
+          'float': 'right',
+          '& svg': {
+            width: '12px',
+            height: '12px',
+            verticalAlign: 'middle',
+            lineHeight: '15px',
+            fill: theme.palette.primary.contrastText,
+          },
+          '& div': {
+            textAlign: 'right',
+            verticalAlign: 'middle',
+            whiteSpace: 'nowrap',
+            lineHeight: '15px',
+          },
+        }}
+      >
+        <div>Share model → <ShareIcon/></div>
+        <div>Collaborate with Notes → <NotesIcon/></div>
+        <div>View model item properties → <ListIcon/></div>
+        <div>Section and Plan views → <CutPlaneIcon/></div>
+      </Box>
+      <img
+        src='/logo-buildings.png'
+        alt='logo'
+        width='100'
+        style={{
+          margin: '0 auto',
+          opacity: 0.5,
+        }}
+      />
+    </Box>
+  )
+}

src/Components/About/PrivacyControl.jsx

@@ -0,0 +1,61 @@
+import React, {useEffect, useState} from 'react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import * as Privacy from '../../privacy/Privacy'
+import Toggle from '../Toggle'
+
+
+/**
+ * The PrivacyControl component contains and "accept cookies" checkbox.
+ *
+ * @return {React.ReactElement}
+ */
+export default function PrivacyControl() {
+  const [acceptCookies, setAcceptCookies] = useState(true)
+
+
+  useEffect(() => {
+    if (Privacy.isPrivacySocialEnabled()) {
+      setAcceptCookies(true)
+    } else {
+      setAcceptCookies(false)
+    }
+  }, [])
+
+  const changePrivacy = () => {
+    setPrivacy(acceptCookies)
+    setAcceptCookies(!acceptCookies)
+  }
+
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        margin: '1em 0',
+        textAlign: 'justify',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}
+    >
+      <Typography>
+        Analytics cookies<br/>
+        <a href='https://github.com/bldrs-ai/Share/wiki/Design#privacy' target='_new'>
+          read more
+        </a>
+      </Typography>
+      <Toggle checked={acceptCookies} onChange={changePrivacy}/>
+    </Box>
+  )
+}
+
+
+export const setPrivacy = (acceptCookies) => {
+  if (acceptCookies) {
+    Privacy.setUsageAndSocialEnabled(false, false)
+  } else {
+    Privacy.setUsageAndSocialEnabled(true, true)
+  }
+}

src/Components/About/PrivacyControl.test.jsx

@@ -0,0 +1,14 @@
+import * as Privacy from '../../privacy/Privacy'
+import {setPrivacy} from './PrivacyControl'
+
+
+describe('PrivacyControl tests', () => {
+  test('sets privacy settings correctly', () => {
+    // Test setting privacy to disabled
+    setPrivacy(true)
+    expect(Privacy.isPrivacySocialEnabled()).toBe(false)
+    // Test setting privacy to enabled
+    setPrivacy(false)
+    expect(Privacy.isPrivacySocialEnabled()).toBe(true)
+  })
+})