refactor(gui): Update MUI to v7 (#383)

* task(gui): update to mui v5

* task(gui): use sx prop instead of system props

* task(gui): update to mui v6 and replace makeStyles with sx prop

* task(gui): update to mui v7

* task(gui): update react

* fix(gui): fix import

* task(gui): adjust theme and few components to fix migration introduced styling errors

* fix(gui): animation issues with text field animations

* fix(gui): remove 'darker' theme and make 'dark' theme the default

- with the new update 'dark' theme is already quite dark and therefore a 'darker' theme not necessary
- the default theme is set to 'dark' now in settings initialization

* feat(tooling): Upgrade dprint to 0.50.0, eslint config, prettier, justfile commands

- Upgrade dprint to 0.50.0
- Use sane default eslint config (fairly permissive)
- `dprint fmt` now runs prettier for the `src-gui` folder
- Added `check_gui_eslint`, `check_gui_tsc` and `check_gui` commands

* refactor: fix a few eslint errors

* dprint fmt

* fix tsc complains

* nitpick: small spacing issue

---------

Co-authored-by: Binarybaron <binarybaron@protonmail.com>
Co-authored-by: Mohan <86064887+binarybaron@users.noreply.github.com>

src-gui/src/renderer/components/pages/help/DaemonControlBox.tsx

@@ -1,50 +1,41 @@
-import { Box, makeStyles } from "@material-ui/core";
-import FolderOpenIcon from "@material-ui/icons/FolderOpen";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import { Box } from "@mui/material";
+import FolderOpenIcon from "@mui/icons-material/FolderOpen";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
 import { useAppSelector } from "store/hooks";
 import InfoBox from "../../modal/swap/InfoBox";
 import CliLogsBox from "../../other/RenderedCliLog";
 import { getDataDir, initializeContext } from "renderer/rpc";
 import { relaunch } from "@tauri-apps/plugin-process";
-import RotateLeftIcon from "@material-ui/icons/RotateLeft";
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import { TauriContextStatusEvent } from "models/tauriModel";
 
-const useStyles = makeStyles((theme) => ({
-  actionsOuter: {
-    display: "flex",
-    gap: theme.spacing(1),
-    alignItems: "center",
-  },
-}));
-
 export default function DaemonControlBox() {
-  const classes = useStyles();
   const logs = useAppSelector((s) => s.rpc.logs);
 
   // The daemon can be manually started if it has failed or if it has not been started yet
   const canContextBeManuallyStarted = useAppSelector(
-    (s) => s.rpc.status === TauriContextStatusEvent.Failed || s.rpc.status === null,
+    (s) =>
+      s.rpc.status === TauriContextStatusEvent.Failed || s.rpc.status === null,
   );
   const isContextInitializing = useAppSelector(
     (s) => s.rpc.status === TauriContextStatusEvent.Initializing,
   );
 
-  const stringifiedDaemonStatus = useAppSelector((s) => s.rpc.status ?? "not started");
+  const stringifiedDaemonStatus = useAppSelector(
+    (s) => s.rpc.status ?? "not started",
+  );
 
   return (
     <InfoBox
       id="daemon-control-box"
       title={`Daemon Controller (${stringifiedDaemonStatus})`}
       mainContent={
-        <CliLogsBox
-          label="Logs (current session only)"
-          logs={logs}
-        />
+        <CliLogsBox label="Logs (current session only)" logs={logs} />
       }
       additionalContent={
-        <Box className={classes.actionsOuter}>
+        <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
           <PromiseInvokeButton
             variant="contained"
             endIcon={<PlayArrowIcon />}