Rebrand toast messages #519

Anboias · 2024-12-31T09:59:53Z

Closes #503

What does this change?

Adds new variant to Button component
Rebrands the toast messages in the DAO dashboard app to match designs
Update Toast behaviour to match Market (responsiveness + props: limit={3} pauseOnFocusLoss={false} autoClose={5000} closeOnClick)
Updates toast messages based on the feedback from Tamara:

How to test this?

Use buttons from Staking page. Will remove them before merging this PR. Cypress tests are failing because of them.
Preview URL: https://503-rebrand-toast-messages-new-preview-api3-dao-dashboard-dev.on-fleek.app/#/

src/components/notifications/clear-storage-button.tsx

mcoetzee · 2025-01-07T10:51:58Z

The "Clear Storage" button is a primary call to action, so I don't think we want to give it the subdued grey text styling. This warning shows up when the app effectively stops working, and that button fixes the app, so it needs to be prominent.

src/app.tsx

T9991 · 2025-01-08T15:11:43Z

The "Clear Storage" button is a primary call to action, so I don't think we want to give it the subdued grey text styling. This warning shows up when the app effectively stops working, and that button fixes the app, so it needs to be prominent.

@mcoetzee then it sounds like this would make more sense to be an error message instead of a warning. Is that right?

mcoetzee · 2025-01-08T15:21:37Z

@mcoetzee then it sounds like this would make more sense to be an error message instead of a warning. Is that right?

Yeah I'm happy to convert it to an error message 👍

Anboias · 2025-01-13T08:35:29Z

@T9991, do we also want to use a different Button variant?

T9991 · 2025-01-13T15:40:39Z

@Anboias primary blue button

T9991 · 2025-01-13T16:35:45Z

If we add a cancel button, what would it do?

Anboias · 2025-01-13T21:39:24Z

If we add a cancel button, what would it do?

It just closes the toast. We used to have both the Cancel and the X button, I guess leaving only the X button could be enough. Wdyt?

Anboias · 2025-01-15T16:20:53Z

@mcoetzee, Design Team agreed with the change from my previous message (this commit), their only request was to make the progress bar red. My latest commit handles that by setting the progress bar color to the appropriate type in case autoClose is set to false.

src/components/notifications/notifications.tsx

mcoetzee · 2025-01-16T10:04:09Z

src/pages/dashboard/dashboard.tsx

