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

feat(frontend): new modal design #3171

Merged
merged 26 commits into from
Oct 29, 2024
Merged

feat(frontend): new modal design #3171

merged 26 commits into from
Oct 29, 2024

Conversation

peterpeterparker
Copy link
Member

@peterpeterparker peterpeterparker commented Oct 28, 2024

Motivation

New design for the modal as in Figma.

TODO

We need E2E tests that take screenshots of the modals. It was incredibly painful to test each modal repeatedly. I ended up taking screenshots for this PR about 20 times.

Leftovers

It was already too much work. I'll have a look to the WalletConnect modal afterwards.

Changes

  • Adapt style for the gix-cmp modals
  • Create a mixin for the card-content of the modal because we need a special tricks on the "Manage tokens" modal
  • Adapt various paddings
  • Modify "Manage Tokens" to fit this new design
  • Remove custom style in "Dapp modal"

Screenshots

Capture d’écran 2024-10-29 à 09 42 13 Capture d’écran 2024-10-29 à 09 42 23 Capture d’écran 2024-10-29 à 09 42 25 Capture d’écran 2024-10-29 à 09 42 32 Capture d’écran 2024-10-29 à 09 43 03 Capture d’écran 2024-10-29 à 09 43 25 Capture d’écran 2024-10-29 à 09 43 27 Capture d’écran 2024-10-29 à 09 43 33 Capture d’écran 2024-10-29 à 09 43 42 Capture d’écran 2024-10-29 à 09 43 46 Capture d’écran 2024-10-29 à 09 43 49 Capture d’écran 2024-10-29 à 09 43 55 Capture d’écran 2024-10-29 à 09 43 57 Capture d’écran 2024-10-29 à 09 44 03 Capture d’écran 2024-10-29 à 09 44 07 Capture d’écran 2024-10-29 à 09 44 16 Capture d’écran 2024-10-29 à 09 44 23 Capture d’écran 2024-10-29 à 09 44 33 Capture d’écran 2024-10-29 à 09 44 45 Capture d’écran 2024-10-29 à 09 44 48 Capture d’écran 2024-10-29 à 09 44 51 Capture d’écran 2024-10-29 à 09 44 54 Capture d’écran 2024-10-29 à 09 44 55 Capture d’écran 2024-10-29 à 09 44 59 Capture d’écran 2024-10-29 à 09 45 01 Capture d’écran 2024-10-29 à 09 45 03 Capture d’écran 2024-10-29 à 09 45 10 Capture d’écran 2024-10-29 à 09 45 12 Capture d’écran 2024-10-29 à 09 45 17 Capture d’écran 2024-10-29 à 09 45 19 Capture d’écran 2024-10-29 à 09 45 23 Capture d’écran 2024-10-29 à 09 45 25 Capture d’écran 2024-10-29 à 09 45 27

peterpeterparker added a commit that referenced this pull request Oct 29, 2024
# Motivation

We need a new background colors for the modals  #3171.

# Changes

- Init color #f8f9fa as discussed with Artem
@peterpeterparker peterpeterparker marked this pull request as ready for review October 29, 2024 08:51
@peterpeterparker peterpeterparker requested a review from a team as a code owner October 29, 2024 08:51
@AntonioVentilii-DFINITY
Copy link
Contributor

AntonioVentilii-DFINITY commented Oct 29, 2024

@peterpeterparker completely agree on the E2E tests + mobile screenshots. I am tagging @Stefan-Berger-DFINITY

Copy link
Contributor

@AntonioVentilii-DFINITY AntonioVentilii-DFINITY left a comment

Choose a reason for hiding this comment

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

LGTM! tks

@peterpeterparker peterpeterparker merged commit 5198f50 into main Oct 29, 2024
11 checks passed
@peterpeterparker peterpeterparker deleted the feat/modal-design branch October 29, 2024 10:54
peterpeterparker added a commit that referenced this pull request Oct 29, 2024
# Motivation

Fix a side effect of the new modal design #3171. The banner for the dapp
modal should be outside of the card.

# Screenshots

Incorrect:

<img width="1536" alt="Capture d’écran 2024-10-29 à 13 58 57"
src="https://github.com/user-attachments/assets/c0c0fab2-c76a-4331-90ca-a401ec0cb43f">

After:

<img width="1536" alt="Capture d’écran 2024-10-29 à 13 58 40"
src="https://github.com/user-attachments/assets/15e277bc-afec-4445-bc15-29f0b516ec58">
<img width="1536" alt="Capture d’écran 2024-10-29 à 13 58 46"
src="https://github.com/user-attachments/assets/dd129e50-b1f0-4756-9a93-1bb19e786444">
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.

2 participants