Updated GUI

gui/react/src/Layout.tsx

@@ -13,14 +13,15 @@ const Layout: React.FC = () => {
 
   const messageHandler = React.useContext(messageChannelContext);
 
-  return <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
+  return <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: '100%', alignItems: 'center',}}>
     <MenuBar />
     <Box sx={{
-      height: 50,
-      width: '95rem',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
+      width: '93vw',
+      maxWidth: '93rem',
+      maxHeight: '3rem'
       //backgroundColor: '#ffffff',
       }}>
       <LogoutButton />

gui/react/src/Style.tsx

@@ -11,7 +11,7 @@ const makeTheme = (mode: 'dark'|'light') : Partial<Theme> => {
 
 const Style: FCWithChildren = ({children}) => {
   return <ThemeProvider theme={makeTheme('dark')}>
-      <Box sx={{ position: 'fixed', height: '100%', width: '100%', zIndex: -500, backgroundColor: 'rgb(0, 30, 60)', top: 0, left: 0 }}/>
+      <Box sx={{   }}/>
       {children}
   </ThemeProvider>;
 };

gui/react/src/components/AddToQueue/AddToQueue.tsx

@@ -17,7 +17,7 @@ const AddToQueue: React.FC = () => {
         <DownloadSelector onFinish={() => setOpen(false)} />
       </Box>
     </Dialog>
-    <Button variant='contained' onClick={() => setOpen(true)}>
+    <Button variant='contained' onClick={() => setOpen(true)} sx={{ maxHeight: '2.3rem' }}>
       <Add />
       Add to Queue
     </Button>

gui/react/src/components/LogoutButton.tsx

@@ -26,6 +26,7 @@ const LogoutButton: React.FC = () => {
       startIcon={<ExitToApp />}
       variant='contained'
       onClick={logout}
+      sx={{ maxHeight: '2.3rem' }}
     >
       Service select
     </Button>

gui/react/src/components/MainFrame/Queue/Queue.tsx

@@ -26,8 +26,9 @@ const Queue: React.FC = () => {
       <Box sx={{
           marginTop: '2rem',
           marginBottom: '1rem',
-          height: '11rem',
-          width: '95rem',
+          height: '12rem',
+          width: '93vw',
+          maxWidth: '93rem',
           backgroundColor: '#282828',
           boxShadow: '0px 0px 50px #00000090',
           borderRadius: '10px',
@@ -123,19 +124,20 @@ const Queue: React.FC = () => {
       current && !data && <>
       <Box sx={{
         display: 'flex',
-        width: '100%',
         flexDirection: 'column',
         alignItems: 'center',
       }}>
         <Box sx={{
           marginTop: '2rem',
           marginBottom: '1rem',
-          height: '13rem',
-          width: '93rem',
+          height: '12rem',
+          width: '93vw',
+          maxWidth: '93rem',
           backgroundColor: '#282828',
           boxShadow: '0px 0px 50px #00000090',
           borderRadius: '10px',
           display: 'flex',
+          overflow: 'hidden',
           transition: '250ms'
           }}>
         <img style={{
@@ -143,6 +145,7 @@ const Queue: React.FC = () => {
             margin: '5px',
             boxShadow: '0px 0px 10px #00000090',
             userSelect: 'none',
+            maxWidth: '20.5rem',
           }}
         src={current.image} height='auto' width='auto' alt="Thumbnail" />
         <Box
@@ -150,13 +153,14 @@ const Queue: React.FC = () => {
           display: 'flex',
           flexDirection: 'column',
           width: '100%',
-          justifyContent: 'center'
+          justifyContent: 'center',
+          //backgroundColor: '#ffffff0f'
         }}>
         <Box sx={{
           display: 'flex',
+          
         }}>
         <Box sx={{
-          //backgroundColor: '#ff0000', 
           width: '70%',
           marginLeft: '10px'
         }}>
@@ -188,7 +192,8 @@ const Queue: React.FC = () => {
           <Box sx={{
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'space-between'
+            justifyContent: 'space-between',
+            position: 'relative',
           }}>
           <Typography color='text.primary' sx={{
             fontSize: '1.8rem',
@@ -235,8 +240,7 @@ const Queue: React.FC = () => {
     {queue.map((queueItem, index, { length }) => {
       return <Box key={`queue_item_${index}`} sx={{
         display: 'flex',
-        width: '100%',
-        height: '12rem',
+        mb: '-1.5rem',
         flexDirection: 'column',
         alignItems: 'center',
       }}>
@@ -244,26 +248,30 @@ const Queue: React.FC = () => {
           marginTop: '1.5rem',
           marginBottom: '1.5rem',
           height: '11rem',
-          width: '90rem',
+          width: '90vw',
+          maxWidth: '90rem',
           backgroundColor: '#282828',
           boxShadow: '0px 0px 10px #00000090',
           borderRadius: '10px',
           display: 'flex',
+          overflow: 'hidden',
           }}>
           <img style={{
             borderRadius: '5px',
             margin: '5px',
             boxShadow: '0px 0px 5px #00000090',
             userSelect: 'none',
+            maxWidth: '18.5rem'
           }}
           src={queueItem.image} height='auto' width='auto' alt="Thumbnail" />
           <Box sx={{
             margin: '5px',
             display: 'flex',
+            width: '100%',
             justifyContent: 'space-between',
             }}>
               <Box sx={{
-                width: '30rem',
+                width: '30%',
                 marginRight: '5px',
                 marginLeft: '5px',
                 display: 'flex',
@@ -297,7 +305,7 @@ const Queue: React.FC = () => {
               </Typography>
               </Box>
               <Box sx={{
-                width: '30rem',
+                width: '40%',
                 marginRight: '5px',
                 marginLeft: '5px',
                 display: 'flex',
@@ -330,9 +338,12 @@ const Queue: React.FC = () => {
                 </Typography>
               </Box>
               <Box sx={{
-                //backgroundColor: '#ffffff',
                 marginRight: '5px',
                 marginLeft: '5px',
+                width: '30%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                display: 'flex'
               }}>
               <Tooltip title="Delete from queue" arrow placement='top'>
                 <IconButton
@@ -342,8 +353,6 @@ const Queue: React.FC = () => {
             sx={{
               backgroundColor: '#ff573a25',
               height: '40px',
-              width: '40px',
-              margin: '4rem',
               transition: '250ms',
               '&:hover' : {
                 backgroundColor: '#ff573a',

gui/react/src/components/MenuBar/MenuBar.tsx

@@ -44,13 +44,15 @@ const MenuBar: React.FC = () => {
   if (!msg)
     return <></>;
 
-  return <Box sx={{ width: '95rem', display: 'flex', marginBottom: '1rem' }}>
+  return <Box sx={{ display: 'flex', marginBottom: '1rem', width: '100%', alignItems: 'center' }}>
+    <Box sx={{ position: 'relative', left: '0%', width: '50%'}}>
     <Button onClick={(e) => handleClick(e, 'settings')}>
       Settings
     </Button>
     <Button onClick={(e) => handleClick(e, 'help')}>
       Help
     </Button>
+    </Box>
     <Menu open={openMenu === 'settings'} anchorEl={anchorEl} onClose={handleClose}>
       <MenuItem onClick={() => {
         msg.openFolder('config');
@@ -108,7 +110,7 @@ const MenuBar: React.FC = () => {
         Version: {store.version}
       </MenuItem>
     </Menu>
-    <Typography variant="h5" color="text.primary"  sx={{ alignSelf: 'center', textAlign: 'center', width: '100%'}}>
+    <Typography variant="h5" color="text.primary">
       {transformService(store.service)}
     </Typography>
   </Box>;

gui/react/src/components/StartQueue.tsx

@@ -29,6 +29,7 @@ const StartQueueButton: React.FC = () => {
       startIcon={start ? <PauseCircleFilled /> : <PlayCircleFilled /> }
       variant='contained'
       onClick={change}
+      sx={{ maxHeight: '2.3rem' }}
     >
       {
         start ? 'Stop Queue' : 'Start Queue'

gui/react/src/index.tsx

@@ -4,13 +4,17 @@ import App from './App';
 import ServiceProvider from './provider/ServiceProvider';
 import Style from './Style';
 import MessageChannel from './provider/MessageChannel';
-import { IconButton } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 import { CloseOutlined } from '@mui/icons-material';
 import { SnackbarProvider, SnackbarKey } from 'notistack';
 import Store from './provider/Store';
 import ErrorHandler from './provider/ErrorHandler';
 import QueueProvider from './provider/QueueProvider';
 
+document.body.style.backgroundColor = "rgb(0, 30, 60)";
+document.body.style.display = 'flex';
+document.body.style.justifyContent = 'center';
+
 const notistackRef = React.createRef<SnackbarProvider>();
 const onClickDismiss = (key: SnackbarKey | undefined) => () => { 
   if (notistackRef.current)
@@ -34,7 +38,9 @@ root.render(
           <MessageChannel>
             <ServiceProvider>
               <QueueProvider>
-                <App />
+                <Box>
+                  <App />
+                </Box>
               </QueueProvider>
             </ServiceProvider>
           </MessageChannel>

gui/react/src/provider/ServiceProvider.tsx

@@ -18,7 +18,7 @@ const ServiceProvider: FCWithChildren = ({ children }) => {
   };
 
   return service === undefined ? 
-    <Box sx={{ justifyContent: 'center', alignItems: 'center', display: 'flex', flexDirection: 'column', height: '50rem'}}>
+    <Box sx={{ justifyContent: 'center', alignItems: 'center', display: 'flex', flexDirection: 'column', position: 'relative', top: '40vh'}}>
       <Typography color="text.primary" variant='h3' sx={{ textAlign: 'center', mb: 5 }}>Please select your service</Typography>
       <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
         <Button size='large' variant="contained" onClick={() => setService('funi')} startIcon={<Avatar src={'https://static.funimation.com/static/img/favicon.ico'} />}>Funimation</Button>