From cb74f0dabc48b722f20156168043bff0b34b4e48 Mon Sep 17 00:00:00 2001
From: Kris McGinnes <kmcginnes@me.com>
Date: Wed, 8 Jul 2026 17:32:58 -0500
Subject: [PATCH 1/2] Regroup Styles settings into Your Styles and Shared
 Styles groups

Split the single Style Sharing / Danger Zone layout into two action groups
mirroring General settings' Manage Configuration Data group. Buttons drop to
single words (Save, Load, Reset) now that the group titles say what they act
on; each Reset button keeps a distinct aria-label so the two are
distinguishable to screen readers.

Part of #1898
---
 .../src/routes/Settings/LoadStylesButton.tsx  |  2 +-
 .../Settings/ResetCustomStylesButton.tsx      |  8 +++--
 .../Settings/ResetSharedStylesButton.tsx      |  8 +++--
 .../routes/Settings/SaveStylesButton.test.tsx |  2 +-
 .../src/routes/Settings/SaveStylesButton.tsx  |  2 +-
 .../src/routes/Settings/SettingsStyles.tsx    | 36 +++++++++----------
 6 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/packages/graph-explorer/src/routes/Settings/LoadStylesButton.tsx b/packages/graph-explorer/src/routes/Settings/LoadStylesButton.tsx
