Skip to content

UX: Domain detail actions and secondary outline button hover#1047

Merged
gaghan430 merged 2 commits intomainfrom
feature/1017-domain-actions
Mar 4, 2026
Merged

UX: Domain detail actions and secondary outline button hover#1047
gaghan430 merged 2 commits intomainfrom
feature/1017-domain-actions

Conversation

@gaghan430
Copy link
Contributor

Summary

  • Surface domain actions (Refresh, Manage DNS Zone, Delete) on the domain detail overview so they’re available from the single-asset view, not only from the list row menu.
  • Fix secondary outline Button so it has a proper hover state (background + text), consistent with other outline types.

Changes

Domain detail (Assets)

  • In app/routes/project/detail/config/domains/detail/overview.tsx:
    • Added header actions next to the domain title (same pattern as edge proxy detail: flex items-center justify-between).
    • Refresh – uses useRefreshDomainRegistration with existing toasts.
    • Manage DNS Zone – navigates to DNS Zone detail or to list with ?action=create&domainName=... when no zone exists.
    • Delete – uses useDeleteDomain + confirmation; on success navigates back to Domains list.
  • Ensures object-level actions are available on the object’s view, not only in the list.

Theme (app/styles/themes/alpha.css)

  • Button tokens (light + dark): Per-type tokens for base, hover, and active (--btn-{type}, --btn-{type}-hover, --btn-{type}-active) for primary, secondary, tertiary, quaternary, warning, danger, success.
  • Neutral tokens: --btn-neutral-bg, --btn-neutral-bg-hover, --btn-neutral-bg-active for light/borderless variants.
  • Active vs hover: Active tokens added so active is visually distinct from hover (e.g. color-mix() for darker active).
  • Dark mode: Same token names overridden under .theme-alpha.dark for consistent behavior.
  • Tailwind: All new tokens exposed in @theme inline as --color-btn-*.

Button component (app/modules/datum-ui/components/button/button.tsx)

  • Solid / light / borderless: Use token-based classes (bg-btn-{type}, hover:bg-btn-{type}-hover, active:bg-btn-{type}-active, disabled:bg-btn-{type}/60 or disabled:bg-btn-neutral-bg) with no ad-hoc colors.
  • Outline (primary/secondary/tertiary/quaternary): Hover only changes border (e.g. border-btn-*-border/60border-btn-*-border); no bg/text change.
  • Outline (warning/danger/success): Kept original “fill” behavior (bg + text on hover/active) with proper disabled overrides so disabled + hover does not change background or text.
  • Disabled: Every type/theme has explicit disabled styles; disabled state overrides hover so bg/text/border stay stable when hovering a disabled button.
image image

@gaghan430 gaghan430 requested a review from a team March 4, 2026 01:53
@cla-assistant
Copy link

cla-assistant bot commented Mar 4, 2026

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

1 similar comment
@cla-assistant
Copy link

cla-assistant bot commented Mar 4, 2026

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@gaghan430 gaghan430 linked an issue Mar 4, 2026 that may be closed by this pull request
@gaghan430 gaghan430 merged commit 1450027 into main Mar 4, 2026
9 of 10 checks passed
@gaghan430 gaghan430 deleted the feature/1017-domain-actions branch March 4, 2026 06:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Great functionality hidden behind list-view [...]

2 participants