feat(dialogs): redesign confirmation popup by ElMagnea · Pull Request #2391 · trakt/trakt-web

ElMagnea · 2026-05-22T09:14:05Z

Summary

Adds a dedicated <h2> title above the message in ConfirmationDialog (sourced from new confirmation_title_* i18n keys, one per ConfirmationType).
Reworks the message/detail to 14px regular --color-text-secondary body copy beneath the title.
Replaces the bright --red-500 destructive button with a soft pastel red (--red-200 on dark / --red-300 on light, near-black --red-1000 foreground) so removing/deleting reads intentional rather than alarming.
Cancel and the affirmative confirm share a sunken fill one shade deeper than the modal background (--shade-60 on light, --shade-950 on dark) — no stroke.
Both buttons always render at the same width via an inline-grid mirror trick (hidden anchor label of the other button sets a shared max-content), with the visible label centered in the cell.
Footer right-aligns the cluster with tighter horizontal padding.
Title sized at --ni-18 (one increment below the previous version), letter-spacing tightened.

Test plan

Open a destructive confirmation (delete a list, drop a show, log out, remove from watchlist) and verify the title shows "Delete list?" / "Drop show?" / "Log out?" / "Remove from watchlist?" in the top-left.
Confirm body text renders at 14px regular below the title.
Confirm Cancel and the destructive CTA render at identical width with the destructive button in pastel coral and Cancel in a sunken neutral fill.
Trigger the only affirmative confirmation (Restore show) — both buttons should look identical except for label.
Switch between light and dark themes; verify the destructive red shifts to a more saturated --red-300 in light theme and stays as --red-200 in dark theme.
On mobile width, footer stacks column-reverse with full-width buttons; confirm CTA sits above Cancel.
Run `deno task client:check` and `deno task client:test` — both pass.

🤖 Generated with Claude Code

Adds a dedicated title above each prompt and softens the destructive CTA to a theme-aware pastel red (coral on dark, more saturated on light) so warnings read intentional rather than alarming. Cancel and the affirmative confirm share a sunken fill that sits a step deeper than the modal background; both buttons match width via an inline-grid mirror so the layout stays balanced regardless of label length. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

gemini-code-assist · 2026-05-22T09:14:15Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a comprehensive redesign of the application's confirmation dialogs. The changes focus on improving user clarity and visual hierarchy by adding explicit titles, refining typography, and adjusting button styling to better distinguish between destructive and standard actions. The implementation also includes structural improvements to the modal footer and ensures consistent button sizing, enhancing the overall polish and usability of the confirmation flow.

Highlights

Confirmation Dialog Redesign: Implemented a new visual design for the ConfirmationDialog, including a dedicated title header, updated typography, and a more intentional color palette for destructive actions.
Button Layout Improvements: Standardized button widths using an inline-grid mirror technique and updated the footer layout to right-align action clusters, improving consistency across different confirmation types.
I18n Expansion: Added numerous new i18n keys for confirmation titles and status labels to support the redesigned UI and improve accessibility.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

deepsource-io · 2026-05-22T09:15:39Z

DeepSource Code Review

We reviewed changes in 9b07663...57cdab8 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade	Security Reliability Complexity Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
JavaScript		May 22, 2026 9:14a.m.	Review ↗
Code coverage		May 22, 2026 9:14a.m.	Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

gemini-code-assist

Code Review

This pull request introduces a title field to the confirmation dialog system, updating the ConfirmationDialog component, its associated types, and the mapping logic. It also adds several new i18n strings for dialog titles, calendar views, and list progress. Feedback highlights inconsistent casing in new i18n labels and an abstraction leak in the ConfirmationDialog styles that overrides internal Button properties, violating encapsulation rules. A redundant CSS rule for mobile button width was also identified for removal.

gemini-code-assist · 2026-05-22T09:18:12Z

+      ]
+    },
+    "calendar_day_item_count_one": {
+      "default": "{count} Item",


The casing for "Item" is inconsistent with other media count labels in the project, which typically use lowercase (e.g., tag_text_number_of_items on line 11336 uses "items", and tag_text_plays on line 677 uses "plays"). Consider using lowercase for consistency.

Suggested change

"default": "{count} Item",

"default": "{count} item",

gemini-code-assist · 2026-05-22T09:18:12Z

+      ]
+    },
+    "calendar_day_item_count_other": {
+      "default": "{count} Items",


The casing for "Items" is inconsistent with other media count labels in the project. Consider using lowercase for consistency.

Suggested change

"default": "{count} Items",

"default": "{count} items",

gemini-code-assist · 2026-05-22T09:18:12Z

+  .trakt-confirmation-actions :global(.trakt-button) {
+    padding-inline: var(--ni-10);
+    justify-content: center;
+  }
+
+  /* Quiet buttons (Cancel + affirmative confirm) — sit on a fill that's a step
+     deeper than the modal background, no stroke. Override the ghost style's
+     scale/margin/transparent-bg so they read as solid buttons. */
+  .trakt-confirmation-actions :global(.trakt-button[data-style="ghost"]) {
+    transform: none;
+    margin: 0;
+    color: var(--color-text-secondary);
+    border-radius: calc(var(--border-radius-m) * 0.8);
+    background: var(--trakt-cancel-bg);
+  }
+
+  .trakt-confirmation-actions
+    :global(.trakt-button[data-style="ghost"]:hover:not([disabled])),
+  .trakt-confirmation-actions
+    :global(.trakt-button[data-style="ghost"]:focus-visible:not([disabled])) {
+    background: var(--trakt-cancel-bg-hover);
+    color: var(--color-text-primary);
+  }
+
+  .trakt-confirmation-actions
+    :global(.trakt-button[data-style="ghost"]:active:not([disabled])) {
+    transform: scale(0.97);
+  }


Overriding the internal styles of the Button component using :global(.trakt-button) and :global(.trakt-button[data-style="ghost"]) is an abstraction leak. This couples the ConfirmationDialog to the internal implementation details of the Button component, violating the principle of encapsulation. It would be more maintainable to expose these styling options as props or variants on the Button component itself, or to use CSS variables that the Button component explicitly supports for theme overrides.

gemini-code-assist · 2026-05-22T09:18:12Z

+  @include for-mobile {
+    .trakt-confirmation-actions :global(.trakt-button) {
+      width: 100%;
+    }
  }


The width: 100% rule for buttons on mobile is redundant. The parent .trakt-modal-footer in Modal.svelte already sets align-items: stretch in its mobile media query. Since .trakt-confirmation-actions uses display: contents, the buttons are direct flex items of the footer and will stretch to full width automatically.

gemini-code-assist Bot reviewed May 22, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dialogs): redesign confirmation popup#2391

feat(dialogs): redesign confirmation popup#2391
ElMagnea wants to merge 1 commit into
mainfrom
feat/popups-redesign

ElMagnea commented May 22, 2026

Uh oh!

gemini-code-assist Bot commented May 22, 2026

Uh oh!

deepsource-io Bot commented May 22, 2026 •

edited

Loading

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot May 22, 2026

Uh oh!

gemini-code-assist Bot May 22, 2026

Uh oh!

gemini-code-assist Bot May 22, 2026

Uh oh!

gemini-code-assist Bot May 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

ElMagnea commented May 22, 2026

Summary

Test plan

Uh oh!

gemini-code-assist Bot commented May 22, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

deepsource-io Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DeepSource Code Review

PR Report Card

Code Review Summary

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot May 22, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 22, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 22, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

deepsource-io Bot commented May 22, 2026 •

edited

Loading