Upgrade to Material UI v6

MiczFlor · Dec 30, 2024 · 1729bed · 1729bed
1 parent d845bd3
commit 1729bed
Show file tree

Hide file tree

Showing 22 changed files with 451 additions and 337 deletions.
diff --git a/src/webapp/package-lock.json b/src/webapp/package-lock.json
diff --git a/src/webapp/package.json b/src/webapp/package.json
@@ -5,9 +5,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/material": "^5.14.17",
-    "@mui/styles": "^5.14.17",
+    "@mui/icons-material": "^6.3.0",
+    "@mui/material": "^6.3.0",
+    "@mui/styles": "^6.3.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.5.1",

diff --git a/src/webapp/src/App.js b/src/webapp/src/App.js
@@ -13,12 +13,13 @@ function App() {
       <PlayerProvider>
         <AppSettingsProvider>
           <Grid
-            alignItems="center"
             container
             direction="row"
             id="routes"
-            justifyContent="center"
-          >
+            sx={{
+              alignItems: "center",
+              justifyContent: "center"
+            }}>
             <Router />
           </Grid>
         </AppSettingsProvider>

diff --git a/src/webapp/src/components/Cards/controls/actions/audio/slider-change-volume.js b/src/webapp/src/components/Cards/controls/actions/audio/slider-change-volume.js
@@ -34,12 +34,19 @@ const SliderChangeVolume = ({
   };
 
   return (
-    <Grid container alignItems="center" sx={{ marginTop: '20px' }}>
+    <Grid
+      container
+      sx={{
+        alignItems: "center",
+        marginTop: '20px'
+      }}>
       <Grid item xs={12}>
         <Typography>
           {t('cards.controls.actions.audio.volume.title')}
         </Typography>
-        <Stack spacing={2} direction="row" alignItems="center">
+        <Stack spacing={2} direction="row" sx={{
+          alignItems: "center"
+        }}>
           <Remove />
           <Slider
             aria-label={t('cards.controls.actions.audio.volume.title')}

diff --git a/src/webapp/src/components/Cards/controls/actions/host/say-my-ip-options.js b/src/webapp/src/components/Cards/controls/actions/host/say-my-ip-options.js
@@ -30,7 +30,12 @@ const SayMyIpOptions = ({
   };
 
   return (
-    <Grid container alignItems="center" sx={{ marginTop: '20px' }}>
+    <Grid
+      container
+      sx={{
+        alignItems: "center",
+        marginTop: '20px'
+      }}>
       <Grid item xs={12}>
         <Typography>
           {t('cards.controls.actions.host.description')}

diff --git a/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js b/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js
@@ -26,7 +26,12 @@ const SliderSetTimer = ({
   };
 
   return (
-    <Grid container alignItems="center" sx={{ marginTop: '20px' }}>
+    <Grid
+      container
+      sx={{
+        alignItems: "center",
+        marginTop: '20px'
+      }}>
       <Grid item xs={12}>
         <Typography>
           {t('cards.controls.actions.timers.description')}

diff --git a/src/webapp/src/components/Cards/controls/command-selector.js b/src/webapp/src/components/Cards/controls/command-selector.js
@@ -26,7 +26,9 @@ const CommandSelector = ({
   }
 
   return (
-    <Grid container direction="row" alignItems="center">
+    <Grid container direction="row" sx={{
+      alignItems: "center"
+    }}>
       <Grid item xs={5}>
         <Typography>
           {t('cards.controls.command-selector.title')}

diff --git a/src/webapp/src/components/Cards/controls/controls-selector.js b/src/webapp/src/components/Cards/controls/controls-selector.js
@@ -35,7 +35,9 @@ const ControlsSelector = ({
 
   return (
     <Grid container direction="column">
-      <Grid container direction="row" alignItems="center">
+      <Grid container direction="row" sx={{
+        alignItems: "center"
+      }}>
         <Grid item xs={5}>
           <Typography>
             {t('cards.controls.controls-selector.label')}
@@ -51,9 +53,10 @@ const ControlsSelector = ({
       <Grid
         container
         direction="row"
-        alignItems="center"
-        sx={{ marginTop: '20px' }}
-      >
+        sx={{
+          alignItems: "center",
+          marginTop: '20px'
+        }}>
         {actionData.action === 'host' &&
           <SelectHost
           actionData={actionData}

diff --git a/src/webapp/src/components/Cards/controls/options-selector.js b/src/webapp/src/components/Cards/controls/options-selector.js
@@ -31,7 +31,12 @@ const OptionsSelector = ({
   };
 
   return (
-    <Grid container alignItems="center" sx={{ marginTop: '20px' }}>
+    <Grid
+      container
+      sx={{
+        alignItems: "center",
+        marginTop: '20px'
+      }}>
       <Grid item xs={12}>
         <Typography>
           {t(optionLabel)}

diff --git a/src/webapp/src/components/Cards/form.js b/src/webapp/src/components/Cards/form.js
@@ -33,47 +33,47 @@ const CardsForm = ({
 }) => {
   const { t } = useTranslation();
 
-  return (
-    <>
-      <Header title={title} backLink="/cards" />
-      <Grid container>
-        <Grid item xs={12}>
-          <Card elevation={0}>
-            <CardHeader
-              avatar={
-                <Avatar aria-label={t('cards.form.no-card-swiped')}>
-                  <BookmarkIcon />
-                </Avatar>
-              }
-              title={
-                cardId
-                  ? cardId
-                  : t('cards.form.no-card-id')
-              }
-            />
-            <CardContent>
-              {cardId &&
-                <>
-                  <Grid container direction="row" alignItems="center">
-                    <ControlsSelector
-                      actionData={actionData}
-                      setActionData={setActionData}
-                      cardId={cardId}
-                    />
-                  </Grid>
-                  <ActionsControls
+  return (<>
+    <Header title={title} backLink="/cards" />
+    <Grid container>
+      <Grid item xs={12}>
+        <Card elevation={0}>
+          <CardHeader
+            avatar={
+              <Avatar aria-label={t('cards.form.no-card-swiped')}>
+                <BookmarkIcon />
+              </Avatar>
+            }
+            title={
+              cardId
+                ? cardId
+                : t('cards.form.no-card-id')
+            }
+          />
+          <CardContent>
+            {cardId &&
+              <>
+                <Grid container direction="row" sx={{
+                  alignItems: "center"
+                }}>
+                  <ControlsSelector
                     actionData={actionData}
+                    setActionData={setActionData}
                     cardId={cardId}
                   />
-                </>
-              }
-              {!cardId && <InfoNoCardSwiped />}
-            </CardContent>
-          </Card>
-        </Grid>
+                </Grid>
+                <ActionsControls
+                  actionData={actionData}
+                  cardId={cardId}
+                />
+              </>
+            }
+            {!cardId && <InfoNoCardSwiped />}
+          </CardContent>
+        </Card>
       </Grid>
-    </>
-  );
+    </Grid>
+  </>);
 };
 
 

diff --git a/src/webapp/src/components/Cards/list.js b/src/webapp/src/components/Cards/list.js
@@ -3,14 +3,7 @@ import { Link } from 'react-router-dom';
 import { isNil, reject } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import {
-  Avatar,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Typography
-} from '@mui/material';
+import { Avatar, List, ListItemAvatar, ListItemButton, ListItemText, Typography } from '@mui/material';
 
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 
@@ -36,12 +29,10 @@ const CardsList = ({ cardsList }) => {
       : cardsList[cardId].func
 
     return (
-      <ListItem
-        button
+      <ListItemButton
         component={EditCardLink}
         data={{ id: cardId, ...cardsList[cardId] }}
-        key={cardId}
-      >
+        key={cardId}>
         <ListItemAvatar>
           <Avatar>
             <BookmarkIcon />

diff --git a/src/webapp/src/components/Library/library-header.js b/src/webapp/src/components/Library/library-header.js
@@ -69,13 +69,16 @@ const LibraryHeader = ({ handleMusicFilter, musicFilter }) => {
         }
         {!showSearchInput &&
           <Stack
-            alignItems="center"
             direction="row"
-            sx={{ marginRight: '5px' }}
-          >
+            sx={{
+              alignItems: "center",
+              marginRight: '5px'
+            }}>
             <Typography
-              color={getCurrentView() === 'albums' && 'primary'}
-              sx={{ transition: 'color .25s' }}
+              sx={{
+                color: getCurrentView() === 'albums' && 'primary',
+                transition: 'color .25s'
+              }}
             >
               {t('library.header.albums')}
             </Typography>
@@ -86,8 +89,10 @@ const LibraryHeader = ({ handleMusicFilter, musicFilter }) => {
               color="default"
             />
             <Typography
-              color={getCurrentView() === 'folders' && 'primary'}
-              sx={{ transition: 'color .25s' }}
+              sx={{
+                color: getCurrentView() === 'folders' && 'primary',
+                transition: 'color .25s'
+              }}
             >
               {t('library.header.folders')}
             </Typography>

diff --git a/src/webapp/src/components/Library/lists/albums/album-list/album-list-item.js b/src/webapp/src/components/Library/lists/albums/album-list/album-list-item.js
@@ -5,13 +5,7 @@ import {
 } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import {
-  Avatar,
-  ListItem,
-  ListItemAvatar,
-  ListItemButton,
-  ListItemText,
-} from '@mui/material';
+import { Avatar, ListItemAvatar, ListItemButton, ListItemText } from '@mui/material';
 
 import noCover from '../../../../../assets/noCover.jpg';
 
@@ -47,7 +41,7 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
     if (albumartist && album && show_covers) {
       getCoverArt();
     }
-  }, [albumartist, album]);
+  }, [albumartist, album, show_covers]);
 
   const AlbumLink = forwardRef((props, ref) => {
     const { data } = props;
@@ -62,14 +56,11 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
   });
 
   return (
-    <ListItem
-      button={isButton}
+    <ListItemButton
       component={isButton ? AlbumLink : null}
       data={{ albumartist, album }}
       disablePadding
-      key={album}
-    >
-      <ListItemButton>
+      key={album}>
         {show_covers &&
           <ListItemAvatar>
             <Avatar variant="rounded" alt="Cover" src={coverImage} />
@@ -79,8 +70,7 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
           primary={album || t('library.albums.unknown-album')}
           secondary={albumartist || null}
         />
-      </ListItemButton>
-    </ListItem>
+    </ListItemButton>
   );
 }
 

diff --git a/src/webapp/src/components/Player/controls.js b/src/webapp/src/components/Player/controls.js
@@ -67,12 +67,12 @@ const Controls = () => {
   return (
     <Grid
       container
-      alignItems="center"
       direction="row"
-      flexWrap="nowrap"
-      justifyContent="space-evenly"
-    >
-
+      sx={{
+        alignItems: "center",
+        flexWrap: "nowrap",
+        justifyContent: "space-evenly"
+      }}>
       {/* Shuffle */}
       <IconButton
         aria-label={labelShuffle()}

diff --git a/src/webapp/src/components/Player/cover.js b/src/webapp/src/components/Player/cover.js
@@ -9,7 +9,13 @@ const Cover = ({ coverImage }) => {
   const { t } = useTranslation();
 
   return (
-    <Grid container direction="row" justifyContent="center" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      sx={{
+        justifyContent: "center",
+        alignItems: "center"
+      }}>
       <Paper
         elevation={3}
         sx={{
@@ -21,14 +27,13 @@ const Cover = ({ coverImage }) => {
         <Grid
           container
           direction="row"
-          justifyContent="center"
-          alignItems="center"
           sx={{
+            justifyContent: "center",
+            alignItems: "center",
             position: 'absolute',
             width: '100%',
-            height: '100%',
-          }}
-        >
+            height: '100%'
+          }}>
           {coverImage &&
             <img
               alt={t('player.cover.title')}

diff --git a/src/webapp/src/components/Player/index.js b/src/webapp/src/components/Player/index.js
@@ -40,7 +40,7 @@ const Player = () => {
     if (file && show_covers) {
       getCoverArt();
     }
-  }, [file]);
+  }, [file, show_covers]);
 
   return (
     <Grid