Rework About dialog, also includes info@ email

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.1132",
+  "version": "1.0.1126",
   "main": "src/index.jsx",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/About/AboutDialog.jsx

@@ -3,12 +3,14 @@ import {Helmet} from 'react-helmet-async'
 import Link from '@mui/material/Link'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
-import {TooltipIconButton} from '../Buttons'
 import Dialog from '../Dialog'
 import {LogoBWithDomain} from '../Logo/Logo'
 // TODO(pablo): re-enable after prod freeze bug fixed
 // import PrivacyControl from './PrivacyControl'
 import GitHubIcon from '@mui/icons-material/GitHub'
+import EmailIcon from '@mui/icons-material/Email'
+import FolderIcon from '@mui/icons-material/FolderOpen'
+import ShareIcon from '@mui/icons-material/Share'
 import DiscordIcon from '../../assets/icons/Discord.svg'
 
 
@@ -59,33 +61,34 @@ function AboutContent() {
         justifyContent='center'
         alignItems='center'
       >
-        <Stack spacing={0} direction='row'>
-          <TooltipIconButton
-            title='Discord'
-            onClick={() => window.open(`https://discord.gg/9SxguBkFfQ`, '_blank')}
-            icon={<DiscordIcon className='icon-share' style={{width: '50px'}}/>}
-            placement='bottom'
-            variant='noBackground'
-          />
-          <TooltipIconButton
-            title='GitHub'
-            onClick={() => window.open(`https://github.com/bldrs-ai/Share`, '_blank')}
-            icon={<GitHubIcon className='icon-share'/>}
-            placement='bottom'
-            variant='noBackground'
-          />
-        </Stack>
-        <Stack align='left'>
+        <Stack align='left' spacing={2}>
+          <Typography variant='body1'>
+            Welcome to Bldrs - Share!
+          </Typography>
           <Typography variant='body1'>
-            Upload your IFC model, position the camera, select elements,
-            crop the model using section planes and add notes; then share
-            the exact view using the generated link. Everyone has access
-            to the same context in model space.
+            Use the Open <FolderIcon className='icon-share'/> dialog to open IFC or STEP models from:
+            <ul>
+              <li>Files hosted on GitHub</li>
+              <li>Local files - <em>no data is uploaded to our servers</em></li>
+            </ul>
+            <strong>Position</strong> the camera, <strong>Select</strong> elements, <strong>Crop</strong> using
+            section planes and add <strong>Notes</strong>; then <strong>Share</strong> the exact view using the
+            page URL or Share <ShareIcon className='icon-share' style={{height: '0.7em'}}/> dialog.
           </Typography>
           <Typography variant='body1'>
-            &nbsp;<br/>
-            And try the magic wand!
+            Comments and suggestions welcome!
           </Typography>
+          <Stack direction='row' justifyContent='center' alignItems='center' spacing={2}>
+            <a href="https://discord.gg/9SxguBkFfQ">
+              <DiscordIcon className='icon-share' style={{height: '0.7em', marginRight: '0.5em'}}/>Discord
+            </a>
+            <a href="https://github.com/bldrs-ai/Share">
+              <GitHubIcon className='icon-share' style={{height: '0.7em', marginRight: '0.25em'}}/>GitHub
+            </a>
+            <a href="mailto:[email protected]">
+              <EmailIcon className='icon-share' style={{height: '0.7em', marginRight: '0.25em'}}/>[email protected]
+            </a>
+          </Stack>
         </Stack>
       </Stack>
     </>)

src/Components/Share/ShareControl.jsx

@@ -2,7 +2,6 @@ import React, {ReactElement, createRef, useEffect, useState} from 'react'
 import {Helmet} from 'react-helmet-async'
 import QRCode from 'react-qr-code'
 import Box from '@mui/material/Box'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import IconButton from '@mui/material/IconButton'
 import InputAdornment from '@mui/material/InputAdornment'
 import Stack from '@mui/material/Stack'
@@ -15,8 +14,9 @@ import {addPlanesToHashState, removePlanesFromHashState} from '../CutPlane/CutPl
 import Dialog from '../Dialog'
 import Toggle from '../Toggle'
 import {HASH_PREFIX_SHARE} from './hashState'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import ShareIcon from '@mui/icons-material/Share'
 import CopyIcon from '../../assets/icons/Copy.svg'
-import ShareIcon from '../../assets/icons/Share.svg'
 
 
 /**