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/modal/feedback/LogViewer.tsx

@@ -8,7 +8,7 @@ import {
   Paper,
   Switch,
   Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import { CliLog } from "models/cliModel";
 import CliLogsBox from "renderer/components/other/RenderedCliLog";
 
@@ -25,39 +25,58 @@ export default function LogViewer({
   setOpen,
   logs,
   setIsRedacted,
-  isRedacted
+  isRedacted,
 }: LogViewerProps) {
   return (
     <Dialog open={open} onClose={() => setOpen(false)} fullWidth>
       <DialogContent>
         <Box>
           <DialogContentText>
-            <Box style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+            <Box
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
               <Typography>
-                These are the logs that would be attached to your feedback message and provided to us developers.
-                They help us narrow down the problem you encountered.
+                These are the logs that would be attached to your feedback
+                message and provided to us developers. They help us narrow down
+                the problem you encountered.
               </Typography>
             </Box>
           </DialogContentText>
 
-          <CliLogsBox 
-            label="Logs" 
-            logs={logs} 
+          <CliLogsBox
+            label="Logs"
+            logs={logs}
             topRightButton={
-              <Paper style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', paddingLeft: "0.5rem" }} variant="outlined">
+              <Paper
+                style={{
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  paddingLeft: "0.5rem",
+                }}
+                variant="outlined"
+              >
                 Redact
-                <Switch 
-                  color="primary" 
+                <Switch
+                  color="primary"
                   checked={isRedacted}
-                  onChange={(_, checked: boolean) => setIsRedacted(checked)} 
+                  onChange={(_, checked: boolean) => setIsRedacted(checked)}
                 />
               </Paper>
-            } 
+            }
           />
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button variant="contained" color="primary" onClick={() => setOpen(false)}>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => setOpen(false)}
+        >
           Close
         </Button>
       </DialogActions>