Fix icon styling across Share. Improve style setup in Cosmos. (#769)

* Fix style setup in AboutDialog.fixture

* Set icon size at theme level using className of icon-share and a couple subtypes. Fix croping of Bldrs logo in About panel.  Remove hardcoded fill from all SVG icons.  Set fill set theme level.

* Set icon size at theme level using className of icon-share and a couple subtypes. Fix croping of Bldrs logo in About panel.  Remove hardcoded fill from all SVG icons.  Set fill set theme level.

* Reduce size of X icon to 15x15.

* Introduce icon-small 15x15, use for CloseIcon.

* Introduce FixtureContext, to include style setup in base context for all fixtures. Upgrade svgr plugins and uniform config between esbuild and cosmos/webpack for uniform icon rendering.  Simplify some components.

* Remove icon customization.

* Add back in react names for anon components. Simplify NoContent.

* Trigger rebuild.

* Slightly slimmer Dialog to prevent horizontal scroll on mobile.

---------

Signed-off-by: Pablo Mayrgundter <pablo.mayrgundter@gmail.com>

.cosmos.webpack.js

@@ -30,7 +30,12 @@ module.exports = {
       },
       {
         test: /\.svg$/i,
-        use: ['@svgr/webpack'],
+        use: {
+          loader: '@svgr/webpack',
+          options: {
+            dimensions: false
+          }
+        }
       },
     ],
   },

config/common.js

