authorgravatar for maria@kuuro.netmaria-rcks <maria@kuuro.net> 2026-07-22 19:08:21-04:00
committergravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-07-23 01:13:29-04:00
logb6a2563db7c0cd1b2df56540852d48c3c96aeaac
tree1cb4090eeabc5b7bfd2d948804a0925ef4fb8721
parentc5ff51ec1fff1a9f0447b0336d645ab0f089db62

style(web): polish dark mode dialogs

4 files changed, 83 insertions(+), 35 deletions(-)

apps/web/src/components/GitActionsControl.tsx+33-24
......@@ -544,9 +544,12 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
544544
545545 return (
546546 <Dialog open={props.open} onOpenChange={handleOpenChange}>
547 <DialogPopup className="workflow-dialog-surface max-w-xl overflow-hidden before:hidden">
547 <DialogPopup
548 backdropClassName="bg-black/40 backdrop-blur-none"
549 className="workflow-dialog-surface max-w-xl overflow-hidden before:hidden"
550 >
548551 <div className="flex min-h-0 flex-col overflow-hidden border-foreground/10 bg-transparent">
549 <DialogHeader className="border-b border-border/70 bg-foreground/[0.025]">
552 <DialogHeader className="border-b border-border/70 bg-foreground/[0.025] dark:border-transparent dark:bg-transparent">
550553 <DialogTitle>Publish repository</DialogTitle>
551554 <DialogDescription>
552555 Pick where to host it, then point us at a repo to push to.
......@@ -567,10 +570,10 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
567570 className={cn(
568571 "grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] gap-x-2 rounded-lg border px-3 py-2 text-left",
569572 index === publishWizardStep
570 ? "border-primary bg-primary/10 ring-1 ring-primary/25"
573 ? "border-primary bg-primary/10 ring-1 ring-primary/25 dark:border-transparent"
571574 : isComplete
572 ? "border-border bg-background"
573 : "border-border bg-muted/40",
575 ? "border-border bg-background dark:border-transparent dark:bg-white/[0.05]"
576 : "border-border bg-muted/40 dark:border-transparent dark:bg-white/[0.025]",
574577 !isClickable && "cursor-default",
575578 )}
576579 >
......@@ -602,7 +605,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
602605 </div>
603606 </DialogHeader>
604607
605 <DialogPanel className="space-y-5 border-b border-border/70 bg-muted/20 px-6 py-5">
608 <DialogPanel className="space-y-5 border-b border-border/70 bg-muted/20 px-6 py-5 dark:border-transparent dark:bg-transparent">
606609 <AnimatedHeight>
607610 <div className={cn("space-y-2", publishWizardStep !== 0 && "hidden")}>
608611 <span
......@@ -627,7 +630,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
627630 return (
628631 <div
629632 key={option.value}
630 className="relative flex cursor-not-allowed items-center gap-3 rounded-lg border border-border bg-background px-3 py-3 text-left opacity-55"
633 className="relative flex cursor-not-allowed items-center gap-3 rounded-lg border border-border bg-background px-3 py-3 text-left opacity-55 dark:border-transparent dark:bg-white/[0.035]"
631634 >
632635 <option.Icon
633636 className="size-5 shrink-0 text-muted-foreground"
......@@ -670,8 +673,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
670673 "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left outline-none transition-[background-color,border-color,box-shadow]",
671674 "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
672675 isSelected
673 ? "border-primary bg-background shadow-sm ring-2 ring-primary/35"
674 : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50",
676 ? "border-primary bg-background shadow-sm ring-2 ring-primary/35 dark:border-transparent dark:bg-primary/10 dark:shadow-none dark:ring-1 dark:ring-primary/30"
677 : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50 dark:border-transparent dark:bg-white/[0.035] dark:hover:bg-accent",
675678 )}
676679 >
677680 <option.Icon className="size-5 shrink-0" aria-hidden />
......@@ -756,8 +759,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
756759 "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 text-left outline-none transition-[background-color,border-color,box-shadow]",
757760 "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
758761 isSelected
759 ? "border-primary bg-background shadow-sm ring-2 ring-primary/35"
760 : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50",
762 ? "border-primary bg-background shadow-sm ring-2 ring-primary/35 dark:border-transparent dark:bg-primary/10 dark:shadow-none dark:ring-1 dark:ring-primary/30"
763 : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50 dark:border-transparent dark:bg-white/[0.035] dark:hover:bg-accent",
761764 )}
762765 >
763766 <option.Icon
......@@ -831,8 +834,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
831834 "rounded-md border px-3 py-1.5 text-center text-sm font-medium outline-none transition",
832835 "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
833836 isSelected
834 ? "border-primary bg-background ring-2 ring-primary/35 text-foreground"
835 : "border-border bg-background text-muted-foreground hover:border-foreground/20 hover:text-foreground",
837 ? "border-primary bg-background ring-2 ring-primary/35 text-foreground dark:border-transparent dark:bg-primary/10 dark:ring-1 dark:ring-primary/30"
838 : "border-border bg-background text-muted-foreground hover:border-foreground/20 hover:text-foreground dark:border-transparent dark:bg-white/[0.035]",
836839 )}
837840 >
838841 {value === "ssh" ? "SSH" : "HTTPS"}
......@@ -849,7 +852,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
849852 <div
850853 role="status"
851854 aria-live="polite"
852 className="flex items-center gap-2 rounded-md border border-input bg-muted/40 px-3 py-2 text-xs text-muted-foreground"
855 className="flex items-center gap-2 rounded-md border border-input bg-muted/40 px-3 py-2 text-xs text-muted-foreground dark:border-transparent dark:bg-white/[0.035]"
853856 >
854857 <Spinner className="size-3.5" aria-hidden />
855858 Publishing repository to {publishProviderLabel}...
......@@ -884,7 +887,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
884887 : `Remote "${publishResult.remoteName}" is set up. Make a commit and push it to share your code.`}
885888 </p>
886889 </div>
887 <div className="flex items-center gap-2 rounded-lg border border-input bg-muted/40 px-3 py-2">
890 <div className="flex items-center gap-2 rounded-lg border border-input bg-muted/40 px-3 py-2 dark:border-transparent dark:bg-white/[0.035]">
888891 <currentPublishProvider.Icon className="size-3.5 shrink-0 text-muted-foreground" />
889892 <span className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">
890893 {publishResult.repository.nameWithOwner}
......@@ -905,7 +908,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
905908 </Button>
906909 </>
907910 ) : (
908 <div className="rounded-md border border-input bg-background px-3 py-2 text-xs text-muted-foreground">
911 <div className="rounded-md border border-input bg-background px-3 py-2 text-xs text-muted-foreground dark:border-transparent dark:bg-white/[0.035]">
909912 Publish result unavailable.
910913 </div>
911914 )}
......@@ -913,7 +916,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
913916 </AnimatedHeight>
914917 </DialogPanel>
915918
916 <DialogFooter className="dark:border-white/5 dark:bg-white/[0.025]">
919 <DialogFooter className="dark:border-transparent dark:bg-transparent">
917920 {publishWizardStep === 2 ? (
918921 <Button size="sm" onClick={() => handleOpenChange(false)}>
919922 Done
......@@ -1736,7 +1739,7 @@ export default function GitActionsControl({
17361739 >
17371740 <ChevronDownIcon aria-hidden="true" className="size-4" />
17381741 </MenuTrigger>
1739 <MenuPopup align="end" className="command-menu-surface w-full">
1742 <MenuPopup align="end" className="w-full">
17401743 {gitActionMenuItems.map((item) => {
17411744 const disabledReason = getMenuActionDisabledReason({
17421745 item,
......@@ -1825,13 +1828,16 @@ export default function GitActionsControl({
18251828 }
18261829 }}
18271830 >
1828 <DialogPopup className="workflow-dialog-surface before:hidden">
1831 <DialogPopup
1832 backdropClassName="bg-black/40 backdrop-blur-none"
1833 className="command-palette-dialog-surface workflow-dialog-surface before:hidden"
1834 >
18291835 <DialogHeader>
18301836 <DialogTitle>{COMMIT_DIALOG_TITLE}</DialogTitle>
18311837 <DialogDescription>{COMMIT_DIALOG_DESCRIPTION}</DialogDescription>
18321838 </DialogHeader>
18331839 <DialogPanel className="space-y-4">
1834 <div className="space-y-3 rounded-lg border border-input bg-muted/40 p-3 text-xs">
1840 <div className="space-y-3 rounded-lg border border-input bg-muted/40 p-3 text-xs dark:border-transparent dark:bg-white/[0.035]">
18351841 <div className="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">
18361842 <span className="text-muted-foreground">Branch</span>
18371843 <span className="flex items-center justify-between gap-2">
......@@ -1880,7 +1886,7 @@ export default function GitActionsControl({
18801886 <p className="font-medium">none</p>
18811887 ) : (
18821888 <div className="space-y-2">
1883 <ScrollArea className="h-44 rounded-md border border-input bg-background">
1889 <ScrollArea className="h-44 rounded-md border border-input bg-background dark:border-transparent dark:bg-white/[0.025]">
18841890 <div className="space-y-1 p-1">
18851891 {allFiles.map((file) => {
18861892 const isExcluded = excludedFiles.has(file.path);
......@@ -1955,7 +1961,7 @@ export default function GitActionsControl({
19551961 />
19561962 </div>
19571963 </DialogPanel>
1958 <DialogFooter className="dark:border-white/5 dark:bg-white/[0.025]">
1964 <DialogFooter className="dark:border-transparent dark:bg-transparent">
19591965 <Button
19601966 variant="outline"
19611967 size="sm"
......@@ -1998,14 +2004,17 @@ export default function GitActionsControl({
19982004 }
19992005 }}
20002006 >
2001 <DialogPopup className="workflow-dialog-surface max-w-xl before:hidden">
2007 <DialogPopup
2008 backdropClassName="bg-black/40 backdrop-blur-none"
2009 className="workflow-dialog-surface max-w-xl before:hidden"
2010 >
20022011 <DialogHeader>
20032012 <DialogTitle>
20042013 {pendingDefaultBranchActionCopy?.title ?? "Run action on default refName?"}
20052014 </DialogTitle>
20062015 <DialogDescription>{pendingDefaultBranchActionCopy?.description}</DialogDescription>
20072016 </DialogHeader>
2008 <DialogFooter className="dark:border-white/5 dark:bg-white/[0.025] sm:flex-wrap sm:items-center">
2017 <DialogFooter className="dark:border-transparent dark:bg-transparent sm:flex-wrap sm:items-center">
20092018 <Button
20102019 className="w-full sm:mr-auto sm:w-auto"
20112020 variant="outline"
apps/web/src/components/ProjectScriptsControl.tsx+11-8
......@@ -364,7 +364,10 @@ export default function ProjectScriptsControl({
364364 }}
365365 open={dialogOpen}
366366 >
367 <DialogPopup className="workflow-dialog-surface before:hidden">
367 <DialogPopup
368 backdropClassName="bg-black/40 backdrop-blur-none"
369 className="command-palette-dialog-surface workflow-dialog-surface before:hidden"
370 >
368371 <DialogHeader>
369372 <DialogTitle>{isEditing ? "Edit Action" : "Add Action"}</DialogTitle>
370373 <DialogDescription>
......@@ -382,7 +385,7 @@ export default function ProjectScriptsControl({
382385 <Button
383386 type="button"
384387 variant="outline"
385 className="size-9 shrink-0 hover:bg-popover active:bg-popover data-pressed:bg-popover data-pressed:shadow-xs/5 data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)]"
388 className="size-9 shrink-0 hover:bg-popover active:bg-popover data-pressed:bg-popover data-pressed:shadow-xs/5 data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:border-transparent dark:bg-white/[0.035] dark:data-pressed:before:shadow-none"
386389 aria-label="Choose icon"
387390 />
388391 }
......@@ -397,10 +400,10 @@ export default function ProjectScriptsControl({
397400 <button
398401 key={entry.id}
399402 type="button"
400 className={`relative flex flex-col items-center gap-2 rounded-md border px-2 py-2 text-xs ${
403 className={`relative flex flex-col items-center gap-2 rounded-md border px-2 py-2 text-xs dark:border-transparent ${
401404 isSelected
402 ? "border-primary/70 bg-primary/10"
403 : "border-border/70 hover:bg-accent/60"
405 ? "border-primary/70 bg-primary/10 dark:ring-1 dark:ring-primary/30"
406 : "border-border/70 hover:bg-accent/60 dark:bg-white/[0.035]"
404407 }`}
405408 onClick={() => {
406409 setIcon(entry.id);
......@@ -458,7 +461,7 @@ export default function ProjectScriptsControl({
458461 Open this URL in the in-app preview when this action runs.
459462 </p>
460463 </div>
461 <label className="flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm">
464 <label className="flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm dark:border-transparent dark:bg-white/[0.035]">
462465 <span>Run automatically on worktree creation</span>
463466 <Switch
464467 checked={runOnWorktreeCreate}
......@@ -466,7 +469,7 @@ export default function ProjectScriptsControl({
466469 />
467470 </label>
468471 <label
469 className={`flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm ${
472 className={`flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm dark:border-transparent dark:bg-white/[0.035] ${
470473 previewUrl.trim().length === 0 ? "opacity-60" : ""
471474 }`}
472475 >
......@@ -480,7 +483,7 @@ export default function ProjectScriptsControl({
480483 {validationError && <p className="text-sm text-destructive">{validationError}</p>}
481484 </form>
482485 </DialogPanel>
483 <DialogFooter className="dark:border-white/5 dark:bg-white/[0.025]">
486 <DialogFooter className="dark:border-transparent dark:bg-transparent">
484487 {isEditing && (
485488 <Button
486489 type="button"
apps/web/src/components/ui/dialog.tsx+3-1
......@@ -49,17 +49,19 @@ function DialogViewport({ className, ...props }: DialogPrimitive.Viewport.Props)
4949
5050function DialogPopup({
5151 className,
52 backdropClassName,
5253 children,
5354 showCloseButton = true,
5455 bottomStickOnMobile = true,
5556 ...props
5657}: DialogPrimitive.Popup.Props & {
58 backdropClassName?: string;
5759 showCloseButton?: boolean;
5860 bottomStickOnMobile?: boolean;
5961}) {
6062 return (
6163 <DialogPortal>
62 <DialogBackdrop />
64 <DialogBackdrop className={backdropClassName} />
6365 <DialogViewport
6466 className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}
6567 >
apps/web/src/index.css+36-2
......@@ -404,13 +404,22 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
404404
405405 .workflow-dialog-surface {
406406 border-color: transparent;
407 background: color-mix(in srgb, var(--popover) 82%, transparent);
407 background: var(--secondary);
408408 -webkit-backdrop-filter: blur(16px);
409409 backdrop-filter: blur(16px);
410410 box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%);
411411 }
412412
413 .command-palette-dialog-surface {
414 border-color: transparent !important;
415 background: var(--secondary) !important;
416 -webkit-backdrop-filter: blur(16px);
417 backdrop-filter: blur(16px);
418 box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%) !important;
419 }
420
413421 .dark .dropdown-glass {
422 background: color-mix(in srgb, var(--secondary) 80%, var(--background));
414423 box-shadow: 0 18px 44px -18px rgb(0 0 0 / 80%);
415424 }
416425
......@@ -425,7 +434,32 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
425434 }
426435
427436 .dark .workflow-dialog-surface {
428 background: color-mix(in srgb, var(--popover) 76%, transparent);
437 background: var(--secondary);
438 -webkit-backdrop-filter: blur(16px);
439 backdrop-filter: blur(16px);
440 }
441
442 .dark .command-palette-dialog-surface {
443 box-shadow: none !important;
444 }
445
446 .dark
447 .command-palette-dialog-surface
448 :is([data-slot="input-control"], [data-slot="textarea-control"]) {
449 background: var(--secondary) !important;
450 }
451
452 .dark
453 .command-palette-dialog-surface
454 :is([data-slot="input-control"], [data-slot="textarea-control"]):not(:has(:focus-visible)) {
455 border-color: transparent !important;
456 box-shadow: none !important;
457 }
458
459 .dark
460 .command-palette-dialog-surface
461 :is([data-slot="input-control"], [data-slot="textarea-control"])::before {
462 box-shadow: none !important;
429463 }
430464
431465 .dark .chat-composer-context-strip::before {