From 8470347579341bffb3403ce4064ee59bef775d29 Mon Sep 17 00:00:00 2001
From: ankitkr104 <itx.ankit.kr@gmail.com>
Date: Sat, 11 Apr 2026 12:51:03 +0530
Subject: [PATCH] fix: align shape builder controls with Sistent defaults
 (#147)

---
 site/src/components/ShapeBuilder/index.js | 38 ++++++++++++++++++-----
 site/src/pages/index.js                   |  6 ++--
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/site/src/components/ShapeBuilder/index.js b/site/src/components/ShapeBuilder/index.js
index 5ab1d15..1479288 100644
--- a/site/src/components/ShapeBuilder/index.js
+++ b/site/src/components/ShapeBuilder/index.js
@@ -10,6 +10,8 @@ SVGextend(SVG.Polygon, draw);
 const SCALE_PRESETS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3];
 const MIN_SCALE = 0.1;
 const MAX_SCALE = 3;
+const CONTROL_HEIGHT = "3.5rem";
+const CONTROL_FONT_SIZE = "1.35rem";
 
 const ShapeBuilder = () => {
   const boardRef = useRef(null);
@@ -248,26 +250,46 @@ const ShapeBuilder = () => {
       </CanvasContainer>
 
       <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 2, mt: 3, mb: 3, flexWrap: "wrap" }}>
-        <Button variant="contained" onClick={clearShape}>Clear</Button>
-        <Button variant="contained" onClick={closeShape}>Close Shape</Button>
+        <Button variant="contained" onClick={clearShape} sx={{ height: CONTROL_HEIGHT, px: 3, textTransform: "none", fontSize: CONTROL_FONT_SIZE }}>Clear</Button>
+        <Button variant="contained" onClick={closeShape} sx={{ height: CONTROL_HEIGHT, px: 3, textTransform: "none", fontSize: CONTROL_FONT_SIZE }}>Close Shape</Button>
 
         <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, ml: 2 }}>
-          <FormControl size="small" sx={{ minWidth: 80 }}>
+          <FormControl sx={{ minWidth: 96 }}>
             <Select
               id="scale-preset-select"
+              variant="outlined"
               value={currentPreset}
               onChange={handlePresetChange}
               displayEmpty
               aria-label="Scale preset"
               sx={{
-                color: "#fff",
+                height: CONTROL_HEIGHT,
+                fontSize: CONTROL_FONT_SIZE,
+                backgroundColor: "transparent",
+                color: "primary.main",
+                "& .MuiSelect-select": {
+                  minHeight: "unset",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: CONTROL_FONT_SIZE,
+                },
+                "& .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "primary.main",
+                },
+                "&:hover .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "primary.main",
+                },
+                "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "primary.main",
+                },
                 "& .MuiSelect-icon": {
-                  color: "#fff"
-                }
+                  color: "primary.main",
+                },
               }}
             >
               {SCALE_PRESETS.map((preset) => (
-                <MenuItem key={preset} value={preset}>
+                <MenuItem key={preset} value={preset} sx={{ fontSize: CONTROL_FONT_SIZE }}>
                   {preset}×
                 </MenuItem>
               ))}
@@ -289,7 +311,7 @@ const ShapeBuilder = () => {
             />
           </Box>
 
-          <Typography variant="body2" sx={{ minWidth: "50px", fontWeight: 500 }}>
+          <Typography variant="body2" sx={{ minWidth: "50px", fontWeight: 500, fontSize: CONTROL_FONT_SIZE }}>
             {scale.toFixed(2)}×
           </Typography>
         </Box>
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
index 44232e4..1f16b9d 100644
--- a/site/src/pages/index.js
+++ b/site/src/pages/index.js
@@ -5,7 +5,7 @@ import { useDarkMode } from "../components/useDarkMode";
 import Navigation from "../components/Navigation";
 import Footer from "../components/Footer";
 import ShapeBuilder from "../components/ShapeBuilder";
-import { SistentThemeProviderWithoutBaseLine, Box } from "@sistent/sistent";
+import { SistentThemeProvider, Box } from "@sistent/sistent";
 
 const Kbd = styled.kbd`
   background-color: ${({ theme }) =>
@@ -60,7 +60,7 @@ const IndexPage = () => {
   const activeTheme = { ...themeMode, mode: theme };
 
   return (
-    <SistentThemeProviderWithoutBaseLine>
+    <SistentThemeProvider key={theme} initialMode={theme}>
       <ThemeProvider theme={activeTheme}>
         <GlobalStyle />
         <Navigation theme={theme} toggleTheme={toggleTheme} />
@@ -113,7 +113,7 @@ const IndexPage = () => {
         </Main>
         <Footer />
       </ThemeProvider>
-    </SistentThemeProviderWithoutBaseLine>
+    </SistentThemeProvider>
   );
 };