Minor style fixes Alert Dialog + Snackbar (bldrs-ai#1213)

* fix snackbar * made modification to the path * wrap word * refactor alert message * revert the alert component * revert the alert * change the message * extend the aler message * fix the set alert message * try new message * add the login if the repo is private * adjust * change the format * add the path * move all of the dialog * break the link * fix the message * fix the message * fix the message * make it a list * move the snack bar up * change the alert message * variable change --------- Signed-off-by: OlegMoshkovich <[email protected]>
OlegMoshkovich · Jun 14, 2024 · bdd1b40 · bdd1b40
1 parent 18aec5a
commit bdd1b40
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.1053",
+  "version": "1.0.1073",
   "main": "src/index.jsx",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/bldrs-ai/Share",

diff --git a/src/Components/AlertDialog.jsx b/src/Components/AlertDialog.jsx
@@ -1,34 +1,122 @@
 import React, {ReactElement} from 'react'
+import Box from '@mui/material/Box'
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
-import IconButton from '@mui/material/IconButton'
+import Link from '@mui/material/Link'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import Paper from '@mui/material/Paper'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import {RectangularButton} from '../Components/Buttons'
 import useStore from '../store/useStore'
-import CheckIcon from '@mui/icons-material/Check'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import useTheme from '@mui/styles/useTheme'
 
 
 /** @return {ReactElement} */
 export default function AlertDialog({onClose, children}) {
-  const alertMessage = useStore((state) => state.alertMessage)
-  const setAlertMessage = useStore((state) => state.setAlertMessage)
+  const errorPath = useStore((state) => state.errorPath)
+  const setErrorPath = useStore((state) => state.setErrorPath)
+  const theme = useTheme()
   const onCloseInner = () => {
-    setAlertMessage(null)
+    setErrorPath(null)
     onClose()
   }
   return (
     <Dialog
-      open={alertMessage !== null}
+      open={errorPath !== null}
       onClose={onCloseInner}
       aria-labelledby='alert-dialog-title'
       aria-describedby='alert-dialog-description'
     >
-      <DialogTitle id='alert-dialog-title'>{'Alert'}</DialogTitle>
-      <DialogContent>
-        {alertMessage}
+      <DialogTitle id='alert-dialog-title'>
+        <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+        >
+          <Paper
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '2.5em',
+              height: '2.5em',
+              borderRadius: '50%',
+              background: theme.palette.secondary.main,
+            }}
+          >
+            <ErrorOutlineIcon className='icon-share'/>
+          </Paper>
+        </Box>
+      </DialogTitle>
+      <DialogContent sx={{textAlign: 'left'}}>
+      <Stack spacing={1} sx={{padding: '0em 1em'}}>
+        <List>
+          <ListItem variant='alert'>
+            <ListItemText
+              primary={
+                <Typography
+                  variant='body1'
+                  sx={{fontWeight: 'bold'}}
+                >
+                  Could not load the model
+                </Typography>
+              }
+              primaryTypographyProps={{variant: 'body1'}}
+            />
+          </ListItem>
+          <ListItem variant='alert'>
+            <ListItemText
+              primary="Log in if repository is private"
+              primaryTypographyProps={{variant: 'body1'}}
+            />
+          </ListItem>
+          <ListItem variant='alert'>
+            <ListItemText
+              primary={
+                <Typography
+                  variant='body1'
+                  sx={{
+                    maxWidth: '300px',
+                    wordWrap: 'break-word',
+                    overflowWrap: 'break-word',
+                    whiteSpace: 'normal',
+                  }}
+                >
+                  Check the file path:
+                  <br/>
+                  {errorPath}
+                </Typography>
+              }
+            />
+          </ListItem>
+          <ListItem variant='alert'>
+            <ListItemText
+              primary={
+                <Typography variant='body1'>
+                  Contact us on our{' '}
+                  <Link href='https://discord.gg/9SxguBkFfQ' target="_blank" rel="noopener noreferrer">
+                    Discord
+                  </Link>{' '}
+                  for help
+                </Typography>
+              }
+            />
+          </ListItem>
+        </List>
+      </Stack>
       </DialogContent>
-      <DialogActions>
-        <IconButton onClick={onCloseInner}><CheckIcon/></IconButton>
+      <DialogActions >
+        <RectangularButton onClick={onCloseInner} variant='outline' title='Reset'/>
       </DialogActions>
     </Dialog>
   )

diff --git a/src/Components/Buttons.jsx b/src/Components/Buttons.jsx
@@ -189,15 +189,13 @@ export function RectangularButton({
   title,
   onClick,
   icon = null,
-  border = false,
-  background = true,
   disabled = false,
 }) {
   assertDefined(title, onClick)
   return (
     icon ?
-      <Button onClick={onClick} startIcon={icon} variant='rectangular' color='secondary'>{title}</Button> :
-      <Button onClick={onClick} variant='rectangular' color='secondary' disabled={disabled}>{title}</Button>
+      <Button onClick={onClick} startIcon={icon} variant='contained'>{title}</Button> :
+      <Button onClick={onClick} variant='contained' disabled={disabled}>{title}</Button>
   )
 }
 

diff --git a/src/Containers/AlertDialogAndSnackbar.jsx b/src/Containers/AlertDialogAndSnackbar.jsx
@@ -2,12 +2,12 @@ import React, {ReactElement, useEffect, useState} from 'react'
 import {useNavigate} from 'react-router-dom'
 import IconButton from '@mui/material/IconButton'
 import Snackbar from '@mui/material/Snackbar'
