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>

docs/components/Logo.tsx

@@ -1,8 +1,16 @@
-import Image from 'next/image';
+import Image from "next/image";
 
 export default function Logo() {
-  return <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-    <Image src="/favicon.svg" alt="UnstoppableSwap" width={32} height={32} style={{ borderRadius: '20%' }}/>
-    <span>UnstoppableSwap</span>
-  </div>;
-}
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+      <Image
+        src="/favicon.svg"
+        alt="UnstoppableSwap"
+        width={32}
+        height={32}
+        style={{ borderRadius: "20%" }}
+      />
+      <span>UnstoppableSwap</span>
+    </div>
+  );
+}

docs/components/SwapProviderTable.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Table, Td, Th, Tr } from 'nextra/components'
+import { Table, Td, Th, Tr } from "nextra/components";
 
 export default function SwapMakerTable() {
   function satsToBtc(sats) {
@@ -40,9 +40,7 @@ export default function SwapMakerTable() {
         <tbody>
           {makers.map((maker) => (
             <Tr key={maker.peerId}>
-              <Td>
-                {maker.testnet ? "Testnet" : "Mainnet"}
-              </Td>
+              <Td>{maker.testnet ? "Testnet" : "Mainnet"}</Td>
               <Td>{maker.multiAddr}</Td>
               <Td>{maker.peerId}</Td>
               <Td>{satsToBtc(maker.minSwapAmount)} BTC</Td>