Converted to Material UI v7 - bare.

src/components/Header.jsx

@@ -1,72 +1,89 @@
-import React from 'react';
+import React from "react";
+import {
+  Box,
+  Typography,
+  Button,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  AppBar,
+  Toolbar,
+  Container,
+  Divider,
+} from "@mui/material";
+import KeyIcon from "@mui/icons-material/Key";
+import HomeIcon from "@mui/icons-material/Home";
+import BrightnessAutoIcon from "@mui/icons-material/BrightnessAuto";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
 
 function Header({ theme, onThemeChange, currentPage, onPageChange }) {
   return (
-    <div className="header-section">
-      <div className="container-fluid px-4">
-        <div className="row align-items-center">
-          <div className="col-12 text-center position-relative">
-            <h2 className="mb-1">JMESPath Testing Tool</h2>
-            {/* Right side controls - better positioning */}
-            <div className="position-absolute top-50 end-0 translate-middle-y d-flex align-items-center gap-2 me-4">
-              {/* API Key Management Button - more prominent */}
-              <button
-                type="button"
-                className={`btn btn-sm ${
-                  currentPage === 'apikey' 
-                    ? 'btn-warning fw-bold text-dark' 
-                    : 'btn-outline-warning'
-                }`}
-                onClick={() => onPageChange(currentPage === 'main' ? 'apikey' : 'main')}
-                title="API Key Management"
+    <AppBar position="static" color="default" elevation={1} sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <Container maxWidth="xl">
+        <Toolbar disableGutters sx={{ display: "flex", justifyContent: "space-between", height: 64 }}>
+          {/* Brand/Title */}
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <Typography
+              variant="h6"
+              noWrap
+              component="div"
+              sx={{
+                fontWeight: 700,
+                color: "primary.main",
+                letterSpacing: ".05rem",
+              }}
+            >
+              JMESPath Playground
+            </Typography>
+          </Box>
+
+          {/* Right side controls */}
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            {/* API Key Management Button */}
+            <Tooltip title={currentPage === "main" ? "API Key Management" : "Back to Testing"}>
+              <Button
+                variant={currentPage === "apikey" ? "contained" : "text"}
+                color={currentPage === "apikey" ? "primary" : "primary"}
+                size="medium"
+                startIcon={currentPage === "main" ? <KeyIcon /> : <HomeIcon />}
+                onClick={() => onPageChange(currentPage === "main" ? "apikey" : "main")}
               >
-                🔐 API Keys
-              </button>
-              {/* Theme switcher with theme-aware classes */}
-              <div className="btn-group btn-group-sm" role="group" aria-label="Theme switcher">
-                <button
-                  type="button"
-                  className={`btn ${
-                    theme === 'auto' 
-                      ? 'btn-light active' 
-                      : 'btn-outline-light'
-                  }`}
-                  onClick={() => onThemeChange('auto')}
-                  title="Auto (follow system)"
-                >
-                  🌓 Auto
-                </button>
-                <button
-                  type="button"
-                  className={`btn ${
-                    theme === 'light' 
-                      ? 'btn-light active' 
-                      : 'btn-outline-light'
-                  }`}
-                  onClick={() => onThemeChange('light')}
-                  title="Light theme"
-                >
-                  ☀️ Light
-                </button>
-                <button
-                  type="button"
-                  className={`btn ${
-                    theme === 'dark' 
-                      ? 'btn-light active' 
-                      : 'btn-outline-light'
-                  }`}
-                  onClick={() => onThemeChange('dark')}
-                  title="Dark theme"
-                >
-                  🌙 Dark
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+                {currentPage === "main" ? "API Keys" : "Home"}
+              </Button>
+            </Tooltip>
+
+            <Divider orientation="vertical" flexItem sx={{ my: 2, mx: 1 }} />
+
+            {/* Theme switcher */}
+            <ToggleButtonGroup
+              value={theme}
+              exclusive
+              onChange={(e, nextTheme) => nextTheme && onThemeChange(nextTheme)}
+              aria-label="theme switcher"
+              size="small"
+            >
+              <Tooltip title="Follow system theme">
+                <ToggleButton value="auto" aria-label="Auto">
+                  <BrightnessAutoIcon sx={{ fontSize: "1.2rem" }} />
+                </ToggleButton>
+              </Tooltip>
+              <Tooltip title="Light mode">
+                <ToggleButton value="light" aria-label="Light">
+                  <LightModeIcon sx={{ fontSize: "1.2rem" }} />
+                </ToggleButton>
+              </Tooltip>
+              <Tooltip title="Dark mode">
+                <ToggleButton value="dark" aria-label="Dark">
+                  <DarkModeIcon sx={{ fontSize: "1.2rem" }} />
+                </ToggleButton>
+              </Tooltip>
+            </ToggleButtonGroup>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
   );
 }
 
-export default Header;
+export default Header;