admin/clawhub
1
0
Fork 0
mirror of https://github.com/openclaw/clawhub.git synced 2026-08-14 08:52:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: polish shared controls and toasts

Browse Source
This commit is contained in:
vyctorbrzezowski
2026-07-11 12:53:01 -03:00
committed by Vyctor H. Brzezowski
parent 926ecde45f
commit 0c05bbe9f4
3 changed files with 55 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/__tests__/ui-design-contract.test.ts
+23
View File
@@ -162,11 +162,34 @@ describe("restored UI design contract", () => {
expect(cssRule(css, ".browse-tab.is-active")).not.toContain("font-weight");
});
it("keeps shared segmented controls visually quiet across homepage variants", () => {
const css = styles();
expect(css).toContain("--clawhub-segmented-border: color-mix(in srgb, var(--line) 58%");
expect(css).toContain("--clawhub-segmented-border: color-mix(in srgb, var(--hv2-border) 72%");
expect(css).not.toContain("--clawhub-segmented-border: var(--hv2-border-strong)");
expect(cssRule(css, ".clawhub-segmented")).toContain(
"border: 1px solid var(--clawhub-segmented-border)",
);
expect(cssRule(css, ".clawhub-segmented-btn.browse-view-btn")).toContain(
"width: var(--clawhub-segmented-seg-h)",
);
});
it("makes global toasts dismissible", () => {
const rootSource = rootRoute();
const css = styles();
expect(rootSource).toContain("<Toaster");
expect(rootSource).toContain("closeButton");
expect(rootSource).toContain('closeButton: "clawhub-toast-close"');
expect(rootSource).toContain('paddingRight: "48px"');
expect(cssRule(css, '[data-sonner-toast][data-styled="true"] .clawhub-toast-close')).toContain(
"right: 14px !important",
);
expect(cssRule(css, '[data-sonner-toast][data-styled="true"] .clawhub-toast-close')).toContain(
"background: transparent !important",
);
});
it("keeps migrated application surfaces on canonical semantic tokens", () => {
src/routes/__root.tsx
+4
View File
@@ -205,12 +205,16 @@ function RootDocument({ children }: { children: React.ReactNode }) {
closeButton
position="bottom-right"
toastOptions={{
classNames: {
closeButton: "clawhub-toast-close",
},
style: {
background: "var(--oc-bg-elevated)",
color: "var(--oc-text-primary)",
border: "1px solid var(--oc-border-subtle)",
borderRadius: "var(--oc-radius-control)",
fontFamily: "var(--oc-font-body)",
paddingRight: "48px",
},
}}
/>
src/styles.css
+28 -4
View File
@@ -361,6 +361,30 @@ html {
scrollbar-gutter: stable;
}
[data-sonner-toast][data-styled="true"] .clawhub-toast-close {
top: 50% !important;
right: 14px !important;
left: auto !important;
width: 24px !important;
height: 24px !important;
border: 0 !important;
border-radius: var(--oc-radius-control) !important;
background: transparent !important;
color: var(--oc-text-muted) !important;
transform: translateY(-50%) !important;
}
[data-sonner-toast][data-styled="true"] .clawhub-toast-close:hover {
background: var(--oc-surface-interactive) !important;
color: var(--oc-text-primary) !important;
}
[data-sonner-toast][data-styled="true"] .clawhub-toast-close:focus-visible {
background: var(--oc-surface-interactive) !important;
box-shadow: 0 0 0 2px var(--oc-focus-ring) !important;
color: var(--oc-text-primary) !important;
}
/*
* Radix UI (react-remove-scroll) locks body scroll when a dropdown/dialog/popover
* opens and, to prevent the scrollbar from disappearing visibly, injects a
@@ -21841,7 +21865,7 @@ a.search-empty-action {
--clawhub-segmented-h: calc(var(--clawhub-segmented-seg-h) + 8px);
--home-v2-listing-control-h: var(--clawhub-segmented-h);
--home-v2-listing-control-seg-h: var(--clawhub-segmented-seg-h);
--clawhub-segmented-border: var(--line);
--clawhub-segmented-border: color-mix(in srgb, var(--line) 58%, transparent);
--clawhub-segmented-bg: color-mix(in srgb, var(--surface) 95%, transparent);
--clawhub-segmented-fg: var(--ink-soft);
--clawhub-segmented-fg-hover: var(--ink);
@@ -21944,7 +21968,7 @@ a.search-empty-action {
.app-shell:has(.home-v2-main) .home-v2-listing-kind,
.app-shell:has(.home-v2-main) .home-v2-listing-view,
.app-shell:has(.home-v2-main) .browse-view-toggle {
--clawhub-segmented-border: var(--hv2-border-strong);
--clawhub-segmented-border: color-mix(in srgb, var(--hv2-border) 72%, transparent);
--clawhub-segmented-bg: color-mix(in srgb, var(--hv2-surface) 95%, transparent);
--clawhub-segmented-fg: var(--hv2-text-tertiary);
--clawhub-segmented-fg-hover: var(--hv2-text-secondary);
@@ -29253,7 +29277,7 @@ a[class*="rounded-full"] {
.clawhub-segmented {
--clawhub-segmented-seg-h: 30px;
--clawhub-segmented-h: calc(var(--clawhub-segmented-seg-h) + 8px);
--clawhub-segmented-border: var(--line);
--clawhub-segmented-border: color-mix(in srgb, var(--line) 58%, transparent);
--clawhub-segmented-bg: color-mix(in srgb, var(--surface) 95%, transparent);
--clawhub-segmented-fg: var(--ink-soft);
--clawhub-segmented-fg-hover: var(--ink);
@@ -29320,7 +29344,7 @@ a[class*="rounded-full"] {
}
.app-shell:has(.home-v2-main) .clawhub-segmented {
--clawhub-segmented-border: var(--hv2-border-strong);
--clawhub-segmented-border: color-mix(in srgb, var(--hv2-border) 72%, transparent);
--clawhub-segmented-bg: color-mix(in srgb, var(--hv2-surface) 95%, transparent);
--clawhub-segmented-fg: var(--hv2-text-tertiary);
--clawhub-segmented-fg-hover: var(--hv2-text-secondary);