Dark theme integration

frontend/src/Settings.tsx

@@ -17,10 +17,10 @@ import {
     TextField,
     Typography
 } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Socket } from "socket.io-client";
-import { LanguageUnion, setCliArgs, setLanguage, setServerAddr } from "./features/settings/settingsSlice";
+import { LanguageUnion, setCliArgs, setLanguage, setServerAddr, setTheme, ThemeUnion } from "./features/settings/settingsSlice";
 import { alreadyUpdated, updated } from "./features/status/statusSlice";
 import { RootState } from "./stores/store";
 import { validateDomain, validateIP } from "./utils";
@@ -34,25 +34,7 @@ export default function Settings({ socket }: Props) {
     const status = useSelector((state: RootState) => state.status)
     const dispatch = useDispatch()
 
-    const [halt, setHalt] = useState(false);
     const [invalidIP, setInvalidIP] = useState(false);
-    const [updatedBin, setUpdatedBin] = useState(false);
-    const [freeDiskSpace, setFreeDiskSpace] = useState('');
-
-    /* Handle yt-dlp update success */
-    useEffect(() => {
-        socket.on('updated', () => {
-            setUpdatedBin(true)
-            setHalt(false)
-        })
-    }, [])
-
-    /* Get disk free space */
-    useEffect(() => {
-        socket.on('free-space', (res: string) => {
-            setFreeDiskSpace(res)
-        })
-    }, [])
 
     /**
      * Update the server ip address state and localstorage whenever the input value changes.  
@@ -75,10 +57,17 @@ export default function Settings({ socket }: Props) {
     /**
      * Language toggler handler 
      */
-    const handleLanguageChage = (event: SelectChangeEvent<LanguageUnion>) => {
+    const handleLanguageChange = (event: SelectChangeEvent<LanguageUnion>) => {
         dispatch(setLanguage(event.target.value as LanguageUnion));
     }
 
+    /**
+     * Language toggler handler 
+     */
+    const handleThemeChange = (event: SelectChangeEvent<ThemeUnion>) => {
+        dispatch(setTheme(event.target.value as ThemeUnion));
+    }
+
     /**
      * Send via WebSocket a message in order to update the yt-dlp binary from server
      */
@@ -115,21 +104,38 @@ export default function Settings({ socket }: Props) {
                                 }}
                                 sx={{ mb: 2 }}
                             />
-                            <FormControl fullWidth>
-                                <InputLabel id="demo-simple-select-label">Language</InputLabel>
-                                <Select
-                                    defaultValue={settings.language}
-                                    label="Language"
-                                    onChange={handleLanguageChage}
-                                >
-                                    <MenuItem value="english">English</MenuItem>
-                                    <MenuItem value="spanish">Spanish</MenuItem>
-                                    <MenuItem value="italian">Italian</MenuItem>
-                                    <MenuItem value="chinese">Chinese</MenuItem>
-                                    <MenuItem value="russian">Russian</MenuItem>
-                                    <MenuItem value="korean">Korean</MenuItem>
-                                </Select>
-                            </FormControl>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12} md={6}>
+                                    <FormControl fullWidth>
+                                        <InputLabel id="demo-simple-select-label">Language</InputLabel>
+                                        <Select
+                                            defaultValue={settings.language}
+                                            label="Language"
+                                            onChange={handleLanguageChange}
+                                        >
+                                            <MenuItem value="english">English</MenuItem>
+                                            <MenuItem value="spanish">Spanish</MenuItem>
+                                            <MenuItem value="italian">Italian</MenuItem>
+                                            <MenuItem value="chinese">Chinese</MenuItem>
+                                            <MenuItem value="russian">Russian</MenuItem>
+                                            <MenuItem value="korean">Korean</MenuItem>
+                                        </Select>
+                                    </FormControl>
+                                </Grid>
+                                <Grid item xs={12} md={6}>
+                                    <FormControl fullWidth>
+                                        <InputLabel>Theme</InputLabel>
+                                        <Select
+                                            defaultValue={settings.theme}
+                                            label="Theme"
+                                            onChange={handleThemeChange}
+                                        >
+                                            <MenuItem value="light">Light</MenuItem>
+                                            <MenuItem value="dark">Dark</MenuItem>
+                                        </Select>
+                                    </FormControl>
+                                </Grid>
+                            </Grid>
                             <FormControlLabel
                                 control={
                                     <Switch