@@ -42,9 +51,93 @@ const Dashboard = () => {
  const canWithdraw = tokenBalances && tokenBalances.withdrawable.gt(0);
  const canInitiateUnstake = data && !pendingUnstake && data.userStaked.gt(0);

+  const showErrorToasts = () => {


Remember to remove all the test code.

Done. It's basically a revert from this commit, but I didn't do the revert because of some conflicts

* Update Button component * Preparatory changes * Update Toasts style * Update Clear Storage toast * Self review * Temporary testing toasts * Use customAction and prevent clear storage toast from closing * Fix Storage btn * Keep bg colour when autoClose is false * Remove testing code

* Have renovate ignore api3-dao * Bump packages and update Actions workflow (#473) * Bump packages and update Actions workflow * Revert back to Node.js 16 * Update docker/build-push-action action to v6 (#484) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @typechain/ethers-v5 to v11 (#421) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency prettier to v3 * Prettier * Add prettier:check * Require lint to pass prettier check * Update dependency cypress to v13 * Rol @types/node back to v16 * Rebrand DAO Dashboard - Colors & fonts setup (#458) * Add new color variables * Set up new fonts * Add breakpoints * Add rebrand branch to CI schedule * Fix description font styles * Rebrand page layout (#466) * Update background * Update logo * Update navigation bar * Update Connect button * Update desktop menu * Add External Links * Update layout dimensions * Update footer * Add theme prop to button component * Update error reporting notice * Update account dropdown * Update mobile menu * Fix unit test * Fix CY tests * Fixes after the review * Fix navigation height * Fix issues on the very small screens * Disable scrolling when mobile menu is open * min width for connect button * Use ExternalLink instead of Button for links * Update connected network in the mobile menu * Layout fixes (#494) * The layout fix (footer not stretched to the bottom) * History icon fix * Add menu hover & active states * Rebrand staking page (#474) * Misc additions * Update page header style * Update radial chart * Update Staking page * Move tooltips to own column * Style card title * Correct Connect Wallet info icon size * Correct Connect Wallet box button * Adjust card gap * Add secondary-neutral button variant * Add gradient border to unstaking card * Remove unnecesary global classes and fine-tune unstake panel * Refactor button variants * Adjust staking panel actions buttons * Fix Cy tests * Use data-testid instead of data-cy * Update pending staking card * Fix button unclickable bug * Rebrand tooltips (#488) * Update default tooltip * Update items tooltip * Fix staking pool table tooltips offset * Fix unchecked style * Rebrand Governance page (#496) * Rebrand Governance page * Fix CY test * Update header to <h1> * Rebrand modals (#495) * Remove unnecessary button wrapper * Update Modal component * Add button tertiary variant * Add button text-blue variant * Adapt Input component * Update Deposit modal * Update Withdraw/Stake/Unstake modals * Update Unstake Confirm modal * Update Unsupported Network modal * Self review * Show primary buttons first on mobile * Adapt to Button component without wrapper * Update account dropdown (#505) * Update Account dropdown * Apply background only when dropdown is open * Rebrand New Proposal modal (#500) * Update New Proposal modal body and labels * Refactor AutosizeInput component * Implement Textarea Input component * Final adjustments New Proposal modal * Rename AutosizeInput to Input * Remove old textarea component and update error border color * Separate TextareaInput into Input and Textarea * Rebrand Proposals table (#499) * Rebrand Proposals table * Add testing capabilities * Self review (fixing some colors) * Update Tag cursor * Rename Tag to ProposalTag * Rebrand History page (#501) * Rebrand Proposals table * Add testing capabilities * Self review (fixing some colors) * Update Tag cursor * Rebrand History page * Rename Tag to ProposalTag * Rebrand Unstake banner (#507) * Rebrand unstake banner * Move two line design to lower breakpoint * Add cookie consent logic (#508) * Add Checkbox component * Update Notice banner and align logic with Market * Add Privacy Settings modal * Fix Cypress tests * Initialize analytics and sentry * Add additional check for sentry init * Prevent default on external link click * Revert "Prevent default on external link click" This reverts commit 7c2f4a6. * Stop propagation of external link in privacy modal * Omit target and rel props * Update banner text * Display proposal title in two lines on non-desktop screens (#512) * Change Help tooltip to external link in the New Proposal modal (#515) * Change Help tooltip to external link in the New proposal modal * Fix uncentered modal title * Fix console errors (#516) * Use camelCase in SVG element prop names when they are used as react components * Add forgotten key prop * Do not pass incorrect props to input & textarea * Rebrand Proposal details (#502) * Rebrand proposal details * Add testing capabilities * Fixes after the review * Use react components for error & success icons * Use useId() * Rename 'Target Address' to 'Target Contract Address' * Add 404 page (#510) * Update NotFound page * Add Proposal page 404 redirect * Corrections * Return not found page for undecoded proposal * Add hideHeader flag to layout * Update CTA label * Use BaseLayout * Remove test code (#517) * Rebrand Governance page modals (#509) * Adapt Input component to small size * Update Delegate modal * Update Delegation action modal * Update Undelegate confirmation modal * Update Vot on proposal modal * Shorten class names * Remove value=undefined * Style the Malicious script warning (#518) * Update DAO modals (#522) * Update Unsupported chain modal * Update delegate modals * Update staking modals * Add UI for disconnected state of the proposal page (#523) Add disconnected proposal page * Fix breakpoints on 404 page (#526) * Adjust vote status when voted by delegate (#524) * Adjust vote status when voted by delegate * Update upload-artifact to v4 * Move connect button to the navigation bar on small screens (#525) * Move Connect button to navigation bar also on small screens * More explicit condition * Fix failing cypress test * Add privacy links & copyright to the footer (#527) * Add privacy links & copyright to the footer * Put links into utils file * Remove unused import * Rebrand toast messages (#519) * Update Button component * Preparatory changes * Update Toasts style * Update Clear Storage toast * Self review * Temporary testing toasts * Use customAction and prevent clear storage toast from closing * Fix Storage btn * Keep bg colour when autoClose is false * Remove testing code * Cleanup after the rebrand (#529) * Remove unused button styles * Remove unused BorderedBox component * Remove old breakpoints * Remove unused colors * Remove unused global styles and images * Fix cy test * Fixes after QA (#530) * Return voter status icons * tokens -> API3 tokens * Remove Tracker & Forum external links (#532) * Remove Tracker & Forum external links * Fix CY tests * Fix formatting after prettier update * Remove leftovers * Disable link checking of fleek deployments * Update favicon (#534) * Link DAO docs and not regular docs * Do not link Api3 Market * Remove obsolete market icon * Fix Cypress test --------- Co-authored-by: Derek Croote <dcroote@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Peter Jurčo <62913177+peterjurco@users.noreply.github.com> Co-authored-by: Bogdan Iasinovschi <biasinovschi@gmail.com> Co-authored-by: peterjurco <petrojurco@gmail.com>

Anboias self-assigned this Dec 31, 2024

Anboias mentioned this pull request Dec 31, 2024

Rebrand toast messages #514

Closed

Anboias linked an issue Jan 2, 2025 that may be closed by this pull request

Rebrand DAO Dashboard - Toast notifications #503

Closed

Anboias added 2 commits January 2, 2025 15:21

Update Button component

7529a38

Preparatory changes

7f89632

Anboias force-pushed the 503/rebrand-toast-messages-new branch from af5aeec to ec5a244 Compare January 2, 2025 13:25

Anboias added 2 commits January 2, 2025 15:36

Update Toasts style

08eb5a2

Update Clear Storage toast

1bec60d

Anboias force-pushed the 503/rebrand-toast-messages-new branch from ec5a244 to 1bec60d Compare January 2, 2025 13:37

Anboias commented Jan 2, 2025

View reviewed changes

src/components/notifications/clear-storage-button.tsx Outdated Show resolved Hide resolved

Anboias added 2 commits January 2, 2025 16:03

Self review

345bd20

Temporary testing toasts

2d31bbc

Anboias force-pushed the 503/rebrand-toast-messages-new branch from 0e22980 to 2d31bbc Compare January 2, 2025 14:12

Anboias requested a review from mcoetzee January 2, 2025 14:13

Anboias marked this pull request as ready for review January 2, 2025 14:13

mcoetzee reviewed Jan 7, 2025

View reviewed changes

src/app.tsx Show resolved Hide resolved

Use customAction and prevent clear storage toast from closing

c864c77

Anboias added 3 commits January 14, 2025 10:17

Fix Storage btn

7a8c8d1

Keep bg colour when autoClose is false

83d3aff

Merge branch 'rebrand' into 503/rebrand-toast-messages-new

3c08e1c

Anboias requested a review from mcoetzee January 16, 2025 08:32

mcoetzee approved these changes Jan 16, 2025

View reviewed changes

Remove testing code

c85bd93

Anboias merged commit 0a055cf into rebrand Jan 21, 2025
4 of 5 checks passed

Anboias deleted the 503/rebrand-toast-messages-new branch January 21, 2025 19:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rebrand toast messages #519

Rebrand toast messages #519

Anboias commented Dec 31, 2024 •

edited

Loading

mcoetzee commented Jan 7, 2025

T9991 commented Jan 8, 2025

mcoetzee commented Jan 8, 2025

Anboias commented Jan 13, 2025

T9991 commented Jan 13, 2025

T9991 commented Jan 13, 2025

Anboias commented Jan 13, 2025 •

edited

Loading

Anboias commented Jan 15, 2025 •

edited

Loading

mcoetzee Jan 16, 2025

Anboias Jan 16, 2025 •

edited

Loading

Rebrand toast messages #519

Rebrand toast messages #519

Conversation

Anboias commented Dec 31, 2024 • edited Loading

What does this change?

How to test this?

mcoetzee commented Jan 7, 2025

T9991 commented Jan 8, 2025

mcoetzee commented Jan 8, 2025

Anboias commented Jan 13, 2025

T9991 commented Jan 13, 2025

T9991 commented Jan 13, 2025

Anboias commented Jan 13, 2025 • edited Loading

Anboias commented Jan 15, 2025 • edited Loading

mcoetzee Jan 16, 2025

Choose a reason for hiding this comment

Anboias Jan 16, 2025 • edited Loading

Choose a reason for hiding this comment

Anboias commented Dec 31, 2024 •

edited

Loading

Anboias commented Jan 13, 2025 •

edited

Loading

Anboias commented Jan 15, 2025 •

edited

Loading

Anboias Jan 16, 2025 •

edited

Loading