-import Stack from '@mui/material/Stack'
 import AlertDialog from '../Components/AlertDialog'
 import {navToDefault} from '../Share'
 import useStore from '../store/useStore'
 import {assert} from '../utils/assert'
 import CloseIcon from '@mui/icons-material/Close'
+import {Typography} from '@mui/material'
 
 
 /** @return {ReactElement} */
@@ -44,7 +44,6 @@ export default function AlertAndSnackbar() {
     setIsSnackOpen(true)
   }, [snackMessage, setIsSnackOpen])
 
-
   return (
     <>
       <AlertDialog
@@ -56,13 +55,28 @@ export default function AlertAndSnackbar() {
       <Snackbar
         anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
         autoHideDuration={duration}
+        sx={{marginBottom: '-.3em'}}
         open={isSnackOpen}
         onClose={(event, reason) => setIsSnackOpen(false)}
+        action={
+            <IconButton
+              onClick={() => setIsSnackOpen(false)}
+              size='small'
+              sx={{marginRight: '-.5em'}}
+            >
+                <CloseIcon color='primary' fontSize="inherit"/>
+            </IconButton>
+          }
         message={
-          <Stack direction='row'>
-            {text}
-            <IconButton onClick={() => setIsSnackOpen(false)}><CloseIcon className='icon-share'/></IconButton>
-          </Stack>
+            <Typography
+              variant='body2'
+              sx={{
+                maxWidth: '19em',
+                overflowWrap: 'break-word',
+              }}
+            >
+              {text}
+            </Typography>
         }
         data-testid='snackbar'
       />

diff --git a/src/Containers/CadView.jsx b/src/Containers/CadView.jsx
@@ -2,7 +2,6 @@ import React, {ReactElement, useEffect, useState} from 'react'
 import {useNavigate, useSearchParams, useLocation} from 'react-router-dom'
 import {MeshLambertMaterial} from 'three'
 import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
 import useTheme from '@mui/styles/useTheme'
 import {filetypeRegex} from '../Filetype'
 import {useAuth0} from '../Auth0/Auth0Proxy'
@@ -99,7 +98,7 @@ export default function CadView({
   const modelPath = useStore((state) => state.modelPath)
 
   // UISlice
-  const setAlertMessage = useStore((state) => state.setAlertMessage)
+  const setErrorPath = useStore((state) => state.setErrorPath)
   const setIsCutPlaneActive = useStore((state) => state.setIsCutPlaneActive)
   const setSnackMessage = useStore((state) => state.setSnackMessage)
 
@@ -185,7 +184,6 @@ export default function CadView({
       viewer.IFC.selector.preselection.material = preselectMat
       viewer.IFC.selector.selection.material = selectMat
     }
-
     const pathToLoad = modelPath.gitpath || (installPrefix + modelPath.filepath)
     let tmpModelRef
     try {
@@ -198,17 +196,12 @@ export default function CadView({
     debug().log(`CadView#onViewer, pathToLoad(${pathToLoad}) tmpModelRef(${tmpModelRef}`)
 
     if (tmpModelRef === undefined || tmpModelRef === null) {
-      setAlertMessage(
-        <>
-          <Typography variant=''>Could not load model</Typography>
-          <Typography>{pathToLoad}</Typography>
-        </>)
+      setErrorPath(pathToLoad)
       return
     }
     // Leave snack message until here so alert box handler can clear
     // it after user says OK.
     setSnackMessage(null)
-
     debug().log('CadView#onViewer: tmpModelRef: ', tmpModelRef)
     await onModel(tmpModelRef)
     createPlaceMark({
@@ -385,7 +378,7 @@ export default function CadView({
           debug().log('CadView#loadIfc$onError: ', error)
           // TODO(pablo): error modal.
           setIsModelLoading(false)
-          setAlertMessage(`Could not load file: ${filepath}. Please try logging in if the repository is private.`)
+          setErrorPath(filePath)
         }, customViewSettings)
     }
 

diff --git a/src/store/UISlice.js b/src/store/UISlice.js
@@ -18,8 +18,8 @@ const isThemeEnabled = process.env.THEME_IS_ENABLED
  */
 export default function createUISlice(set, get) {
   return {
-    alertMessage: null,
-    setAlertMessage: (msg) => set(() => ({alertMessage: msg})),
+    errorPath: null,
+    setErrorPath: (path) => set(() => ({errorPath: path})),
 
     appStoreSidebarWidth: MOBILE_WIDTH,
     setAppStoreSidebarWidth: (width) => set(() => ({appStoreSidebarWidth: width})),

diff --git a/src/theme/Components.js b/src/theme/Components.js
@@ -134,9 +134,16 @@ export function getComponentOverrides(palette, typography) {
     MuiListItem: {
       styleOverrides: {
         root: {
-          padding: '0.5em 0',
+          padding: '.5em 0',
         },
       },
+      variants: [{
+        // Used in HelpControl to indicate activity state
+        props: {variant: 'alert'},
+        style: {
+          padding: '.2em 0',
+        },
+      }],
     },
     MuiMenuItem: {
       styleOverrides: {
@@ -185,10 +192,17 @@ export function getComponentOverrides(palette, typography) {
         },
       },
     },
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          color: palette.primary.contrastText,
+          textDecoration: 'underline',
+        },
+      },
+    },
     MuiSnackbarContent: {
       styleOverrides: {
         root: {
-          // backgroundColor: palette.primary.main,
           borderRadius: '10px',
         },
       },
@@ -212,9 +226,7 @@ export function getComponentOverrides(palette, typography) {
     MuiTextField: {
       styleOverrides: {
         root: {
-          // backgroundColor: palette.primary.main,
           borderRadius: '10px',
-          // opacity: .9,
         },
       },
     },