Refactor the UI for light mode is at an acceptable point

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}"},
-      fontSize: "xl",
+
+      transition: "background-color 0.4s ease, color 0.4s ease",
+
+      "& 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"} },