From 471583733c6055a29b99d4e338559a4213a38c22 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Sat, 20 Apr 2024 20:19:19 +0100
Subject: [PATCH] frontend: fix breaking MUI-X v7 changes

---
 frontend/package.json                         |  2 +-
 frontend/src/components/BookTable/index.tsx   | 60 +++++++++++--------
 .../src/components/MakerForm/MakerForm.tsx    |  4 +-
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 429130a5..77131dc9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -55,7 +55,7 @@
     "@mui/base": "^5.0.0-beta.7",
     "@mui/icons-material": "^5.15.9",
     "@mui/lab": "^5.0.0-alpha.136",
-    "@mui/material": "^5.15.9",
+    "@mui/material": "^5.15.14",
     "@mui/system": "^5.15.11",
     "@mui/x-data-grid": "^7.3.0",
     "@mui/x-date-pickers": "^7.2.0",
diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx
index eabb0068..453a35bf 100644
--- a/frontend/src/components/BookTable/index.tsx
+++ b/frontend/src/components/BookTable/index.tsx
@@ -24,6 +24,7 @@ import {
   type GridPaginationModel,
   type GridColDef,
   type GridValidRowModel,
+  GridSlotsComponent,
 } from '@mui/x-data-grid';
 import currencyDict from '../../../static/assets/currencies.json';
 import { type PublicOrder } from '../../models';
@@ -204,12 +205,12 @@ const BookTable = ({
       renderCell: (params: any) => {
         return (
           <ListItemButton
-            style={{ cursor: 'pointer', position: 'relative', left: '-1.3em' }}
+            style={{ cursor: 'pointer' }}
             onClick={() => {
               onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
             }}
           >
-            <ListItemAvatar>
+            <ListItemAvatar sx={{ position: 'relative', left: '-1.3em', bottom: '0.6em' }}>
               <RobotAvatar
                 hashId={params.row.maker_hash_id}
                 style={{ width: '3.215em', height: '3.215em' }}
@@ -221,7 +222,10 @@ const BookTable = ({
                 small={true}
               />
             </ListItemAvatar>
-            <ListItemText primary={params.row.maker_nick} />
+            <ListItemText
+              primary={params.row.maker_nick}
+              sx={{ position: 'relative', left: '-1.3em', bottom: '0.6em' }}
+            />
           </ListItemButton>
         );
       },
@@ -236,7 +240,7 @@ const BookTable = ({
       renderCell: (params: any) => {
         return (
           <div
-            style={{ position: 'relative', left: '-0.34em', cursor: 'pointer' }}
+            style={{ position: 'relative', left: '-0.34em', cursor: 'pointer', bottom: '0.2em' }}
             onClick={() => {
               onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
             }}
@@ -270,12 +274,12 @@ const BookTable = ({
       renderCell: (params: any) => {
         return (
           <ListItemButton
-            style={{ cursor: 'pointer', position: 'relative', left: '-1.54em' }}
+            style={{ cursor: 'pointer' }}
             onClick={() => {
               onClickCoordinator(params.row.coordinatorShortAlias);
             }}
           >
-            <ListItemAvatar>
+            <ListItemAvatar sx={{ position: 'relative', left: '-1.54em', bottom: '0.4em' }}>
               <RobotAvatar
                 shortAlias={params.row.coordinatorShortAlias}
                 style={{ width: '3.215em', height: '3.215em' }}
@@ -364,8 +368,9 @@ const BookTable = ({
             }}
           >
             {currencyCode}
-            <div style={{ width: '0.3em' }} />
-            <FlagWithProps code={currencyCode} />
+            <div style={{ position: 'relative', left: '0.3em', bottom: '0.7em' }}>
+              <FlagWithProps code={currencyCode} />
+            </div>
           </div>
         );
       },
@@ -386,12 +391,14 @@ const BookTable = ({
                 onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
               }}
             >
-              <PaymentStringAsIcons
-                othersText={t('Others')}
-                verbose={true}
-                size={1.7 * fontSize}
-                text={params.row.payment_method}
-              />
+              <div style={{ position: 'relative', top: '0.4em' }}>
+                <PaymentStringAsIcons
+                  othersText={t('Others')}
+                  verbose={true}
+                  size={1.7 * fontSize}
+                  text={params.row.payment_method}
+                />
+              </div>
             </div>
           );
         },
@@ -410,7 +417,8 @@ const BookTable = ({
           <div
             style={{
               position: 'relative',
-              left: '-4px',
+              left: '-0.25em',
+              top: '0.3em',
               cursor: 'pointer',
             }}
             onClick={() => {
@@ -545,7 +553,7 @@ const BookTable = ({
         const minutes = Math.round((timeToExpiry - hours * (3600 * 1000)) / 60000);
         return (
           <Box
-            sx={{ position: 'relative', display: 'inline-flex', left: '0.3em' }}
+            sx={{ position: 'relative', display: 'inline-flex', left: '0.3em', top: '0.5em' }}
             onClick={() => {
               onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
             }}
@@ -880,19 +888,19 @@ const BookTable = ({
   };
 
   const gridComponents = useMemo(() => {
-    const components: GridComponentProps = {
-      LoadingOverlay: LinearProgress,
+    const components: GridSlotsComponent = {
+      loadingOverlay: LinearProgress,
     };
 
     if (showNoResults) {
-      components.NoResultsOverlay = NoResultsOverlay;
-      components.NoRowsOverlay = NoResultsOverlay;
+      components.noResultsOverlay = NoResultsOverlay;
+      components.noRowsOverlay = NoResultsOverlay;
     }
     if (showFooter) {
-      components.Footer = Footer;
+      components.footer = Footer;
     }
     if (showControls) {
-      components.Toolbar = BookControl;
+      components.toolbar = BookControl;
     }
     return components;
   }, [showNoResults, showFooter, showControls, fullscreen]);
@@ -930,8 +938,8 @@ const BookTable = ({
             setColumnVisibilityModel(newColumnVisibilityModel);
           }}
           hideFooter={!showFooter}
-          components={gridComponents}
-          componentsProps={{
+          slots={gridComponents}
+          slotProps={{
             toolbar: {
               width,
               paymentMethod: paymentMethods,
@@ -966,12 +974,12 @@ const BookTable = ({
             loading={federation.loading}
             columns={columns}
             hideFooter={!showFooter}
-            components={gridComponents}
+            slots={gridComponents}
             columnVisibilityModel={columnVisibilityModel}
             onColumnVisibilityModelChange={(newColumnVisibilityModel) => {
               setColumnVisibilityModel(newColumnVisibilityModel);
             }}
-            componentsProps={{
+            slotProps={{
               toolbar: {
                 width,
                 paymentMethod: paymentMethods,
diff --git a/frontend/src/components/MakerForm/MakerForm.tsx b/frontend/src/components/MakerForm/MakerForm.tsx
index d9645b72..c2ee6d6a 100644
--- a/frontend/src/components/MakerForm/MakerForm.tsx
+++ b/frontend/src/components/MakerForm/MakerForm.tsx
@@ -1028,7 +1028,7 @@ const MakerForm = ({
                       views={['hours', 'minutes']}
                       inputFormat='HH:mm'
                       mask='__:__'
-                      componentsProps={{
+                      slotProps={{
                         textField: {
                           InputProps: {
                             style: {
@@ -1061,7 +1061,7 @@ const MakerForm = ({
                       views={['hours', 'minutes']}
                       inputFormat='HH:mm'
                       mask='__:__'
-                      componentsProps={{
+                      slotProps={{
                         textField: {
                           InputProps: {
                             style: {