Passport Design Tokens - Macro Components

[lucianHymer]

Subtask of #1054

Ensure that the components on pages marked Components #1 and Components #2 match between the App and Figma https://www.figma.com/file/61l4GXuZTNIR8gfSybFqfo/Gitcoin-Passport---Lunar?type=design&node-id=66-2021&t=x3NZlZjXMXYklAXr-0

Most of it seems to match, although the toasts are definitely different.

Also, check the colors on the modals (refresh modal, remove stamp modal, etc.)

NOTE: This depends on the following tickets (to prevent clashing updates) #1272, #1273, #1274

I estimate this to be .5-1 day of effort.

[michaelgreen06]

Blocked by #1273

[michaelgreen06]

I updated the ui to the above mentioned figma designs but we have made changes to the UI since the design was made which results in some conflicts.

1). 2 X (close) buttons on "No New Web3 Stamps Detected" modal
The one on the right is persistent across all steps of the refresh flow. I suggest we delete the middle X (close) button

2). Slightly different icons for the same message (failure/warning)
I updated the failed icon for the toasts to match figma but noticed other modals that are using a similar, but different, failed icon. I am unsure if these icons are intentionally different or not. My thought is they should all be the same. Happy to fix or make a new ticket to address.

3). Inconsistent icons usage
I suspect all of the failure and success icons are supposed to be the same throughout different components but many of the icons in the app currently don't match the icon from the failure toast shown in the figma file. The below picture shows the failure icon in most modals, which doesn't match the figma. Please verify if you would like all these icons to be the same or not.

4). Missing close button
I noticed that some of the modals like the one above ^^^ (verification failed modal) don't have close buttons. Fixing is out of scope for this ticket but I'm happy to fix. Will you please let me know if you'd like me to fix as part of this ticket or a new one?

5). 1 Click Toasts
Currently there aren't any toasts that pop up during the one click verification process. There is a TODO in the code to update toasts in the 1 click flow once the design is finalized. Will you please verify whether or not you want me to update the toasts to show up as part of the 1 click flow as part of this ticket.

6). Tiny Toasts
When screen width decreases under 275px the icon for the toast and the close button disappear. This is common amongst all toasts. This behavior even occurs on the Chakra docs page. I suspect there is some way to address this problem but it will take some effort. Will you please indicate if you'd like me to address this or if it is ok that the toasts don't work great under 275px?

Apologies for all the questions here! I just want to make sure I am working on the right things :-)

[erichfi]

No worries about the questions! I appreciate your diligence and attention to detail. I'll go point by point to address your questions:

1). 2 X (close) buttons on "No New Web3 Stamps Detected" modal

I agree with your suggestion. The middle X (close) button could potentially confuse the users. Please proceed to remove it.

2). Slightly different icons for the same message (failure/warning) and 3). Inconsistent icons usage

All failure/warning icons should be the same, and overall icon usage across the platform should match the Figma design. Let's handle these together in a separate ticket: Ticket #1385 - Update and Standardize Icons for Consistency. This ticket will cover updating all icons to achieve design consistency.

4). Missing close button

For the missing close button on the 'verification failed' modal, let's include this in a separate ticket: Ticket #1386 - Add Close Button to Verification Failed Modal.

5). 1 Click Toasts

For this task, we should follow the Figma design closely. If it includes toasts in the 1-click flow, let's include them. Please make the necessary updates as part of this ticket.

6). Tiny Toasts

The issues with toasts at screen widths under 275px should be addressed but not as part of this ticket. This will be tracked in a separate ticket: Ticket #1387 - Toasts Display Issue at Screen Widths Under 275px.