yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request 'feat(ui): make save button clearer in sidebar section forms' (#4904) from ui/sidebar-section-save-button into main

Browse Source 
Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4904
This commit is contained in:
brianmcgee
2025-08-24 09:45:23 +00:00
parent 0b3d362357 b12debf373
commit 1931c17513
2 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
View File

@@ -5,7 +5,7 @@ div.sidebar-section {
@apply flex items-center justify-between px-1.5; @apply flex items-center justify-between px-1.5;
& > div.controls { & > div.controls {
@apply flex justify-end gap-2; @apply flex items-center justify-end;
} }
} }

35
pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionForm.tsx
View File

@@ -12,8 +12,7 @@ import {
import { OperationNames, SuccessData } from "@/src/hooks/api"; import { OperationNames, SuccessData } from "@/src/hooks/api";
import { GenericSchema, GenericSchemaAsync } from "valibot"; import { GenericSchema, GenericSchemaAsync } from "valibot";
import { Typography } from "@/src/components/Typography/Typography"; import { Typography } from "@/src/components/Typography/Typography";
import { Button as KButton } from "@kobalte/core/button"; import { Button } from "@/src/components/Button/Button";
import Icon from "@/src/components/Icon/Icon";
import "./SidebarSection.css"; import "./SidebarSection.css";
import { Loader } from "../../components/Loader/Loader"; import { Loader } from "../../components/Loader/Loader";
@@ -83,24 +82,24 @@ export function SidebarSectionForm<
</Typography> </Typography>
<div class="controls h-4"> <div class="controls h-4">
{editing() && !formStore.submitting && ( {editing() && !formStore.submitting && (
<KButton type="submit"> <Button
<Icon hierarchy="primary"
icon="Checkmark" size="xs"
color="tertiary" startIcon="Checkmark"
size="0.75rem" ghost
inverted type="submit"
/> >
</KButton> Save
</Button>
)} )}
{editing() && formStore.submitting && <Loader />} {editing() && formStore.submitting && <Loader />}
<KButton onClick={editOrClose}> <Button
<Icon hierarchy="primary"
icon={editing() ? "Close" : "Edit"} ghost
color="tertiary" size="xs"
size="0.75rem" icon={editing() ? "Close" : "Edit"}
inverted onClick={editOrClose}
/> />
</KButton>
</div> </div>
</div> </div>
<div class="content"> <div class="content">