Merge pull request #3849 from ProjectMirador/mui5-window-sidebar

Pull window sidebar styles up

src/components/WindowCanvasNavigationControls.js

 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { alpha } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
@@ -13,6 +13,21 @@ import ViewerNavigation from '../containers/ViewerNavigation';
 import ns from '../config/css-ns';
 import { PluginHook } from './PluginHook';
 
+const Root = styled(Paper, { name: 'WindowCanvasNavigationControls', slot: 'root' })(({ theme }) => ({
+  alignItems: 'center',
+  backgroundColor: alpha(theme.palette.background.paper, 0.5),
+  bottom: 0,
+  cursor: 'default',
+  display: 'flex',
+  flexDirection: 'column',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  position: 'absolute',
+  textAlign: 'center',
+  width: '100%',
+  zIndex: 50,
+}));
+
 /**
  * Represents the viewer controls in the mirador workspace.
  */
@@ -35,22 +50,8 @@ export class WindowCanvasNavigationControls extends Component {
     if (!visible) return (<Typography style={visuallyHidden} component="div"><ViewerInfo windowId={windowId} /></Typography>);
 
     return (
-      <Paper
+      <Root
         square
-        sx={(theme) => ({
-          alignItems: 'center',
-          backgroundColor: alpha(theme.palette.background.paper, 0.5),
-          bottom: 0,
-          cursor: 'default',
-          display: 'flex',
-          flexDirection: 'column',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          position: 'absolute',
-          textAlign: 'center',
-          width: '100%',
-          zIndex: 50,
-        })}
         className={
           classNames(
             ns('canvas-nav'),
@@ -70,7 +71,7 @@ export class WindowCanvasNavigationControls extends Component {
         <ViewerInfo windowId={windowId} />
 
         <PluginHook {...this.props} />
-      </Paper>
+      </Root>
     );
   }
 }

src/components/WindowSideBar.js

 import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import Drawer from '@mui/material/Drawer';
 import WindowSideBarButtons from '../containers/WindowSideBarButtons';
 
+const Root = styled(Drawer, { name: 'WindowSideBar', slot: 'root' })(({ theme }) => ({
+  flexShrink: 0,
+  height: '100%',
+  order: -1000,
+  zIndex: theme.zIndex.appBar - 1,
+}));
+
 /**
  * WindowSideBar
  */
@@ -17,15 +25,9 @@ export class WindowSideBar extends Component {
     } = this.props;
 
     return (
-      <Drawer
+      <Root
         variant="persistent"
         className={classes.drawer}
-        sx={theme => ({
-          flexShrink: 0,
-          height: '100%',
-          order: -1000,
-          zIndex: theme.zIndex.appBar - 1,
-        })}
         anchor={direction === 'rtl' ? 'right' : 'left'}
         PaperProps={{
           'aria-label': t('sidebarPanelsNavigation'),
@@ -44,7 +46,7 @@ export class WindowSideBar extends Component {
         open={sideBarOpen}
       >
         <WindowSideBarButtons windowId={windowId} />
-      </Drawer>
+      </Root>
     );
   }
 }

src/components/WindowSideBarButtons.js

 import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import Badge from '@mui/material/Badge';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
@@ -11,27 +12,29 @@ import LayersIcon from '@mui/icons-material/LayersSharp';
 import SearchIcon from '@mui/icons-material/SearchSharp';
 import CanvasIndexIcon from './icons/CanvasIndexIcon';
 
-/** */
-function TabButton({ t, value, ...tabProps }) {
-  return (
-    <Tooltip title={t('openCompanionWindow', { context: value })}>
-      <Tab
-        {...tabProps}
-        value={value}
-        sx={{
+const Root = styled(Tabs, { name: 'WindowSideBarButtons', slot: 'root' })({
+  '& .MuiTabs-flexContainer': {
+    flexDirection: 'column',
+  },
+  '&.MuiTabs-indicator': {
+    display: 'none',
+  },
+});
+
+const StyledTabButton = styled(Tab, { name: 'WindowSideBarButtons', slot: 'button' })(({ theme }) => ({
   '&.Mui-selected': {
     borderRight: '2px solid',
-            borderRightColor: 'primary.main',
+    borderRightColor: theme.palette.primary.main,
   },
   '&.MuiTab-root': {
     '&:active': {
-              backgroundColor: 'action.active',
+      backgroundColor: theme.palette.action.active,
     },
     '&:focus': {
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
-              backgroundColor: 'action.hover',
+      backgroundColor: theme.palette.action.hover,
       textDecoration: 'none',
       // Reset on touch devices, it doesn't add specificity
     },
@@ -39,7 +42,7 @@ function TabButton({ t, value, ...tabProps }) {
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
-              backgroundColor: 'action.hover',
+      backgroundColor: theme.palette.action.hover,
       textDecoration: 'none',
       // Reset on touch devices, it doesn't add specificity
     },
@@ -47,7 +50,15 @@ function TabButton({ t, value, ...tabProps }) {
     minWidth: 'auto',
   },
   fill: 'currentcolor',
-        }}
+}));
+
+/** */
+function TabButton({ t, value, ...tabProps }) {
+  return (
+    <Tooltip title={t('openCompanionWindow', { context: value })}>
+      <StyledTabButton
+        {...tabProps}
+        value={value}
         aria-label={
           t('openCompanionWindow', { context: value })
         }
@@ -102,15 +113,7 @@ export class WindowSideBarButtons extends Component {
     } = this.props;
 
     return (
-      <Tabs
-        sx={{
-          '& .MuiTabs-flexContainer': {
-            flexDirection: 'column',
-          },
-          '&.MuiTabs-indicator': {
-            display: 'none',
-          },
-        }}
+      <Root
         value={sideBarPanel === 'closed' ? false : sideBarPanel}
         onChange={this.handleChange}
         variant="fullWidth"
@@ -190,7 +193,7 @@ export class WindowSideBarButtons extends Component {
               icon={<PluginComponent />}
             />
           ))}
-      </Tabs>
+      </Root>
     );
   }
 }