Converted to Material UI v7 - bare.

src/App.jsx

@@ -1,4 +1,12 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
+import {
+  ThemeProvider,
+  createTheme,
+  CssBaseline,
+  Box,
+  Container,
+} from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import MainPage from "./components/MainPage";
@@ -65,39 +73,22 @@ function App() {
     return newKey;
   });
 
-  // Theme management
-  useEffect(() => {
-    const applyTheme = (selectedTheme) => {
-      const effectiveTheme =
-        selectedTheme === "auto"
-          ? window.matchMedia &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark"
-            : "light"
-          : selectedTheme;
+  const getApiHeaders = () => ({
+    "Accept": "application/json",
+    "x-api-key": apiKey,
+  });
 
-      document.documentElement.setAttribute("data-bs-theme", effectiveTheme);
-    };
-
-    applyTheme(theme);
-
-    // Save theme preference
-    localStorage.setItem("theme", theme);
-  }, [theme]);
-
-  // Shell type management
-  useEffect(() => {
-    localStorage.setItem("jmespath-shell-type", shellType);
-  }, [shellType]);
-
-  // Get headers for API requests
-  const getApiHeaders = () => {
-    return {
-      Accept: "application/json",
-      "X-API-Key": apiKey,
-    };
-  };
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 
+  const muiTheme = useMemo(() => {
+    return createTheme({
+      cssVariables: true,
+      colorSchemes: {
+        light: true,
+        dark: true,
+      },
+    });
+  }, []);
   // Load sample data from API on startup and setup periodic state checking
   useEffect(() => {
     loadSampleData();
@@ -172,41 +163,56 @@ function App() {
   };
 
   return (
-    <div className="vh-100 d-flex flex-column">
-      <Header
-        theme={theme}
-        onThemeChange={handleThemeChange}
-        currentPage={currentPage}
-        onPageChange={handlePageChange}
-      />
-
-      {/* Main Content Section - flex-grow to fill space */}
-      <div
-        className="container-fluid flex-grow-1 d-flex flex-column"
-        style={{ minHeight: 0 }}
+    <ThemeProvider theme={muiTheme}>
+      <CssBaseline />
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "100vh",
+          bgcolor: "background.default",
+        }}
       >
-        {currentPage === "main" ? (
-          <MainPage
-            apiKey={apiKey}
-            showReloadButton={showReloadButton}
-            onReloadSampleData={loadSampleData}
-            jmespathExpression={jmespathExpression}
-            setJmespathExpression={setJmespathExpression}
-            jsonData={jsonData}
-            setJsonData={setJsonData}
-          />
-        ) : (
-          <ApiKeyPage
-            apiKey={apiKey}
-            onRegenerateApiKey={regenerateApiKey}
-            shellType={shellType}
-            onShellTypeChange={setShellType}
-          />
-        )}
-      </div>
+        <Header
+          theme={theme}
+          onThemeChange={handleThemeChange}
+          currentPage={currentPage}
+          onPageChange={handlePageChange}
+        />
 
-      <Footer />
-    </div>
+        {/* Main Content Section - flex-grow to fill space */}
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0,
+          }}
+        >
+          {currentPage === "main" ? (
+            <MainPage
+              apiKey={apiKey}
+              showReloadButton={showReloadButton}
+              onReloadSampleData={loadSampleData}
+              jmespathExpression={jmespathExpression}
+              setJmespathExpression={setJmespathExpression}
+              jsonData={jsonData}
+              setJsonData={setJsonData}
+            />
+          ) : (
+            <ApiKeyPage
+              apiKey={apiKey}
+              onRegenerateApiKey={regenerateApiKey}
+              shellType={shellType}
+              onShellTypeChange={setShellType}
+            />
+          )}
+        </Box>
+
+        <Footer />
+      </Box>
+    </ThemeProvider>
   );
 }