Changing theme works for compatibility with mui localization

gui/rpk-gui/src/App.tsx

@@ -5,7 +5,6 @@ import { RefineSnackbarProvider, useNotificationProvider } from "@refinedev/mui"
 
 import CssBaseline from "@mui/material/CssBaseline";
 import GlobalStyles from "@mui/material/GlobalStyles";
-import { ThemeProvider } from "@mui/material/styles";
 import HistoryEduIcon from '@mui/icons-material/HistoryEdu';
 import routerBindings, {
   CatchAllNavigate,
@@ -22,9 +21,9 @@ import { ForgotPassword } from "./components/auth/ForgotPassword";
 import { UpdatePassword } from "./components/auth/UpdatePassword";
 
 import { Header } from "./components";
+import { I18nTheme } from "./components/I18nTheme";
 import { HubRoutes } from "./pages/hub";
 import { FirmRoutes } from "./pages/firm";
-import rpcTheme from "./theme";
 
 function App() {
   const { t, i18n } = useTranslation();
@@ -37,43 +36,43 @@ function App() {
 
   return (
     <BrowserRouter>
-      <ThemeProvider theme={rpcTheme}>
+      <ColorModeContextProvider>
-        <ColorModeContextProvider>
+        <CssBaseline />
-          <CssBaseline />
+        <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
-          <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
+        <RefineSnackbarProvider>
-          <RefineSnackbarProvider>
+          <Refine
-            <Refine
+            authProvider={authProvider}
-              authProvider={authProvider}
+            dataProvider={dataProvider}
-              dataProvider={dataProvider}
+            i18nProvider={i18nProvider}
-              i18nProvider={i18nProvider}
+            notificationProvider={useNotificationProvider}
-              notificationProvider={useNotificationProvider}
+            routerProvider={routerBindings}
-              routerProvider={routerBindings}
+            options={{
-              options={{
+              title: {
-                title: {
+                text: "Roleplay Contracts",
-                  text: "Roleplay Contracts",
+                icon: <HistoryEduIcon />
-                  icon: <HistoryEduIcon />
+              },
-                },
+              syncWithLocation: true,
-                syncWithLocation: true,
+              warnWhenUnsavedChanges: true,
-                warnWhenUnsavedChanges: true,
+              useNewQueryKeys: true,
-                useNewQueryKeys: true,
+              disableTelemetry: true,
-                disableTelemetry: true,
+              reactQuery: {
-                reactQuery: {
+                clientConfig: {
-                  clientConfig: {
+                  defaultOptions: {
-                    defaultOptions: {
+                    queries: {
-                      queries: {
+                      retry: (failureCount, error) => {
-                        retry: (failureCount, error) => {
+                        // @ts-ignore
-                          // @ts-ignore
+                        if (error.statusCode >= 400 && error.statusCode <= 499) {
-                          if (error.statusCode >= 400 && error.statusCode <= 499) {
+                          return false
-                            return false
+                        }
-                          }
+                        return failureCount < 4
-                          return failureCount < 4
+                      },
-                        },
-                      }
                     }
                   }
                 }
-              }}
+              }
-            >
+            }}
+          >
+            <I18nTheme>
               <Routes>
                 <Route
                   element={(
@@ -95,10 +94,10 @@ function App() {
               </Routes>
               <UnsavedChangesNotifier />
               <DocumentTitleHandler />
-            </Refine>
+            </I18nTheme>
-          </RefineSnackbarProvider>
+          </Refine>
-        </ColorModeContextProvider>
+        </RefineSnackbarProvider>
-      </ThemeProvider>
+      </ColorModeContextProvider>
     </BrowserRouter>
   );
 }

gui/rpk-gui/src/components/I18nTheme.tsx

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from "react";
+import { useTranslation } from "@refinedev/core";
+import { useTheme } from "@mui/material";
+import * as locales from '@mui/material/locale';
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+type SupportedLocales = keyof typeof locales;
+
+export const I18nTheme: React.FC<PropsWithChildren> = ({ children }: PropsWithChildren) => {
+  const { getLocale } = useTranslation();
+  const theme = useTheme()
+
+  const themeWithLocale = createTheme(theme, locales[getLocale() as SupportedLocales])
+
+  return (
+    <ThemeProvider theme={themeWithLocale}>
+      { children }
+    </ThemeProvider>
+  );
+}

gui/rpk-gui/src/i18n.tsx

@@ -8,14 +8,14 @@ i18n
   .use(detector)
   .use(initReactI18next)
   .init({
-    supportedLngs: ["EN", "FR"],
+    supportedLngs: ["enUS", "frFR"],
     backend: {
       loadPath: "/locales/{{lng}}/{{ns}}.json", // "http/locales/{{lng}}/{{ns}}.json"
     },
     //saveMissing: true,
     ns: ["common"],
     defaultNS: "common",
-    fallbackLng: ["EN", "FR"],
+    fallbackLng: ["enUS", "frFR"],
   });
 
 export default i18n;

gui/rpk-gui/src/pages/firm/base-page/List.tsx

@@ -1,11 +1,11 @@
 import { UiSchema } from "@rjsf/utils";
+import { useTranslation } from "@refinedev/core";
 import { List as RefineList, useDataGrid } from "@refinedev/mui";
 import { DataGrid, GridColDef, GridValidRowModel } from "@mui/x-data-grid";
 import { Link, useNavigate } from "react-router"
 import React, { useContext } from "react";
 import { Button } from "@mui/material";
 import { FirmContext } from "../../../contexts/FirmContext";
-import { useTranslation } from "@refinedev/core";
 
 type ListProps<T extends GridValidRowModel> = {
   resource: string,
@@ -20,7 +20,9 @@ const List = <T extends GridValidRowModel>(props: ListProps<T>) => {
   const { currentFirm } = useContext(FirmContext);
   const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}`
 
-  const { dataGridProps } = useDataGrid<T>({resource: `${resourceBasePath}/${resource}`});
+  const { dataGridProps } = useDataGrid<T>({
+    resource: `${resourceBasePath}/${resource}`,
+  });
   const navigate = useNavigate();
 
   const cols = React.useMemo<GridColDef<T>[]>(
@@ -40,7 +42,9 @@ const List = <T extends GridValidRowModel>(props: ListProps<T>) => {
       <DataGrid
         {...dataGridProps}
         columns={cols}
-        onRowClick={handleRowClick} />
+        onRowClick={handleRowClick}
+        pageSizeOptions={[10, 15, 20, 50, 100]}
+      />
     </RefineList>
   )
 }