Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix delete domain dialog width and CTA #96981

Merged
merged 2 commits into from
Dec 3, 2024
Merged

Conversation

wojtekn
Copy link
Contributor

@wojtekn wojtekn commented Dec 2, 2024

Related to https://github.com/Automattic/dotcom-forge/issues/9788

Proposed Changes

I propose to fix delete domain dialog width as it's too wide. Also, I fixed the primary action button on mobile, as the button content was not centered correctly.

Why are these changes being made?

To improve UX.

Testing Instructions

  1. Open Calypso locally or use a Calypso Live link
  2. Navigate to the /domains/manage page
  3. Locate a domain and click it
  4. Click the 'Delete' button
  5. Confirm that dialog is no longer too wide
  6. Change browser width to mobile view
  7. Confirm that dialog is 90% wide and that text on ll buttons is centered

Mobile

Before After
Screenshot 2024-12-02 at 18 24 17 Screenshot 2024-12-02 at 18 18 44

Desktop

Before After
Screenshot 2024-12-02 at 18 24 32 Screenshot 2024-12-02 at 18 19 13

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

@wojtekn wojtekn requested a review from a team December 2, 2024 17:23
@wojtekn wojtekn self-assigned this Dec 2, 2024
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 2, 2024
@wojtekn wojtekn added the Groundskeeping Issues handled through Dotcom Groundskeeping rotations label Dec 2, 2024
@matticbot
Copy link
Contributor

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

@wojtekn wojtekn requested a review from okmttdhr December 3, 2024 09:29
Copy link
Contributor

@ivan-ottinger ivan-ottinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The proposed changes look good! Both dialogs ("Delete {domain}" & "Confirm your decision") are 90% wide and button labels are centered correctly.

I did not observe any regressions. Tested with different screen sizes.

Desktop Mobile
Markup on 2024-12-03 at 10:28:08 Markup on 2024-12-03 at 10:28:30
Markup on 2024-12-03 at 10:29:34 Markup on 2024-12-03 at 10:29:08

@wojtekn wojtekn merged commit e18c37a into trunk Dec 3, 2024
17 checks passed
@wojtekn wojtekn deleted the fix/delete-domain-dialog-width branch December 3, 2024 09:43
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Groundskeeping Issues handled through Dotcom Groundskeeping rotations
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants