Refactor the UI for light mode is at an acceptable point

client/src/components/layout/Sidebar.jsx

@@ -3,7 +3,7 @@ import { ColorModeButton } from "@/components/ui/color-mode.jsx";
 import { useState } from "react";
 import { NavLink } from "react-router-dom";
 import Tooltip from "../ui/Tooltip.jsx";
-import { Mountain, House, Earth, MapPin, ShieldUser, Menu } from 'lucide-react';
+import { Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 
 const SIDEBAR_DEFAULT_BUTTONS = [
   { icon: House, name: "Home", url: "/home" },
@@ -26,7 +26,7 @@ export default function Sidebar() {
   return (
       <Box
           css={styles.root}
-          width={isOpen ? "210px" : "71px"}
+          width={isOpen ? "190px" : "71px"}
           transition="width 0.4s ease"
           position="relative"
           display="flex"
@@ -51,31 +51,20 @@ export default function Sidebar() {
           {isOpen ? "🌋 VDAP" : "🌋"}
         </Button>
 
-        {/* Menu Trigger */}
+
-        <IconButton
-            aria-label="Toggle Sidebar"
-            variant="plain"
-            size="md"
-            onClick={toggleSidebar}
-            width="54px"
-            alignSelf={isOpen ? "flex-start" : "center"} // Center the icon when collapsed
-            ml={isOpen ? 3 : 0} // Align with other buttons when open
-        >
-          <Menu />
-        </IconButton>
 
         {/* Navigation Buttons */}
         {visibleButtons.map((button) => {
           const Icon = button.icon;
           return (
-              <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
+              // <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
                 <Button
                     as={NavLink}
                     to={button.url}
                     css={styles.buttons}
                     justifyContent="flex-start"
                     width="100%"
-                    overflow="hidden" // Prevents text popout on collapse
+                    // overflow="hidden" // Prevents text popout on collapse
                 >
                   <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
 
@@ -91,17 +80,34 @@ export default function Sidebar() {
                     {button.name}
                   </Box>
                 </Button>
-              </Tooltip>
+              // </Tooltip>
           );
         })}
+        <Box
+            mt="auto"
+            display="flex"
+            flexDirection={isOpen ? "row" : "column-reverse"}
+            justifyContent="center"
+            alignItems="center"
+            gap={isOpen ? 16 : 2}
+            pb={4}
+            pr={2}
+            transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
+        >
+          {/* Menu Trigger */}
+          <IconButton
+              aria-label="Toggle Sidebar"
+              variant="plain"
+              size="md"
+              onClick={toggleSidebar}
+              transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
+          >
+            {isOpen ? <PanelLeftClose style={{ flexShrink: 0 }} /> : <PanelLeftOpen style={{ flexShrink: 0 }} />}
+          </IconButton>
 
           {/* Theme Toggler */}
-        <ColorModeButton
+          <ColorModeButton />
-            position="absolute"
+        </Box>
-            bottom="4"
-            left={isOpen ? "4" : "50%"} // Center the toggle when collapsed
-            transform={isOpen ? "none" : "translateX(-50%)"} // Exact centering logic
-        />
       </Box>
   );
 }

client/src/constants/widgetRegistry.jsx

@@ -78,7 +78,7 @@ export const WIDGET_REGISTRY = {
 
         // The baseline data every new VAA widget starts with
         defaultSettings: {
-            yAxisScale: 'normal' // Options: 'normal' | 'symlog'
+            yAxisScale: 'log' // Options: 'normal' | 'symlog'
         },
         allowedSizes: {
             medium:  { w: 6, h: 12 }

client/src/theme.js

@@ -33,38 +33,107 @@ const sidebarRecipe = defineSlotRecipe({
   base: {
     root: {
       // 1. Semi-transparent backgrounds
-      bg: { base: "linear-gradient(to bottom right, #BBBBBB4C, #FFFFFF4C)", _dark: "rgba(20, 20, 20, 0.4)" },
+      bg: { base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", _dark: "rgba(20, 20, 20, 0.4)" },
 
       // 2. The glass blur effect
       backdropFilter: "blur(12px)",
-      WebkitBackdropFilter: "blur(12px)", // For Safari compatibility
+      WebkitBackdropFilter: "blur(12px)",
 
-      // 3. Subtle semi-transparent borders to catch the light
+      // 3. Subtle semi-transparent borders
       border: "1px solid",
-      borderColor: { base: "rgba(255, 255, 255, 0.3)", _dark: "rgba(255, 255, 255, 0.1)" },
+      borderColor: { base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)" },
+
+      // CRITICAL: Remove the right border so it doesn't draw a line through your cutout
+      borderRight: "none",
 
-      // Your existing layout properties
       borderRadius: "2xl",
-      boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)", // A softer shadow helps the glass pop
+      // boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
+      // boxShadow: "-10px 4px 30px rgba(0, 0, 0, 0.1)",
       width: "100%",
       height: "calc(100% - 16px)",
       margin: "8px",
       display: "flex",
       flexDirection: "column",
       justifyContent: "start",
-      alignItems: "start",
+      alignItems: "stretch",
       gap: 2,
-      p: 2,
+
+      // CRITICAL: Adjust padding and overflow to allow the button to touch the right edge
+      pl: 2, // Keep left padding
+      py: 2, // Keep top/bottom padding
+      pr: 0, // Remove right padding
+      overflow: "visible", // Allows the curved corner patches to render outside the button
       zIndex: 10,
     },
     buttons: {
+      position: "relative", // Required to anchor the corner patches
       bg: "transparent",
-      _hover: {bg: "{testButton}", color: "{textInverted}"},
+
-      "&.active": {bg: "{testButton}", color: "{textInverted}"},
+      transition: "background-color 0.4s ease, color 0.4s ease",
-      fontSize: "xl",
+
+      "& svg": {
+        transition: "stroke-width 0.4s ease"
+      },
+
+      _hover: {
+        bg: "rgba(255, 255, 255, 0.1)",
+        color: "{text}",
+        fontWeight: "semibold",
+        "& svg": {
+          strokeWidth: "3"
+        }
+      },
+
+      fontSize: "l",
       color: {base: "{text}"},
       variant: "ghost",
       width: "100%",
+
+      // Flat on the right, rounded on the left
+      borderRightRadius: "0",
+      borderLeftRadius: "4xl",
+
+      "&.active": {
+        bg: "{testBackground}",
+        color: "{textInverted}",
+
+        _hover: {
+          bg: "{testBackground}",
+          color: "{textInverted}",
+          fontWeight: "normal",
+          "& svg": {
+            strokeWidth: "2" // Keeps the active icon at normal thickness on hover
+          }
+        },
+
+        // The Top Inverted Curve
+        _before: {
+          content: '""',
+          position: "absolute",
+          right: "-1px",
+          top: "-25px",
+          width: "25px",
+          height: "25px",
+          bg: "inherit", // This forces the curve to match {testButton}
+          WebkitMaskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
+          maskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
+          pointerEvents: "none",
+        },
+
+        // The Bottom Inverted Curve
+        _after: {
+          content: '""',
+          position: "absolute",
+          right: "-1px",
+          bottom: "-25px",
+          width: "25px",
+          height: "25px",
+          bg: "inherit",
+          WebkitMaskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
+          maskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
+          pointerEvents: "none",
+        }
+      },
     },
   }
 });
@@ -192,7 +261,7 @@ const config = defineConfig({
         text: {value: {base: "#000000", _dark: "lightgrey"}},
         textInverted: {value: "#000000"},
         icon: {value: {base: "#000000", _dark: "lightgrey"}},
-        testBackground: { value: {base: "linear-gradient(to bottom right, #BBBBBB, #FFFFFF)", _dark: "#191613"} },
+        testBackground: { value: {base: "#F9F9F9", _dark: "#191613"} },
         testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} },
         testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} },