Extract WorkspaceDialog styles and push styling up to settings

src/components/ChangeThemeDialog.js

@@ -1,37 +1,19 @@
 import { Component } from 'react';
 import {
-  Dialog,
   DialogTitle,
   ListItemIcon,
   ListItemText,
   MenuList,
   MenuItem,
-  Typography,
   DialogContent,
 } from '@mui/material';
 import PaletteIcon from '@mui/icons-material/PaletteSharp';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import { WorkspaceDialog } from './WorkspaceDialog';
 
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  '& .dark': {
-    color: '#000000',
-  },
-  '& .dialogContent': {
-    padding: 0,
-  },
-  '& .light': {
-    color: '#BDBDBD',
-  },
-  '& .listitem': {
-    '&:focus': {
-      backgroundColor: theme.palette.action.focus,
-    },
-    '&:hover': {
-      backgroundColor: theme.palette.action.hover,
-    },
-    cursor: 'pointer',
-  },
+const ThemeIcon = styled(PaletteIcon, { name: 'ThemeIcon', slot: 'icon' })(({ theme }) => ({
+  color: '#BDBDBD',
 }));
 
 /**
@@ -65,11 +47,11 @@ export class ChangeThemeDialog extends Component {
       themeIds,
     } = this.props;
     return (
-      <StyledDialog onClose={handleClose} open={open}>
+      <WorkspaceDialog onClose={handleClose} open={open} variant="menu">
         <DialogTitle>
-          <Typography variant="h2">{t('changeTheme')}</Typography>
+          {t('changeTheme')}
         </DialogTitle>
-        <DialogContent className="dialogContent">
+        <DialogContent>
           <MenuList autoFocusItem>
             {themeIds.map((value) => (
               <MenuItem
@@ -80,14 +62,14 @@ export class ChangeThemeDialog extends Component {
                 value={value}
               >
                 <ListItemIcon>
-                  <PaletteIcon sx={{ color: value === 'dark' ? '#000000' : '#BDBDBD' }} />
+                  <ThemeIcon ownerState={{ value }} />
                 </ListItemIcon>
                 <ListItemText>{t(value)}</ListItemText>
               </MenuItem>
             ))}
           </MenuList>
         </DialogContent>
-      </StyledDialog>
+      </WorkspaceDialog>
     );
   }
 }

src/components/WorkspaceDialog.js

@@ -0,0 +1,13 @@
+import {
+  Dialog,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const WorkspaceDialog = styled(Dialog, { name: 'WorkspaceDialog', slot: 'root' })(({ theme, variant }) => ({
+  '& .MuiDialogTitle-root': theme.unstable_sx({ typography: 'h2' }),
+  ...(variant === 'menu' && {
+    '& .MuiDialogContent-root': {
+      padding: 0,
+    },
+  }),
+}));

src/components/WorkspaceExport.js

@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -14,6 +13,7 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { WorkspaceDialog } from './WorkspaceDialog';
 
 /**
  */
@@ -79,7 +79,7 @@ export class WorkspaceExport extends Component {
     }
 
     return (
-      <Dialog
+      <WorkspaceDialog
         id="workspace-export"
         container={container}
         open={open}
@@ -88,7 +88,7 @@ export class WorkspaceExport extends Component {
         fullWidth
         maxWidth="sm"
       >
-        <DialogTitle sx={{ typography: 'h2' }} id="form-dialog-title">
+        <DialogTitle id="form-dialog-title">
           {t('downloadExport')}
         </DialogTitle>
 
@@ -118,7 +118,7 @@ export class WorkspaceExport extends Component {
             <Button variant="contained" color="primary">{t('copy')}</Button>
           </CopyToClipboard>
         </DialogActions>
-      </Dialog>
+      </WorkspaceDialog>
     );
   }
 }

src/components/WorkspaceImport.js

@@ -1,12 +1,12 @@
 import { Component } from 'react';
-import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import PropTypes from 'prop-types';
 import {
   DialogActions,
   TextField,
 } from '@mui/material';
 import Button from '@mui/material/Button';
+import { WorkspaceDialog } from './WorkspaceDialog';
 import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
 
 /**
@@ -64,15 +64,15 @@ export class WorkspaceImport extends Component {
     } = this.props;
 
     return (
-      <Dialog
+      <WorkspaceDialog
         aria-labelledby="workspace-import-title"
         id="workspace-import"
         onClose={handleClose}
         open={open}
         fullWidth
         maxWidth="sm"
       >
-        <DialogTitle sx={{ typography: 'h2' }} id="workspace-import-title">
+        <DialogTitle id="workspace-import-title">
           {t('importWorkspace')}
         </DialogTitle>
         <ScrollIndicatedDialogContent>
@@ -99,7 +99,7 @@ export class WorkspaceImport extends Component {
             {t('import')}
           </Button>
         </DialogActions>
-      </Dialog>
+      </WorkspaceDialog>
     );
   }
 }

src/components/WorkspaceSelectionDialog.js

@@ -1,5 +1,4 @@
 import { Component } from 'react';
-import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import {
   Card,
@@ -10,6 +9,7 @@ import {
 } from '@mui/material';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import { WorkspaceDialog } from './WorkspaceDialog';
 import WorkspaceTypeElasticIcon from './icons/WorkspaceTypeElasticIcon';
 import WorkspaceTypeMosaicIcon from './icons/WorkspaceTypeMosaicIcon';
 import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
@@ -50,14 +50,14 @@ export class WorkspaceSelectionDialog extends Component {
       container, handleClose, open, children, t, workspaceType,
     } = this.props;
     return (
-      <Dialog
+      <WorkspaceDialog
         aria-labelledby="workspace-selection-dialog-title"
         container={container}
         id="workspace-selection-dialog"
         onClose={handleClose}
         open={open}
       >
-        <DialogTitle sx={{ typography: 'h2' }} id="workspace-selection-dialog-title">
+        <DialogTitle id="workspace-selection-dialog-title">
           {t('workspaceSelectionTitle')}
         </DialogTitle>
         <ScrollIndicatedDialogContent>
@@ -167,7 +167,7 @@ export class WorkspaceSelectionDialog extends Component {
             </MenuItem>
           </MenuList>
         </ScrollIndicatedDialogContent>
-      </Dialog>
+      </WorkspaceDialog>
     );
   }
 }

src/config/settings.js

@@ -226,6 +226,13 @@ export default {
           })
         }
       },
+      ThemeIcon: {
+        styleOverrides: {
+          icon: ({ ownerState }) => ({
+            color: (ownerState?.value === 'dark' ? '#000000' : undefined)
+          }),
+        },
+      },
       MuiAccordion: {
         variants: [
           {