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>
-          <CssBaseline />
-          <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
-          <RefineSnackbarProvider>
-            <Refine
-              authProvider={authProvider}
-              dataProvider={dataProvider}
-              i18nProvider={i18nProvider}
-              notificationProvider={useNotificationProvider}
-              routerProvider={routerBindings}
-              options={{
-                title: {
-                  text: "Roleplay Contracts",
-                  icon: <HistoryEduIcon />
-                },
-                syncWithLocation: true,
-                warnWhenUnsavedChanges: true,
-                useNewQueryKeys: true,
-                disableTelemetry: true,
-                reactQuery: {
-                  clientConfig: {
-                    defaultOptions: {
-                      queries: {
-                        retry: (failureCount, error) => {
-                          // @ts-ignore
-                          if (error.statusCode >= 400 && error.statusCode <= 499) {
-                            return false
-                          }
-                          return failureCount < 4
-                        },
-                      }
+      <ColorModeContextProvider>
+        <CssBaseline />
+        <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
+        <RefineSnackbarProvider>
+          <Refine
+            authProvider={authProvider}
+            dataProvider={dataProvider}
+            i18nProvider={i18nProvider}
+            notificationProvider={useNotificationProvider}
+            routerProvider={routerBindings}
+            options={{
+              title: {
+                text: "Roleplay Contracts",
+                icon: <HistoryEduIcon />
+              },
+              syncWithLocation: true,
+              warnWhenUnsavedChanges: true,
+              useNewQueryKeys: true,
+              disableTelemetry: true,
+              reactQuery: {
+                clientConfig: {
+                  defaultOptions: {
+                    queries: {
+                      retry: (failureCount, error) => {
+                        // @ts-ignore
+                        if (error.statusCode >= 400 && error.statusCode <= 499) {
+                          return false
+                        }
+                        return failureCount < 4
+                      },
                     }
                   }
                 }
-              }}
-            >
+              }
+            }}
+          >
+            <I18nTheme>
               <Routes>
                 <Route
                   element={(
@@ -95,10 +94,10 @@ function App() {
               </Routes>
               <UnsavedChangesNotifier />
               <DocumentTitleHandler />
-            </Refine>
-          </RefineSnackbarProvider>
-        </ColorModeContextProvider>
-      </ThemeProvider>
+            </I18nTheme>
+          </Refine>
+        </RefineSnackbarProvider>
+      </ColorModeContextProvider>
     </BrowserRouter>
   );
 }