Fix sx backgroundcolor strings

ProjectMirador · Sep 21, 2023 · c47e70c · c47e70c
1 parent 788ea70
commit c47e70c
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 54 deletions.
diff --git a/src/components/CanvasLayers.js b/src/components/CanvasLayers.js
@@ -247,7 +247,7 @@ export class CanvasLayers extends Component {
                 '&:hover': {
                   backgroundColor: snapshot.isDragging ? 'action.selected' : 'action.hover',
                 },
-                backgroundColor: snapshot.isDragging ? 'action.selected' : 'shades?.light',
+                backgroundColor: snapshot.isDragging ? 'action.selected' : 'shades.light',
               }}
             >
               <Tooltip title={t('layer_move')}>

diff --git a/src/components/MinimalWindow.js b/src/components/MinimalWindow.js
@@ -38,7 +38,7 @@ export class MinimalWindow extends Component {
           cn(ns('placeholder-window'))
         }
         sx={{
-          backgroundColor: 'shades?.dark',
+          backgroundColor: 'shades.dark',
           borderRadius: 0,
           display: 'flex',
           flexDirection: 'column',
@@ -54,7 +54,7 @@ export class MinimalWindow extends Component {
             disableGutters
             className={cn(ns('window-top-bar'))}
             sx={{
-              backgroundColor: 'shades?.main',
+              backgroundColor: 'shades.main',
               borderTop: '2px solid transparent',
               minHeight: 32,
               paddingLeft: 0.5,

diff --git a/src/components/SearchHit.js b/src/components/SearchHit.js
@@ -129,7 +129,7 @@ export class SearchHit extends Component {
                 label={index + 1}
                 sx={{
                   // eslint-disable-next-line no-nested-ternary
-                  backgroundColor: windowSelected ? 'highlights?.primary' : adjacent ? 'highlights?.secondary' : 'hitCounter?.default',
+                  backgroundColor: windowSelected ? 'highlights.primary' : adjacent ? 'highlights.secondary' : 'hitCounter.default',
                   height: 30,
                   marginRight: 1,
                   typography: 'subtitle2',

diff --git a/src/components/WindowListButton.js b/src/components/WindowListButton.js
@@ -5,10 +5,8 @@ import { styled } from '@mui/material/styles';
 import WindowList from '../containers/WindowList';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
-const StyledButton = styled(MiradorMenuButton)(({ theme }) => ({
-  margin: theme.spacing(1),
-  paddingLeft: 1.5,
-}));
+const StyledMiradorMenuButton = styled(MiradorMenuButton)({
+});
 
 /**
  * WindowListButton ~
@@ -44,11 +42,12 @@ export class WindowListButton extends Component {
 
     return (
       <>
-        <StyledButton
+        <StyledMiradorMenuButton
           aria-haspopup="true"
           aria-label={t('listAllOpenWindows')}
           aria-owns={windowListAnchor ? 'window-list' : null}
           sx={{
+            margin: 1,
             ...(windowListAnchor && {
               backgroundColor: 'action.selected',
             }),
@@ -59,7 +58,7 @@ export class WindowListButton extends Component {
           onClick={(e) => this.handleOpen(e)}
         >
           <BookmarksIcon />
-        </StyledButton>
+        </StyledMiradorMenuButton>
 
         {Boolean(windowListAnchor) && (
         <WindowList

diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
@@ -25,21 +25,21 @@ function TabButton({ t, value, ...tabProps }) {
           },
           '&.MuiTab-root': {
             '&:active': {
-              backgroundColor: 'action?.active',
+              backgroundColor: 'action.active',
             },
             '&:focus': {
               '@media (hover: none)': {
                 backgroundColor: 'transparent',
               },
-              backgroundColor: 'action?.hover',
+              backgroundColor: 'action.hover',
               textDecoration: 'none',
               // Reset on touch devices, it doesn't add specificity
             },
             '&:hover': {
               '@media (hover: none)': {
                 backgroundColor: 'transparent',
               },
-              backgroundColor: 'action?.hover',
+              backgroundColor: 'action.hover',
               textDecoration: 'none',
               // Reset on touch devices, it doesn't add specificity
             },
@@ -149,7 +149,7 @@ export class WindowSideBarButtons extends Component {
             onKeyUp={this.handleKeyUp}
             t={t}
             icon={(
-              <Badge overlap="rectangular" sx={{ backgroundColor: 'notification?.main' }} invisible={!hasAnnotations} variant="dot">
+              <Badge overlap="rectangular" sx={{ backgroundColor: 'notification.main' }} invisible={!hasAnnotations} variant="dot">
                 <AnnotationIcon />
               </Badge>
             )}
@@ -161,7 +161,7 @@ export class WindowSideBarButtons extends Component {
             onKeyUp={this.handleKeyUp}
             t={t}
             icon={(
-              <Badge overlap="rectangular" sx={{ backgroundColor: 'notification?.main' }} invisible={!hasSearchResults} variant="dot">
+              <Badge overlap="rectangular" sx={{ backgroundColor: 'notification.main' }} invisible={!hasSearchResults} variant="dot">
                 <SearchIcon />
               </Badge>
             )}
@@ -173,7 +173,7 @@ export class WindowSideBarButtons extends Component {
             onKeyUp={this.handleKeyUp}
             t={t}
             icon={(
-              <Badge overlap="rectangular" sx={{ backgroundColor: 'notification?.main' }} invisible={!hasCurrentLayers} variant="dot">
+              <Badge overlap="rectangular" sx={{ backgroundColor: 'notification.main' }} invisible={!hasCurrentLayers} variant="dot">
                 <LayersIcon />
               </Badge>
             )}

diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
@@ -37,13 +37,15 @@ export class WindowTopBar extends Component {
             disableGutters
             onMouseDown={focusWindow}
             sx={{
-              backgroundColor: 'shades?.main',
+              backgroundColor: 'shades.main',
               borderTop: '2px solid ',
               borderTopColor: focused ? 'primary.main' : 'transparent',
-              cursor: windowDraggable ? 'move' : null,
               minHeight: 32,
               paddingLeft: 0.5,
               paddingRight: 0.5,
+              ...(windowDraggable && {
+                cursor: 'move',
+              }),
             }}
             className={classNames(ns('window-top-bar'))}
             variant="dense"

diff --git a/src/components/WindowTopBarPluginMenu.js b/src/components/WindowTopBarPluginMenu.js
@@ -6,9 +6,8 @@ import Menu from '@mui/material/Menu';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import { PluginHook } from './PluginHook';
 
-const StyledButton = styled(MiradorMenuButton)(({ theme }) => ({
-  margin: theme.spacing(1),
-}));
+const StyledMiradorMenuButton = styled(MiradorMenuButton)({
+});
 /**
  *
  */
@@ -59,19 +58,20 @@ export class WindowTopBarPluginMenu extends Component {
 
     return (
       <>
-        <StyledButton
+        <StyledMiradorMenuButton
           aria-haspopup="true"
           aria-label={t('windowPluginMenu')}
           aria-owns={open ? windowPluginMenuId : undefined}
           sx={{
+            margin: 1,
             ...(open && {
               backgroundColor: 'action.selected',
             }),
           }}
           onClick={this.handleMenuClick}
         >
           {menuIcon}
-        </StyledButton>
+        </StyledMiradorMenuButton>
 
         <Menu
           id={windowPluginMenuId}

diff --git a/src/components/WindowTopBarTitle.js b/src/components/WindowTopBarTitle.js
@@ -5,13 +5,13 @@ import Typography from '@mui/material/Typography';
 import Skeleton from '@mui/material/Skeleton';
 import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp';
 
-const TitleTypographyStyle = styled(TitleTypography)(({ theme }) => ({
+const StyledTitleTypography = styled(TitleTypography)(({ theme }) => ({
   ...theme.typography.h6,
   flexGrow: 1,
   paddingLeft: theme.spacing(0.5),
 }));
 
-const TitleStyle = styled('div')(({ theme }) => ({
+const StyledTitle = styled('div')(({ theme }) => ({
   ...theme.typography.h6,
   flexGrow: 1,
   paddingLeft: theme.spacing(0.5),
@@ -45,26 +45,26 @@ export class WindowTopBarTitle extends Component {
     let title = null;
     if (isFetching) {
       title = (
-        <TitleTypographyStyle>
+        <StyledTitleTypography>
           <Skeleton variant="text" />
-        </TitleTypographyStyle>
+        </StyledTitleTypography>
       );
     } else if (error) {
       title = (
         <>
           <ErrorIcon color="error" />
-          <TitleTypographyStyle color="textSecondary">
+          <StyledTitleTypography color="textSecondary">
             {error}
-          </TitleTypographyStyle>
+          </StyledTitleTypography>
         </>
       );
     } else if (hideWindowTitle) {
-      title = (<TitleStyle />);
+      title = (<StyledTitle />);
     } else {
       title = (
-        <TitleTypographyStyle>
+        <StyledTitleTypography>
           {manifestTitle}
-        </TitleTypographyStyle>
+        </StyledTitleTypography>
       );
     }
     return title;

diff --git a/src/components/WindowTopMenuButton.js b/src/components/WindowTopMenuButton.js
@@ -5,9 +5,8 @@ import WindowTopMenu from '../containers/WindowTopMenu';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import WindowOptionsIcon from './icons/WindowOptionsIcon';
 
-const StyledButton = styled(MiradorMenuButton)(({ theme }) => ({
-  margin: theme.spacing(1),
-}));
+const StyledMiradorMenuButton = styled(MiradorMenuButton)({
+});
 /**
  */
 export class WindowTopMenuButton extends Component {
@@ -56,19 +55,20 @@ export class WindowTopMenuButton extends Component {
     const menuId = `window-menu_${windowId}`;
     return (
       <>
-        <StyledButton
+        <StyledMiradorMenuButton
           aria-haspopup="true"
           aria-label={t('windowMenu')}
           aria-owns={open ? menuId : undefined}
           sx={{
+            margin: 1,
             ...(open && {
               backgroundColor: 'action.selected',
             }),
           }}
           onClick={this.handleMenuClick}
         >
           <WindowOptionsIcon />
-        </StyledButton>
+        </StyledMiradorMenuButton>
         <WindowTopMenu
           windowId={windowId}
           anchorEl={anchorEl}

diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js
@@ -52,7 +52,9 @@ export class WorkspaceControlPanel extends Component {
             right: 'auto',
             width: variant === 'wide' ? 'auto' : 64,
           },
-          width: variant === 'wide' ? 'auto' : null,
+          ...(variant === 'wide' && {
+            width: 'auto',
+          }),
         })}
         className={classNames(ns('workspace-control-panel'))}
         color="default"

diff --git a/src/components/WorkspaceControlPanelButtons.js b/src/components/WorkspaceControlPanelButtons.js
@@ -6,9 +6,8 @@ import WorkspaceOptionsButton from '../containers/WorkspaceOptionsButton';
 import WindowListButton from '../containers/WindowListButton';
 import { PluginHook } from './PluginHook';
 
-const StyledFullScreenButton = styled(FullScreenButton)(({ theme }) => ({
-  margin: theme.spacing(1),
-}));
+const StyledFullScreenButton = styled(FullScreenButton)({
+});
 
 /**
  *
@@ -25,7 +24,7 @@ export class WorkspaceControlPanelButtons extends Component {
         <WindowListButton />
         <WorkspaceMenuButton />
         <WorkspaceOptionsButton />
-        <StyledFullScreenButton />
+        <StyledFullScreenButton sx={{ margin: 1 }} />
         <PluginHook {...this.props} />
       </>
     );

diff --git a/src/components/WorkspaceMenuButton.js b/src/components/WorkspaceMenuButton.js
@@ -5,9 +5,8 @@ import PropTypes from 'prop-types';
 import WorkspaceMenu from '../containers/WorkspaceMenu';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
-const StyledButton = styled(MiradorMenuButton)(({ theme }) => ({
-  margin: theme.spacing(1),
-}));
+const StyledMiradorMenuButton = styled(MiradorMenuButton)({
+});
 /**
  */
 export class WorkspaceMenuButton extends Component {
@@ -54,11 +53,12 @@ export class WorkspaceMenuButton extends Component {
 
     return (
       <>
-        <StyledButton
+        <StyledMiradorMenuButton
           aria-haspopup="true"
           aria-label={t('workspaceMenu')}
           aria-owns={open ? 'workspace-menu' : undefined}
           sx={{
+            margin: 1,
             ...(open && {
               backgroundColor: 'action.selected',
             }),
@@ -67,7 +67,7 @@ export class WorkspaceMenuButton extends Component {
           onClick={this.handleMenuClick}
         >
           <SettingsIcon />
-        </StyledButton>
+        </StyledMiradorMenuButton>
         <WorkspaceMenu
           anchorEl={anchorEl}
           id="workspace-menu"

diff --git a/src/components/WorkspaceOptionsButton.js b/src/components/WorkspaceOptionsButton.js
@@ -5,9 +5,8 @@ import MoreHorizontalIcon from '@mui/icons-material/MoreHorizSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import WorkspaceOptionsMenu from '../containers/WorkspaceOptionsMenu';
 
-const StyledButton = styled(MiradorMenuButton)(({ theme }) => ({
-  margin: theme.spacing(1),
-}));
+const StyledMiradorMenuButton = styled(MiradorMenuButton)({
+});
 
 /**
  * WorkspaceOptionsButton ~
@@ -55,17 +54,18 @@ export class WorkspaceOptionsButton extends Component {
 
     return (
       <>
-        <StyledButton
+        <StyledMiradorMenuButton
           aria-label={t('workspaceOptions')}
           onClick={this.handleMenuClick}
           sx={{
+            margin: 1,
             ...(open && {
               backgroundColor: 'action.selected',
             }),
           }}
         >
           <MoreHorizontalIcon />
-        </StyledButton>
+        </StyledMiradorMenuButton>
         <WorkspaceOptionsMenu
           anchorEl={anchorEl}
           handleClose={this.handleMenuClose}

diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js
@@ -7,11 +7,11 @@ import Box from '@mui/material/Box';
 import RestoreZoomIcon from './icons/RestoreZoomIcon';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
-const ZoomControlsWrapper = styled('div')(({ theme }) => ({
+const ZoomControlsWrapper = styled('div')({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'center',
-}));
+});
 
 const dividerStyle = {
   borderRight: '1px solid #808080',