1281-properties-ux

src/Components/NavTree/NavTreeNode.jsx

@@ -3,8 +3,8 @@ import React, {ReactElement} from 'react'
 import {reifyName} from '@bldrs-ai/ifclib'
 import {useTheme} from '@mui/material/styles'
 import HideToggleButton from '../HideToggleButton'
-import NodeClosedIcon from '../../assets/icons/NodeClosed.svg'
-import NodeOpenIcon from '../../assets/icons/NodeOpened.svg'
+import NodeClosedIcon from '@mui/icons-material/KeyboardArrowRight'
+import NodeOpenIcon from '@mui/icons-material/KeyboardArrowDown'
 
 
 /** @return {ReactElement} */
@@ -59,7 +59,6 @@ export default function NavTreeNode({
           role='button'
           tabIndex={0}
           style={{
-            margin: '7px 8px 0 0',
             display: 'flex',
             alignItems: 'center',
           }}

src/Components/Properties/ExpansionPanel.jsx

@@ -3,7 +3,7 @@ import Accordion from '@mui/material/Accordion'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import AccordionSummary from '@mui/material/AccordionSummary'
 import Typography from '@mui/material/Typography'
-import CaretIcon from '../../assets/icons/Caret.svg'
+import PsetOpenIcon from '@mui/icons-material/KeyboardArrowDown'
 
 
 /**
@@ -42,9 +42,9 @@ export default function ExpansionPanel({summary, detail, expandState}) {
       onChange={() => setExpanded(!expanded)}
     >
       <AccordionSummary
-        expandIcon={<CaretIcon className='caretToggle'/>}
-        aria-controls="panel1a-content"
-        id="panel1a-header"
+        expandIcon={<PsetOpenIcon className='icon-share'/>}
+        aria-controls='panel1a-content'
+        id='panel1a-header'
       >
         <Typography sx={{
           'maxWidth': '260px',

src/Components/Properties/Properties.jsx

@@ -4,12 +4,12 @@ import Box from '@mui/material/Box'
 import Paper from '@mui/material/Paper'
 import Typography from '@mui/material/Typography'
 import {useTheme} from '@mui/material/styles'
+import {useIsMobile} from '../Hooks'
+import Toggle from '../Toggle'
 import useStore from '../../store/useStore'
 import {hexToRgba} from '../../utils/color'
-import {createPropertyTable} from '../../utils/itemProperties'
 import ExpansionPanel from './ExpansionPanel'
-import {useIsMobile} from '../Hooks'
-import Toggle from '../Toggle'
+import {createPropertyTable} from './itemProperties'
 
 
 /**

src/utils/itemProperties.jsx → src/Components/Properties/itemProperties.jsx

@@ -1,8 +1,8 @@
 import React, {useState} from 'react'
-import debug from './debug'
 import Typography from '@mui/material/Typography'
 import {deref, decodeIFCString} from '@bldrs-ai/ifclib'
-import {stoi} from './strings'
+import debug from '../../utils/debug'
+import {stoi} from '../../utils/strings'
 
 
 /**

src/Containers/AlertDialogAndSnackbar.jsx

@@ -44,6 +44,7 @@ export default function AlertAndSnackbar() {
     setIsSnackOpen(true)
   }, [snackMessage, setIsSnackOpen])
 
+
   return (
     <>
       <AlertDialog
@@ -59,24 +60,24 @@ export default function AlertAndSnackbar() {
         open={isSnackOpen}
         onClose={(event, reason) => setIsSnackOpen(false)}
         action={
-            <IconButton
-              onClick={() => setIsSnackOpen(false)}
-              size='small'
-              sx={{marginRight: '-.5em'}}
-            >
-                <CloseIcon color='primary' fontSize="inherit"/>
-            </IconButton>
-          }
+          <IconButton
+            onClick={() => setIsSnackOpen(false)}
+            size='small'
+            sx={{marginRight: '-.5em'}}
+          >
+            <CloseIcon color='primary' fontSize='inherit'/>
+          </IconButton>
+        }
         message={
-            <Typography
-              variant='body2'
-              sx={{
-                maxWidth: '19em',
-                overflowWrap: 'break-word',
-              }}
-            >
-              {text}
-            </Typography>
+          <Typography
+            variant='body2'
+            sx={{
+              maxWidth: '19em',
+              overflowWrap: 'break-word',
+            }}
+          >
+            {text}
+          </Typography>
         }
         data-testid='snackbar'
       />

src/theme/Components.js

@@ -97,41 +97,6 @@ export function getComponentOverrides(palette, typography) {
         },
       },
     },
-    MuiChip: {
-      styleOverrides: {
-        filled: ({theme}) => ({
-          'border': `1px solid ${theme.palette.primary.main}`,
-          'backgroundColor': theme.palette.primary.main,
-          '&:hover': {
-            backgroundColor: theme.palette.secondary.main,
-          },
-        }),
-        outlined: ({theme}) => ({
-          'borderColor': theme.palette.primary.main,
-          'color': theme.palette.primary.contrastText,
-          '&&:hover': {
-            backgroundColor: theme.palette.primary.main,
-          },
-        }),
-        sampleModel: ({theme}) => ({
-          'borderColor': theme.palette.primary.main,
-          'backgroundColor': theme.palette.secondary.main,
-          'color': theme.palette.primary.contrastText,
-          'width': '11em',
-          'height': '6em',
-          'display': 'flex',
-          'justifyContent': 'center',
-          '&&:hover': {
-            backgroundColor: theme.palette.primary.main,
-          },
-          '& .MuiChip-label': {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          },
-        }),
-      },
-    },
     MuiDialog: {
       styleOverrides: {
         paper: {
@@ -179,18 +144,18 @@ export function getComponentOverrides(palette, typography) {
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: ({theme}) => ({
+        root: {
           '&.Mui-selected': {
-            backgroundColor: theme.palette.secondary.dark,
+            backgroundColor: palette.secondary.dark,
             fontWeight: 'bold',
           },
           '&.Mui-selected:hover': {
             // TODO(pablo): merge with above. Can't figure out combined selector
-            backgroundColor: theme.palette.secondary.dark,
+            backgroundColor: palette.secondary.dark,
             fontWeight: 'bold',
             fontStyle: 'italic',
           },
-        }),
+        },
       },
     },
     MuiPaper: {
@@ -210,49 +175,43 @@ export function getComponentOverrides(palette, typography) {
         },
         {
           props: {variant: 'page-background'},
-          style: ({theme}) => ({
+          style: {
             padding: '10px',
             borderRadius: '0',
-          }),
+          },
         },
         {
           props: {variant: 'page'},
-          style: ({theme}) => ({
+          style: {
             padding: '10px',
             borderRadius: '0',
-          }),
+          },
         },
       ],
     },
-    MuiSelect: {
-      styleOverrides: {
-        root: {
-          // background: palette.primary.main,
-        },
-      },
-    },
     MuiLink: {
       styleOverrides: {
         root: {
-          color: palette.primary.contrastText,
+          color: palette.secondary.contrastText,
           textDecoration: 'underline',
         },
       },
     },
     MuiSnackbarContent: {
       styleOverrides: {
         root: {
+          backgroundColor: palette.secondary.main,
           borderRadius: '10px',
         },
       },
     },
     MuiSvgIcon: {
       styleOverrides: {
-        root: ({theme}) => ({
+        root: {
           width: '1.5rem',
           height: '1.5rem',
-          color: theme.palette.secondary.contrastText,
-        }),
+          color: palette.secondary.contrastText,
+        },
       },
       variants: [{
         // Used in HelpControl to indicate activity state
@@ -296,9 +255,9 @@ export function getComponentOverrides(palette, typography) {
     },
     MuiTypography: {
       styleOverrides: {
-        root: ({theme}) => ({
-          color: theme.palette.secondary.contrastText,
-        }),
+        root: {
+          color: palette.secondary.contrastText,
+        },
       },
     },
   }

src/theme/Typography.js

@@ -24,7 +24,7 @@ export function getTypography() {
     body1: {fontSize, lineHeight, letterSpacing, fontWeight},
     body2: {fontSize, lineHeight, letterSpacing, fontWeight},
     tree: {fontSize, lineHeight, letterSpacing, fontWeight},
-    propTitle: {fontSize, lineHeight, letterSpacing, fontWeight},
-    propValue: {fontSize, lineHeight, letterSpacing, fontWeight: 300},
+    propTitle: {fontSize, lineHeight, letterSpacing, fontWeight: 300},
+    propValue: {fontSize, lineHeight, letterSpacing, fontWeight},
   }
 }