Regroup Styles settings into Your Styles and Shared Styles groups

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}

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>
 

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>

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>

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", () => {

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"}

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