From b12debf373462d930d6b4f3c34513f67082d3831 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Sun, 24 Aug 2025 10:38:51 +0100
Subject: [PATCH] feat(ui): make save button clearer in sidebar section forms

---
 .../src/components/Sidebar/SidebarSection.css |  2 +-
 .../components/Sidebar/SidebarSectionForm.tsx | 35 +++++++++----------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
index fdcdb4c3a..faf6c421f 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
@@ -5,7 +5,7 @@ div.sidebar-section {
     @apply flex items-center justify-between px-1.5;
 
     & > div.controls {
-      @apply flex justify-end gap-2;
+      @apply flex items-center justify-end;
     }
   }
 
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionForm.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionForm.tsx
index 792a4af9a..c320d2086 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionForm.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionForm.tsx
@@ -12,8 +12,7 @@ import {
 import { OperationNames, SuccessData } from "@/src/hooks/api";
 import { GenericSchema, GenericSchemaAsync } from "valibot";
 import { Typography } from "@/src/components/Typography/Typography";
-import { Button as KButton } from "@kobalte/core/button";
-import Icon from "@/src/components/Icon/Icon";
+import { Button } from "@/src/components/Button/Button";
 
 import "./SidebarSection.css";
 import { Loader } from "../../components/Loader/Loader";
@@ -83,24 +82,24 @@ export function SidebarSectionForm<
           </Typography>
           <div class="controls h-4">
             {editing() && !formStore.submitting && (
-              <KButton type="submit">
-                <Icon
-                  icon="Checkmark"
-                  color="tertiary"
-                  size="0.75rem"
-                  inverted
-                />
-              </KButton>
+              <Button
+                hierarchy="primary"
+                size="xs"
+                startIcon="Checkmark"
+                ghost
+                type="submit"
+              >
+                Save
+              </Button>
             )}
             {editing() && formStore.submitting && <Loader />}
-            <KButton onClick={editOrClose}>
-              <Icon
-                icon={editing() ? "Close" : "Edit"}
-                color="tertiary"
-                size="0.75rem"
-                inverted
-              />
-            </KButton>
+            <Button
+              hierarchy="primary"
+              ghost
+              size="xs"
+              icon={editing() ? "Close" : "Edit"}
+              onClick={editOrClose}
+            />
           </div>
         </div>
         <div class="content">