Adjust naming for styled/sx components

ProjectMirador · Sep 26, 2023 · 6fa7934 · 6fa7934
1 parent 4b2aab6
commit 6fa7934
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 53 deletions.
diff --git a/src/components/AudioViewer.js b/src/components/AudioViewer.js
@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 
-const Container = styled('div')({
+const StyledContainer = styled('div')({
   alignItems: 'center',
   display: 'flex',
   width: '100%',
@@ -21,7 +21,7 @@ export function AudioViewer(props) {
   } = props;
 
   return (
-    <Container>
+    <StyledContainer>
       <StyledAudio {...audioOptions}>
         {audioResources.map((audio) => (
           <Fragment key={audio.id}>
@@ -34,7 +34,7 @@ export function AudioViewer(props) {
           </Fragment>
         ))}
       </StyledAudio>
-    </Container>
+    </StyledContainer>
   );
 }
 /* eslint-enable jsx-a11y/media-has-caption */

diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js
@@ -6,7 +6,7 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDownSharp';
 import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUpSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
-const Container = styled('div')(() => ({
+const StyledContainer = styled('div')(() => ({
   cursor: 'pointer', // This style will be applied to Typography
   display: 'flex',
   justifyContent: 'space-between',
@@ -42,7 +42,7 @@ export class CollapsibleSection extends Component {
 
     return (
       <>
-        <Container sx={{ padding: 0 }}>
+        <StyledContainer sx={{ padding: 0 }}>
           <Typography
             sx={{ cursor: 'pointer' }}
             id={id}
@@ -60,7 +60,7 @@ export class CollapsibleSection extends Component {
           >
             {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
           </MiradorMenuButton>
-        </Container>
+        </StyledContainer>
         {open && children}
       </>
     );

diff --git a/src/components/GalleryViewThumbnail.js b/src/components/GalleryViewThumbnail.js
@@ -12,7 +12,7 @@ import IIIFThumbnail from '../containers/IIIFThumbnail';
 const StyledGalleryViewItem = styled('div')({
 });
 
-const ChipsContainer = styled('div')(() => ({
+const StyledChipsContainer = styled('div')(() => ({
   opacity: 0.875,
   position: 'absolute',
   right: 0,
@@ -158,7 +158,7 @@ export class GalleryViewThumbnail extends Component {
               maxWidth: `${() => Math.ceil(config.height * miradorCanvas.aspectRatio)}px`,
             }}
           >
-            <ChipsContainer>
+            <StyledChipsContainer>
               {searchAnnotationsCount > 0 && (
                 <Chip
                   avatar={(
@@ -205,7 +205,7 @@ export class GalleryViewThumbnail extends Component {
                   size="small"
                 />
               )}
-            </ChipsContainer>
+            </StyledChipsContainer>
           </IIIFThumbnail>
         </StyledGalleryViewItem>
       </InView>

diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js
@@ -1,23 +1,9 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 
-/**
-   */
-const inputStyle = (theme) => ({
-  ...theme.typography.body1,
-});
-
-const StyledGrid = styled(Grid)(({ theme }) => ({
-  textAlign: 'right',
-  [theme.breakpoints.up('sm')]: {
-    textAlign: 'inherit',
-  },
-}));
-
 /**
  * Provides a form for user input of a manifest url
  * @prop {Function} fetchManifest
@@ -105,11 +91,19 @@ export class ManifestForm extends Component {
                 shrink: true,
               }}
               InputProps={{
-                style: inputStyle,
+                style: { typography: 'body1' },
               }}
             />
           </Grid>
-          <StyledGrid item xs={12} sm={4} md={3}>
+          <Grid
+            item
+            xs={12}
+            sm={4}
+            md={3}
+            sx={{
+              textAlign: { sm: 'inherit', xs: 'right' },
+            }}
+          >
             { onCancel && (
               <Button onClick={this.handleCancel}>
                 {t('cancel')}
@@ -118,7 +112,7 @@ export class ManifestForm extends Component {
             <Button id="fetchBtn" type="submit" variant="contained" color="primary">
               {t('fetchManifest')}
             </Button>
-          </StyledGrid>
+          </Grid>
         </Grid>
       </form>
     );

diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js
@@ -16,7 +16,7 @@ GalleryView.displayName = 'GalleryView';
 SelectCollection.displayName = 'SelectCollection';
 WindowViewer.displayName = 'WindowViewer';
 
-const PrimaryWindowContainer = styled('div')(() => ({
+const StyledPrimaryWindowContainer = styled('div')(() => ({
   display: 'flex',
   flex: 1,
   position: 'relative',
@@ -83,14 +83,14 @@ export class PrimaryWindow extends Component {
       isCollectionDialogVisible, windowId, children,
     } = this.props;
     return (
-      <PrimaryWindowContainer data-testid="test-window" className={ns('primary-window')}>
+      <StyledPrimaryWindowContainer data-testid="test-window" className={ns('primary-window')}>
         <WindowSideBar windowId={windowId} />
         <CompanionArea windowId={windowId} position="left" />
         { isCollectionDialogVisible && <CollectionDialog windowId={windowId} /> }
         <Suspense fallback={<div />}>
           {children || this.renderViewer()}
         </Suspense>
-      </PrimaryWindowContainer>
+      </StyledPrimaryWindowContainer>
     );
   }
 }

diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
@@ -2,13 +2,13 @@ import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 
-const Container = styled('div')(() => ({
+const StyledContainer = styled('div')(() => ({
   alignItems: 'center',
   display: 'flex',
   width: '100%',
 }));
 
-const Video = styled('video')(() => ({
+const StyledVideo = styled('video')(() => ({
   maxHeight: '100%',
   width: '100%',
 }));
@@ -22,8 +22,8 @@ export class VideoViewer extends Component {
       captions, videoOptions, videoResources,
     } = this.props;
     return (
-      <Container>
-        <Video {...videoOptions}>
+      <StyledContainer>
+        <StyledVideo {...videoOptions}>
           {videoResources.map(video => (
             <Fragment key={video.id}>
               <source src={video.id} type={video.getFormat()} />
@@ -34,8 +34,8 @@ export class VideoViewer extends Component {
               <track src={caption.id} label={caption.getDefaultLabel()} srcLang={caption.getProperty('language')} />
             </Fragment>
           ))}
-        </Video>
-      </Container>
+        </StyledVideo>
+      </StyledContainer>
     );
   }
   /* eslint-enable jsx-a11y/media-has-caption */

diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
@@ -160,7 +160,7 @@ export class WorkspaceAdd extends Component {
 
           <Drawer
             sx={theme => ({
-              '&.MuiDrawer-paper': {
+              '.MuiDrawer-paper': {
                 borderTop: '0',
                 left: '0',
                 [theme.breakpoints.up('sm')]: {
@@ -181,19 +181,15 @@ export class WorkspaceAdd extends Component {
             }}
           >
             <Paper
-              sx={theme => ({
+              sx={{
                 left: '0',
-                marginTop: 48,
-                paddingBottom: theme.spacing(2),
-                paddingLeft: theme.spacing(2),
-                paddingRight: theme.spacing(2),
-                [theme.breakpoints.up('sm')]: {
-                  paddingLeft: theme.spacing(3),
-                  paddingRight: theme.spacing(3),
-                },
-                paddingTop: theme.spacing(2),
+                marginTop: 6,
+                paddingBottom: 2,
+                paddingLeft: { sm: 3, xs: 2 },
+                paddingRight: { sm: 3, xs: 2 },
+                paddingTop: 2,
                 right: '0',
-              })}
+              }}
             >
               <AppBar position="absolute" color="primary" enableColorOnDark onClick={() => (this.setAddResourcesVisibility(false))}>
                 <Toolbar variant="dense">

diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js
@@ -9,7 +9,7 @@ import WorkspaceControlPanelButtons from '../containers/WorkspaceControlPanelBut
 import Branding from '../containers/Branding';
 import ns from '../config/css-ns';
 
-const WorkspaceButtons = styled('div')(({ theme }) => ({
+const StyledWorkspaceButtons = styled('div')(({ theme }) => ({
   [theme.breakpoints.up('sm')]: {
     display: 'flex',
     flexDirection: 'column',
@@ -76,9 +76,9 @@ export class WorkspaceControlPanel extends Component {
           })}
         >
           <WorkspaceAddButton />
-          <WorkspaceButtons>
+          <StyledWorkspaceButtons>
             <WorkspaceControlPanelButtons />
-          </WorkspaceButtons>
+          </StyledWorkspaceButtons>
         </Toolbar>
         <StyledBranding t={t} variant={variant} />
       </AppBar>

diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js
@@ -7,7 +7,7 @@ import Box from '@mui/material/Box';
 import RestoreZoomIcon from './icons/RestoreZoomIcon';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
-const ZoomControlsWrapper = styled('div')({
+const StyledZoomControlsWrapper = styled('div')({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'center',
@@ -71,7 +71,7 @@ export class ZoomControls extends Component {
       );
     }
     return (
-      <ZoomControlsWrapper>
+      <StyledZoomControlsWrapper>
         <MiradorMenuButton aria-label={t('zoomIn')} onClick={this.handleZoomInClick}>
           <AddCircleIcon />
         </MiradorMenuButton>
@@ -82,7 +82,7 @@ export class ZoomControls extends Component {
           <RestoreZoomIcon />
         </MiradorMenuButton>
         {displayDivider && <Box component="span" sx={dividerStyle} />}
-      </ZoomControlsWrapper>
+      </StyledZoomControlsWrapper>
     );
   }
 }