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/wallet/WithdrawWidget.tsx

@@ -1,5 +1,5 @@
-import { Box, Button, makeStyles, Typography } from "@material-ui/core";
-import SendIcon from "@material-ui/icons/Send";
+import { Box, Button, Typography } from "@mui/material";
+import SendIcon from "@mui/icons-material/Send";
 import { useState } from "react";
 import { SatsAmount } from "renderer/components/other/Units";
 import { useAppSelector } from "store/hooks";
@@ -8,16 +8,7 @@ import InfoBox from "../../modal/swap/InfoBox";
 import WithdrawDialog from "../../modal/wallet/WithdrawDialog";
 import WalletRefreshButton from "./WalletRefreshButton";
 
-const useStyles = makeStyles((theme) => ({
-  title: {
-    alignItems: "center",
-    display: "flex",
-    gap: theme.spacing(0.5),
-  },
-}));
-
 export default function WithdrawWidget() {
-  const classes = useStyles();
   const walletBalance = useAppSelector((state) => state.rpc.state.balance);
   const [showDialog, setShowDialog] = useState(false);
 
@@ -29,7 +20,7 @@ export default function WithdrawWidget() {
     <>
       <InfoBox
         title={
-          <Box className={classes.title}>
+          <Box sx={{ alignItems: "center", display: "flex", gap: 0.5 }}>
             Wallet Balance
             <WalletRefreshButton />
           </Box>