@@ -48,7 +48,7 @@ export const build = {
   },
   plugins: [
     progress(),
-    svgrPlugin(),
+    svgrPlugin({plugins: ['@svgr/plugin-jsx'], dimensions: false}),
     copyStaticFiles({
       src: assetsDir,
       dest: buildDir,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r682",
+  "version": "1.0.0-r689",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
@@ -72,7 +72,8 @@
     "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
     "@mui/types": "^7.2.3",
     "@pablo-mayrgundter/cookies.js": "^1.0.0",
-    "@svgr/webpack": "^6.5.1",
+    "@svgr/webpack": "^8.0.1",
+    "@svgr/plugin-jsx": "^8.0.1",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/dom": "^8.19.1",
     "@testing-library/jest-dom": "^5.16.5",
@@ -91,7 +92,7 @@
     "esbuild-clean-plugin": "^1.0.0",
     "esbuild-copy-static-files": "^0.1.0",
     "esbuild-plugin-progress": "^1.0.1",
-    "esbuild-plugin-svgr": "^1.0.1",
+    "esbuild-plugin-svgr": "^2.0.0",
     "eslint": "^8.22.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-cypress": "^2.12.1",

src/Components/About/AboutControl.jsx

@@ -39,12 +39,7 @@ export default function AboutControl() {
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayedLocal}
       icon={
-        <AboutIcon
-          style={{
-            width: '20px',
-            height: '20px',
-          }}
-        />
+        <AboutIcon className='icon-share'/>
       }
       dialog={
         <AboutDialog
@@ -69,8 +64,8 @@ export function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
     <Dialog
       icon={
         <Box sx={{display: 'inline-flex', flexDirection: 'column', textAlign: 'center'}}>
-          <LogoB style={{width: '60px', height: '60px'}}/>
-          <Typography variant='h6' sx={{marginLeft: '-9px', marginTop: '6px'}}>bldrs.ai</Typography>
+          <LogoB/>
+          <Typography variant='h6'>bldrs.ai</Typography>
         </Box>
       }
       headerText={''}

src/Components/About/AboutDialog.fixture.jsx

@@ -1,21 +1,17 @@
 import React from 'react'
-import {HelmetProvider} from 'react-helmet-async'
-import {ThemeProvider} from '@mui/material/styles'
-import useShareTheme from '../../theme/Theme'
+import FixtureContext from '../../FixtureContext'
 import {AboutDialog} from './AboutControl'
 
 
 /** @return {React.Component} */
-export default function Example() {
+export default function AboutDialogFixture() {
   return (
-    <HelmetProvider>
-      <ThemeProvider theme={useShareTheme()}>
-        <AboutDialog
-          isDialogDisplayed={true}
-          // eslint-disable-next-line no-empty-function
-          setIsDialogDisplayed={() => {}}
-        />
-      </ThemeProvider>
-    </HelmetProvider>
+    <FixtureContext>
+      <AboutDialog
+        isDialogDisplayed={true}
+        // eslint-disable-next-line no-empty-function
+        setIsDialogDisplayed={() => {}}
+      />
+    </FixtureContext>
   )
 }

src/Components/Buttons.jsx

@@ -85,6 +85,7 @@ export function ControlButton({
         onClick={() => setIsDialogDisplayed(true)}
         icon={icon}
         selected={isDialogDisplayed}
+        className='icon-share'
       />
       {isDialogDisplayed && dialog}
     </>
@@ -102,9 +103,9 @@ export function CloseButton({onClick}) {
       title='Close'
       onClick={onClick}
       placement='bottom'
-      icon={<CloseIcon style={{width: '15px', height: '15px'}}/>}
-      size='medium'
+      icon={<CloseIcon className='icon-share icon-small'/>}
       aboutInfo={false}
+      className='closeButton'
     />
   )
 }

src/Components/CutPlaneMenu.jsx

@@ -97,7 +97,7 @@ export default function CutPlaneMenu() {
     <>
       <TooltipIconButton
         title={'Section'}
-        icon={<CutPlaneIcon/>}
+        icon={<CutPlaneIcon className='icon-share'/>}
         onClick={handleClick}
         selected={anchorEl !== null || !!cutPlanes.length}
       />

src/Components/Dialog.fixture.jsx

@@ -1,19 +1,22 @@
 import React from 'react'
+import FixtureContext from '../FixtureContext'
 import Dialog from './Dialog'
 import AttentionIcon from '../assets/icons/Attention.svg'
 
 
 export default (
-  <Dialog
-    icon={<AttentionIcon/>}
-    headerText={'Here\'s the thing!'}
-    isDialogDisplayed={true}
-    // eslint-disable-next-line no-empty-function
-    setIsDialogDisplayed={() => {}}
-    content={'What you should know about doing the thing'}
-    actionTitle={'Do do the thing?'}
-    actionCb={() => {
-      alert('You did the thing')
-    }}
-  />
+  <FixtureContext>
+    <Dialog
+      icon={<AttentionIcon className='icon-share'/>}
+      headerText={'Here\'s the thing!'}
+      isDialogDisplayed={true}
+      // eslint-disable-next-line no-empty-function
+      setIsDialogDisplayed={() => {}}
+      content={'What you should know about doing the thing'}
+      actionTitle={'Do do the thing?'}
+      actionCb={() => {
+        alert('You did the thing')
+      }}
+    />
+  </FixtureContext>
 )

src/Components/Dialog.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
 import MuiDialog from '@mui/material/Dialog'
-import Typography from '@mui/material/Typography'
 import {RectangularButton, CloseButton} from '../Components/Buttons'
 import {assertDefined} from '../utils/assert'
 
@@ -38,49 +38,15 @@ export default function Dialog({
     <MuiDialog
       open={isDialogDisplayed}
       onClose={close}
-      sx={{
-        textAlign: 'center',
-        zIndex: 1000,
-      }}
       PaperProps={{variant: 'control'}}
     >
-      <DialogContent>
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            margin: '0.5em',
-            opacity: .5,
-          }}
-        >
-          <CloseButton onClick={close}/>
-        </div>
-        <Typography
-          variant='h1'
-          sx={{
-            'margin': '1em 0',
-            'textAlign': 'center',
-            'display': 'inline-flex',
-            'alignItems': 'center',
-            'justifyContent': 'center',
-            '& svg': {
-              marginRight: '0.5em',
-            },
-          }}
-        >
-          {icon && icon} {headerText}
-        </Typography>
-        {content}
-      </DialogContent>
-      <DialogActions
-        sx={{
-          overflowY: 'hidden',
-          padding: '0em 0em 2em 0em',
-          display: 'flex',
-          justifyContent: 'center',
-        }}
-      >
+      <CloseButton onClick={close}/>
+      <DialogTitle>
+        {icon}<br/>
+        {headerText}
+      </DialogTitle>
+      <DialogContent>{content}</DialogContent>
+      <DialogActions>
         <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb}/>
       </DialogActions>
     </MuiDialog>

src/Components/HideToggleButton.jsx

@@ -5,6 +5,7 @@ import VisibilityIcon from '@mui/icons-material/Visibility'
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 import GlassesIcon from '../assets/icons/Glasses.svg'
 
+
 /**
  * @param {IfcIsolator} The IFC isoaltor
  * @param {number} IFC element id
@@ -48,10 +49,25 @@ export default function HideToggleButton({elementId}) {
   }
 
   if (isIsolated) {
-    return <GlassesIcon style={iconStyle}/>
+    return <GlassesIcon style={iconStyle} className='icon-share icon-nav-glasses'/>
   } else if (!isHidden) {
-    return <VisibilityIcon data-testid='hide-icon' style={iconStyle} onClick={toggleHide}/>
+    return (
+      <VisibilityIcon
+        onClick={toggleHide}
+        className='icon-share icon-nav-eye'
+        style={iconStyle}
+        data-testid='hide-icon'
+      />
+    )
   } else {
-    return <VisibilityOffIcon data-testid='unhide-icon' style={iconStyle} onClick={toggleHide}/>
+    return (
+      <VisibilityOffIcon
+        onClick={toggleHide}
+        className='icon-share icon-nav-eye'
+        data-testid='unhide-icon'
+        style={iconStyle}
+        fill={undefined}
+      />
+    )
   }
 }

src/Components/Loader.fixture.jsx

@@ -1,7 +1,10 @@
 import React from 'react'
+import FixtureContext from '../FixtureContext'
 import Loader from './Loader'
 
 
 export default (
-  <Loader/>
+  <FixtureContext>
+    <Loader/>
+  </FixtureContext>
 )

src/Components/LoginButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {useAuth0} from '@auth0/auth0-react'
 import {TooltipIconButton} from './Buttons'
-import GitHubIcon from '@mui/icons-material/GitHub'
+import GitHubIcon from '../assets/icons/GitHub.svg'
 
 
 const LoginButton = ({
@@ -22,7 +22,7 @@ const LoginButton = ({
   return (
     <TooltipIconButton
       title={'Log in with GitHub'}
-      icon={<GitHubIcon/>}
+      icon={<GitHubIcon className='icon-share'/>}
       onClick={onClick}
     />
   )

src/Components/Logo.jsx

@@ -19,8 +19,6 @@ export default function Logo({onClick}) {
         'bottom': '1em',
         'left': '1em',
         '& svg': {
-          'width': '50px',
-          'height': '50px',
           'marginBottom': '4px',
           'marginTop': '4px',
           '@media (max-width: 900px)': {
@@ -40,7 +38,7 @@ export default function Logo({onClick}) {
     >
       <TooltipIconButton
         title={`Bldrs: ${PkgJson.version}`}
-        placement="right"
+        placement='right'
         icon={<LogoIcon/>}
         onClick={onClick}
         aboutInfo={false}

src/Components/NavPanel.jsx

@@ -1,19 +1,20 @@
 import React from 'react'
+import AccountTreeIcon from '@mui/icons-material/AccountTree'
+import ListIcon from '@mui/icons-material/List'
 import Paper from '@mui/material/Paper'
+import ToggleButton from '@mui/material/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import Tooltip from '@mui/material/Tooltip'
 import TreeView from '@mui/lab/TreeView'
+import {styled} from '@mui/material/styles'
 import NavTree from './NavTree'
 import TypesNavTree from './TypesNavTree'
 import useStore from '../store/useStore'
 import {assertDefined} from '../utils/assert'
+import {useExistInFeature} from '../hooks/useExistInFeature'
 import NodeClosedIcon from '../assets/icons/NodeClosed.svg'
 import NodeOpenIcon from '../assets/icons/NodeOpened.svg'
-import AccountTreeIcon from '@mui/icons-material/AccountTree'
-import ListIcon from '@mui/icons-material/List'
-import ToggleButton from '@mui/material/ToggleButton'
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
-import Tooltip from '@mui/material/Tooltip'
-import {styled} from '@mui/material/styles'
-import {useExistInFeature} from '../hooks/useExistInFeature'
+
 
 /**
  * @param {object} model
@@ -147,8 +148,8 @@ export default function NavPanel({
           </StyledToggleButtonGroup>}
           <TreeView
             aria-label={isNavTree ? 'IFC Navigator' : 'IFC Types Navigator'}
-            defaultCollapseIcon={<NodeOpenIcon className='caretToggle'/>}
-            defaultExpandIcon={<NodeClosedIcon className='caretToggle'/>}
+            defaultCollapseIcon={<NodeOpenIcon className='icon-share icon-nav-caret'/>}
+            defaultExpandIcon={<NodeClosedIcon className='icon-share icon-nav-caret'/>}
             defaultExpanded={isNavTree ? defaultExpandedElements : defaultExpandedTypes}
             expanded={isNavTree ? expandedElements : expandedTypes}
             selected={selectedElements}