[CastIt.Server.ClientApp] Minor improvements and initial migration to…

… the new styled system

CastIt.Server/ClientApp/src/pages/page_content.tsx

@@ -1,35 +1,37 @@
-import {Container} from '@mui/material';
-import {createStyles, makeStyles} from '@mui/styles';
+import { Container } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const PREFIX = 'PageContent';
 
-const useStyles = makeStyles((theme) =>
-    createStyles({
-        root: {
-            flex: 'auto',
-            overflowY: 'auto',
-        },
-    })
-);
+const classes = {
+    root: `${PREFIX}-root`,
+};
+
+const Root = styled('div')((_) => ({
+    [`&.${classes.root}`]: {
+        flex: 'auto',
+        overflowY: 'auto',
+    },
+}));
 
 interface Props {
     useContainer?: boolean;
     children: JSX.Element;
 }
 
 function PageContent(props: Props) {
-    const classes = useStyles();
     if (props.useContainer) {
         return (
-            <div className={classes.root}>
-                <Container id="page-content" maxWidth="xl">
+            <Root className={classes.root}>
+                <Container id="page-content" sx={{ maxWidth: '2000px !important' }}>
                     {props.children}
                 </Container>
-            </div>
+            </Root>
         );
     }
     return (
-        <div id="page-content" className={classes.root}>
+        <Root id="page-content" className={classes.root}>
             {props.children}
-        </div>
+        </Root>
     );
 }
 

CastIt.Server/ClientApp/src/pages/playlist.tsx

@@ -1,11 +1,11 @@
 import { useSnackbar } from 'notistack';
+import { styled } from '@mui/material/styles';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { Params, useParams } from 'react-router-dom';
 import { IFileItemResponseDto, IGetAllPlayListResponseDto, IPlayListItemResponseDto } from '../models';
 import { onPlayListsChanged, onPlayListChanged, onFileAdded, onFilesChanged, onFileDeleted } from '../services/castithub.service';
 import FileItem from '../components/file/file_item';
 import { Button, CircularProgress, Container, Grid, List } from '@mui/material';
-import { createStyles, makeStyles } from '@mui/styles';
 import PlayListAppBar from '../components/playlist/playlist_appbar';
 import translations from '../services/translations';
 import PageContent from './page_content';
@@ -15,18 +15,24 @@ import NothingFound from '../components/nothing_found';
 import { Add } from '@mui/icons-material';
 import AddFilesDialog from '../components/dialogs/add_files_dialog';
 
-const useStyles = makeStyles(() =>
-    createStyles({
-        nothingFound: {
-            textAlign: 'center',
-            height: '100%',
-        },
-        loadingPlayList: {
-            height: '100%',
-            textAlign: 'center',
-        },
-    })
-);
+const PREFIX = 'PlayList';
+
+const classes = {
+    nothingFound: `${PREFIX}-nothingFound`,
+    loadingPlayList: `${PREFIX}-loadingPlayList`,
+};
+
+const StyledPageContent = styled(PageContent)(() => ({
+    [`&.${classes.nothingFound}`]: {
+        textAlign: 'center',
+        height: '100%',
+    },
+
+    [`&.${classes.loadingPlayList}`]: {
+        height: '100%',
+        textAlign: 'center',
+    },
+}));
 
 interface ComponentParams extends Params {
     id: string;
@@ -50,8 +56,6 @@ function PlayList() {
 
     const [showAddFilesDialog, setShowAddFilesDialog] = useState(false);
 
-    const classes = useStyles();
-
     const loadPlayList = useCallback(async () => {
         const playList = await castItHub.connection.getPlayList(+params.id!);
         setState((s) => ({
@@ -247,7 +251,7 @@ function PlayList() {
         );
 
     return (
-        <PageContent>
+        <StyledPageContent>
             <Fragment>
                 <PlayListAppBar
                     id={state.playList!.id}
@@ -259,7 +263,7 @@ function PlayList() {
                 />
                 {content}
             </Fragment>
-        </PageContent>
+        </StyledPageContent>
     );
 }
 

CastIt.Server/ClientApp/src/pages/playlists.tsx

@@ -112,7 +112,7 @@ function PlayLists() {
             item
             xs={12}
             sm={4}
-            md={4}
+            md={3}
             lg={3}
             xl={2}
             onMouseOver={(_) => toggleRaised(pl.id, true)}