index 0583025c1..d768dbc11 100644
--- a/packages/graph-explorer/src/routes/Settings/LoadStylesButton.tsx
+++ b/packages/graph-explorer/src/routes/Settings/LoadStylesButton.tsx
@@ -167,7 +167,7 @@ export default function LoadStylesButton() {
       >
         <Button className="min-w-28" disabled={isPending}>
           <UploadIcon />
-          Load from File
+          Load
         </Button>
       </FileButton>
 
diff --git a/packages/graph-explorer/src/routes/Settings/ResetCustomStylesButton.tsx b/packages/graph-explorer/src/routes/Settings/ResetCustomStylesButton.tsx
index ec90a4cf6..e0dbab1f1 100644
--- a/packages/graph-explorer/src/routes/Settings/ResetCustomStylesButton.tsx
+++ b/packages/graph-explorer/src/routes/Settings/ResetCustomStylesButton.tsx
@@ -31,9 +31,13 @@ export default function ResetCustomStylesButton() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button variant="danger" className="min-w-28">
+        <Button
+          variant="danger"
+          className="min-w-28"
+          aria-label="Reset your styles"
+        >
           <Trash2Icon />
-          Reset Your Styles
+          Reset
         </Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
diff --git a/packages/graph-explorer/src/routes/Settings/ResetSharedStylesButton.tsx b/packages/graph-explorer/src/routes/Settings/ResetSharedStylesButton.tsx
index c66921c8d..134595a48 100644
--- a/packages/graph-explorer/src/routes/Settings/ResetSharedStylesButton.tsx
+++ b/packages/graph-explorer/src/routes/Settings/ResetSharedStylesButton.tsx
@@ -31,9 +31,13 @@ export default function ResetSharedStylesButton() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button variant="danger" className="min-w-28">
+        <Button
+          variant="danger"
+          className="min-w-28"
+          aria-label="Reset shared styles"
+        >
           <Trash2Icon />
-          Reset Shared Styles
+          Reset
         </Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
diff --git a/packages/graph-explorer/src/routes/Settings/SaveStylesButton.test.tsx b/packages/graph-explorer/src/routes/Settings/SaveStylesButton.test.tsx
index 199e22494..a59830f01 100644
--- a/packages/graph-explorer/src/routes/Settings/SaveStylesButton.test.tsx
+++ b/packages/graph-explorer/src/routes/Settings/SaveStylesButton.test.tsx
@@ -32,7 +32,7 @@ function renderButton() {
 }
 
 function saveButton() {
-  return screen.getByRole("button", { name: "Save to File" });
+  return screen.getByRole("button", { name: "Save" });
 }
 
 describe("SaveStylesButton", () => {
diff --git a/packages/graph-explorer/src/routes/Settings/SaveStylesButton.tsx b/packages/graph-explorer/src/routes/Settings/SaveStylesButton.tsx
index 0bb95748f..02bb38bca 100644
--- a/packages/graph-explorer/src/routes/Settings/SaveStylesButton.tsx
+++ b/packages/graph-explorer/src/routes/Settings/SaveStylesButton.tsx
@@ -94,7 +94,7 @@ export default function SaveStylesButton() {
         disabled={isPending}
       >
         <DownloadIcon />
-        Save to File
+        Save
       </Button>
       <AlertDialog
         open={state.kind !== "closed"}
diff --git a/packages/graph-explorer/src/routes/Settings/SettingsStyles.tsx b/packages/graph-explorer/src/routes/Settings/SettingsStyles.tsx
index 028d50931..d8d7b380a 100644
--- a/packages/graph-explorer/src/routes/Settings/SettingsStyles.tsx
+++ b/packages/graph-explorer/src/routes/Settings/SettingsStyles.tsx
@@ -1,11 +1,10 @@
 import { useAtomValue } from "jotai";
-import { SwatchBookIcon, TriangleAlertIcon } from "lucide-react";
+import { SwatchBookIcon } from "lucide-react";
 
 import {
   Group,
   GroupHeader,
   GroupItem,
-  GroupMedia,
   GroupTitle,
   LabelledSetting,
   SettingsPageDescription,
@@ -43,7 +42,7 @@ export default function SettingsStyles() {
 
       <Group>
         <GroupHeader>
-          <GroupTitle>Style Sharing</GroupTitle>
+          <GroupTitle>Manage Your Styles</GroupTitle>
         </GroupHeader>
         <GroupItem>
           <LabelledSetting
@@ -53,34 +52,31 @@ export default function SettingsStyles() {
             <SaveStylesButton />
           </LabelledSetting>
         </GroupItem>
-        <GroupItem className="space-y-2">
+        <GroupItem>
           <LabelledSetting
-            label="Load shared styles"
-            description="Load styles from a file into your shared styles. New types are added and matching ones are replaced; your own styles are left untouched."
+            label="Reset your styles"
+            description="Clear the styles you've set yourself. Shared styles remain."
           >
-            <LoadStylesButton />
+            <ResetCustomStylesButton />
           </LabelledSetting>
-          <SharedStylesStatus
-            vertexCount={sharedVertexStyles.size}
-            edgeCount={sharedEdgeStyles.size}
-          />
         </GroupItem>
       </Group>
 
-      <Group variant="danger">
+      <Group>
         <GroupHeader>
-          <GroupMedia>
-            <TriangleAlertIcon />
-          </GroupMedia>
-          <GroupTitle>Danger Zone</GroupTitle>
+          <GroupTitle>Manage Shared Styles</GroupTitle>
         </GroupHeader>
-        <GroupItem>
+        <GroupItem className="space-y-2">
           <LabelledSetting
-            label="Reset your styles"
-            description="Clear the styles you've set yourself. Shared styles remain."
+            label="Load shared styles"
+            description="Load styles from a file into your shared styles. New types are added and matching ones are replaced; your own styles are left untouched."
           >
-            <ResetCustomStylesButton />
+            <LoadStylesButton />
           </LabelledSetting>
+          <SharedStylesStatus
+            vertexCount={sharedVertexStyles.size}
+            edgeCount={sharedEdgeStyles.size}
+          />
         </GroupItem>
         <GroupItem>
           <LabelledSetting

From f8dff4b6cffbc6673e48d573f57496dfd80cd1ed Mon Sep 17 00:00:00 2001
From: Kris McGinnes <kmcginnes@me.com>
Date: Wed, 8 Jul 2026 18:45:07 -0500
Subject: [PATCH 2/2] Drop the unused danger variant from Group

The Styles settings regroup removed the last Group danger variant usage; drop
the now-dead variant and its header styling. It can be reintroduced if a danger
grouping is needed again.

Part of #1898
---
 packages/graph-explorer/src/components/Group.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/graph-explorer/src/components/Group.tsx b/packages/graph-explorer/src/components/Group.tsx
index e8edb8d50..ceb268809 100644
--- a/packages/graph-explorer/src/components/Group.tsx
+++ b/packages/graph-explorer/src/components/Group.tsx
@@ -7,7 +7,6 @@ const groupVariants = cva({
   variants: {
     variant: {
       default: "border-border divide-border",
-      danger: "border-danger-foreground/25 divide-danger-foreground/25",
       success: "border-success-foreground/25 divide-success-foreground/25",
       warning: "border-warning-foreground/25 divide-warning-foreground/25",
     },
@@ -38,7 +37,7 @@ function GroupHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       className={cn(
-        "bg-neutral-subtle/50 text-text-secondary group-data-[variant=danger]/group:bg-danger-subtle/50 group-data-[variant=danger]/group:text-danger group-data-[variant=success]/group:bg-success-subtle/50 group-data-[variant=success]/group:text-success-main group-data-[variant=warning]/group:bg-warning-subtle/50 group-data-[variant=warning]/group:text-warning-main flex items-center gap-2 px-5 py-3 group-data-[size=small]/group:px-3 group-data-[size=small]/group:py-2",
+        "bg-neutral-subtle/50 text-text-secondary group-data-[variant=success]/group:bg-success-subtle/50 group-data-[variant=success]/group:text-success-main group-data-[variant=warning]/group:bg-warning-subtle/50 group-data-[variant=warning]/group:text-warning-main flex items-center gap-2 px-5 py-3 group-data-[size=small]/group:px-3 group-data-[size=small]/group:py-2",
         className,
       )}
       {...props}