Update sidebar style

Changelog.md

@@ -2,6 +2,8 @@
 
 ## Upcoming
 
+- **Improved** style for the sidebar buttons
+  [#651](https://github.com/aws/graph-explorer/pull/651)
 - **Fixed** Docker image containing more files than necessary.
   ([#613](https://github.com/aws/graph-explorer/pull/613))
 - **Fixed** conflict when a node has a property named "id" that prevented

packages/graph-explorer/package.json

@@ -25,6 +25,7 @@
     "@mantine/dates": "^7.13.2",
     "@mantine/emotion": "^7.13.2",
     "@mantine/hooks": "^7.13.2",
+    "@radix-ui/react-toggle": "^1.1.0",
     "@react-aria/button": "3.9.8",
     "@react-aria/checkbox": "3.14.6",
     "@react-aria/combobox": "3.10.3",

packages/graph-explorer/src/components/Workspace/components/SidebarButton.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { Tooltip } from "../../Tooltip";
+import { cn } from "@/utils";
+
+const SidebarButton = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & {
+    icon: React.ReactElement;
+    title: React.ReactNode;
+    badge?: boolean;
+  }
+>(({ icon, title, badge = false, className, children, ...props }, ref) => {
+  return (
+    <Badge value={badge}>
+      <Tooltip text={title} placement="left-center" delayEnter={300}>
+        <TogglePrimitive.Root
+          ref={ref}
+          className={cn(
+            "text-brand-900 data-[state=on]:bg-brand-500 active:bg-brand-300 inline-flex size-10 items-center justify-center rounded-md bg-transparent p-2 ring-0 transition-colors duration-150 focus:shadow-none active:text-white disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-white [&_svg]:size-6",
+            "hover:bg-brand-200/50 hover:text-primary-dark hover:data-[state=on]:bg-brand-400",
+            "focus-visible:ring-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 active:ring-0",
+            className
+          )}
+          {...props}
+        >
+          {icon}
+          {children}
+          <span className="sr-only">{title}</span>
+        </TogglePrimitive.Root>
+      </Tooltip>
+    </Badge>
+  );
+});
+
+function Badge({
+  children,
+  value,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & { value?: boolean }) {
+  return (
+    <div className="stack" aria-hidden {...props}>
+      {children}
+      {value ? (
+        <span
+          aria-description="badge"
+          className="bg-error-main pointer-events-none -mr-0.5 -mt-0.5 size-2.5 place-self-start justify-self-end rounded-full"
+        />
+      ) : null}
+    </div>
+  );
+}
+
+SidebarButton.displayName = "SidebarButton";
+
+export { SidebarButton };

packages/graph-explorer/src/components/Workspace/components/WorkspaceSideBar.tsx

@@ -3,8 +3,7 @@ import type { PropsWithChildren, ReactElement } from "react";
 import { useMemo } from "react";
 import getChildOfType from "@/utils/getChildOfType";
 import getChildrenOfType from "@/utils/getChildrenOfType";
-import Sidebar from "@/components/Sidebar";
-import SidebarButton from "@/components/Sidebar/SidebarButton";
+import { SidebarButton } from "@/components/Workspace/components/SidebarButton";
 import WorkspaceSideBarContent from "./WorkspaceSideBarContent";
 
 interface WorkspaceSideBarComposition {
@@ -43,7 +42,9 @@ const WorkspaceSideBar = ({
         direction === "row-reverse" && "flex-row-reverse"
       )}
     >
-      <Sidebar>{sidebarActions}</Sidebar>
+      <div className="bg-brand-100 text-brand-900 flex flex-col gap-2 p-2">
+        {sidebarActions}
+      </div>
       {sidebarContent}
     </div>
   );

packages/graph-explorer/src/components/index.ts

@@ -61,9 +61,6 @@ export * from "./Section";
 export { default as Select } from "./Select";
 export * from "./Select";
 
-export { default as Sidebar } from "./Sidebar";
-export * from "./Sidebar";
-
 export * from "./Tooltip";
 export * from "./Typography";
 

packages/graph-explorer/src/core/ThemeProvider/themes/light.ts

@@ -20,9 +20,9 @@ const palette: DeepRequired<ProcessedTheme["palette"]> = {
     black: "#000",
   },
   primary: {
-    light: "#64c7ff",
-    main: "#128ee5",
-    dark: "#17457b",
+    light: "hsl(var(--color-brand-300))",
+    main: "hsl(var(--color-brand-500))",
+    dark: "hsl(var(--color-brand-800))",
     contrastText: "#ffffff",
   },
   secondary: {

packages/graph-explorer/src/core/ThemeProvider/utils/fade.tsx

@@ -1,9 +1,3 @@
-import Color from "color";
-
-const fade = (color: string | undefined, opacity: number) => {
-  const colorInstance = new Color(color);
-  const rgb = colorInstance.rgb().array();
-  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;
-};
-
-export default fade;
+export default function fade(color: string | undefined, opacity: number) {
+  return `color-mix(in srgb, ${color} ${opacity * 100}%, transparent)`;
+}

packages/graph-explorer/src/index.css

@@ -26,9 +26,17 @@
     --color-background-contrast: var(--color-gray-200);
     --color-background-contrast-secondary: var(--color-gray-300);
 
-    --color-primary-light: 100 199 255;
-    --color-primary-main: 18 142 229;
-    --color-primary-dark: 23 69 123;
+    --color-brand-50: 205deg 87% 95%;
+    --color-brand-100: 205deg 87% 93%;
+    --color-brand-200: 205deg 87% 82%;
+    --color-brand-300: 205deg 95% 71%;
+    --color-brand-400: 205deg 87% 57%;
+    --color-brand-500: 205deg 85% 48%;
+    --color-brand-600: 205deg 87% 39%;
+    --color-brand-700: 205deg 89% 31%;
+    --color-brand-800: 205deg 92% 24%;
+    --color-brand-900: 205deg 95% 12%;
+    --color-brand-950: 205deg 98% 6%;
 
     --color-secondary-light: 255 184 46;
     --color-secondary-main: 250 133 0;
@@ -83,6 +91,16 @@
   }
 }
 
+@layer utilities {
+  .stack {
+    display: grid;
+  }
+
+  .stack > * {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.tsx

@@ -274,44 +274,42 @@ const GraphExplorer = () => {
 
       <Workspace.SideBar direction={"row"}>
         <Workspace.SideBar.Button
-          tooltipText={"Details"}
+          title="Details"
           icon={<DetailsIcon />}
-          onPress={toggleSidebar("details")}
-          active={userLayout.activeSidebarItem === "details"}
+          onPressedChange={toggleSidebar("details")}
+          pressed={userLayout.activeSidebarItem === "details"}
         />
         <Workspace.SideBar.Button
-          tooltipText={"Filters"}
+          title="Filters"
           icon={<FilterIcon />}
-          onPress={toggleSidebar("filters")}
-          badge={filteredEntitiesCount}
-          badgeVariant="undetermined"
-          badgePlacement="top-right"
-          active={userLayout.activeSidebarItem === "filters"}
+          onPressedChange={toggleSidebar("filters")}
+          badge={filteredEntitiesCount > 0}
+          pressed={userLayout.activeSidebarItem === "filters"}
         />
         <Workspace.SideBar.Button
-          tooltipText={"Expand"}
+          title="Expand"
           icon={<ExpandGraphIcon />}
-          onPress={toggleSidebar("expand")}
-          active={userLayout.activeSidebarItem === "expand"}
+          onPressedChange={toggleSidebar("expand")}
+          pressed={userLayout.activeSidebarItem === "expand"}
         />
         <Workspace.SideBar.Button
-          tooltipText={t("nodes-styling.title")}
+          title={t("nodes-styling.title")}
           icon={<GraphIcon />}
-          onPress={toggleSidebar("nodes-styling")}
-          active={userLayout.activeSidebarItem === "nodes-styling"}
+          onPressedChange={toggleSidebar("nodes-styling")}
+          pressed={userLayout.activeSidebarItem === "nodes-styling"}
         />
         <Workspace.SideBar.Button
-          tooltipText={t("edges-styling.title")}
+          title={t("edges-styling.title")}
           icon={<EdgeIcon />}
-          onPress={toggleSidebar("edges-styling")}
-          active={userLayout.activeSidebarItem === "edges-styling"}
+          onPressedChange={toggleSidebar("edges-styling")}
+          pressed={userLayout.activeSidebarItem === "edges-styling"}
         />
         {hasNamespaces && (
           <Workspace.SideBar.Button
-            tooltipText={"Namespaces"}
+            title="Namespaces"
             icon={<NamespaceIcon />}
-            onPress={toggleSidebar("namespaces")}
-            active={userLayout.activeSidebarItem === "namespaces"}
+            onPressedChange={toggleSidebar("namespaces")}
+            pressed={userLayout.activeSidebarItem === "namespaces"}
           />
         )}