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: Set the non-mobile Toast width to 390px #3589

Merged
merged 1 commit into from
Nov 5, 2024

Conversation

rumzledz
Copy link
Contributor

@rumzledz rumzledz commented Oct 31, 2024

Description

A wee update to our Toast component's non-mobile container style. We're now setting it width: 390px to adhere to our Toast's global sizing based on Figma.

Screenshot 2024-11-01 at 00 22 12

Testing

  1. Set your browser width to 768px
  2. Open the NotificationTypeToggle.tsx file and add the following param to the toast.success function:
{
  autoClose: false, // <-- add me!
},
image
  1. Go to the Preferences page: http://localhost:9091/account/preferences
  2. Toggle Payments and Funds
  3. Verify that the Toast is 390px in width
  4. Go to the Advanced Settings page: http://localhost:9091/account/advanced
  5. Toggle Notifications
  6. Verify that the Toast is 390px in width

Resolves #3573

@rumzledz rumzledz self-assigned this Oct 31, 2024
@rumzledz rumzledz marked this pull request as ready for review October 31, 2024 16:40
@rumzledz rumzledz requested review from a team as code owners October 31, 2024 16:40
Copy link
Contributor

@mmioana mmioana left a comment

Choose a reason for hiding this comment

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

Nice work fixing the global width of the toast messages @rumzledz 🙌

Screenshot 2024-11-01 at 09 20 17
Screenshot 2024-11-01 at 09 20 53

All good with your fix, but now that we've touched these classes, it would be nice to use an already configured spacing class for the before pseudo-element's width 🥺

Once you push this change, I'll happily re-approve 🦾

@@ -7,7 +7,7 @@
}

.Toastify__toast {
@apply relative mb-0 rounded-l-none rounded-r-lg border border-gray-200 bg-base-white p-6 shadow-lg before:absolute before:left-0 before:top-0 before:block before:h-full before:w-[0.375rem] before:content-[''] sm:min-w-[24.375rem];
@apply relative mb-0 rounded-l-none rounded-r-lg border border-gray-200 bg-base-white p-6 shadow-lg before:absolute before:left-0 before:top-0 before:block before:h-full before:w-[0.375rem] before:content-[''] sm:w-[24.375rem];
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we please change before:w-[0.375rem] to before:w-1.5?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sure, your majesty 👑

@rumzledz rumzledz requested review from mmioana and a team November 1, 2024 09:19
@rumzledz rumzledz force-pushed the fix/3573-user-acct-toast-styles branch from 2c52792 to 99b38ab Compare November 1, 2024 09:19
Copy link
Contributor

@iamsamgibbs iamsamgibbs left a comment

Choose a reason for hiding this comment

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

Looks good to me!

Screenshot 2024-11-01 at 11 42 06

Copy link
Member

@rdig rdig left a comment

Choose a reason for hiding this comment

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

Toast message has the correct width now. Nicely done!

Screenshot from 2024-11-04 14-40-24
Screenshot from 2024-11-04 14-40-30
Screenshot from 2024-11-04 14-40-39

Copy link
Contributor

@Nortsova Nortsova left a comment

Choose a reason for hiding this comment

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

Great work on this 👍

image image image image

Copy link
Contributor

@mmioana mmioana left a comment

Choose a reason for hiding this comment

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

Approving**

@rumzledz rumzledz merged commit 1e66c79 into master Nov 5, 2024
4 of 6 checks passed
@rumzledz rumzledz deleted the fix/3573-user-acct-toast-styles branch November 5, 2024 10:45
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.

QA Notifications: User account settings toast confirmations
5 participants