fix: Implement DS styles and unify modals

[ashiskumar-1999]

Description

Implemented the styles from the DS to the Modal theme file & component. Replaced the existing modal implementation with the current Modal.

• Added the DS styles from Figma in the theme file(@chakra-ui/gatsby-plugin/components/Modal.ts) & removed styles from the ModalContent in the Component file(components/Modal.tsx).
• Replaced the current QuizessModal implementation with the current Modal Component.
• Implemented the current Modal component in the index.tsx file instead of CodeModal component.

Preview link

• https://deploy-preview-11212--ethereumorg.netlify.app/

Related Issue

• Closes #10749

[gatsby-cloud[bot]]

:white_check_mark: ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 1h build time

[TylerAPfledderer]

Taking a quick moment to mention that Closes #10749 should be added to the description so this PR is automatically tied to that issue.

[ashiskumar-1999]

Thanks @TylerAPfledderer Added it.

[TylerAPfledderer]

@ashiskumar-1999 hmmm, I believe there are two things that should be done first before this can get a proper review:

1. All the styling under variantCode in the component theming is related to the CodeModal component that can be seen on the home page. Head to the Site preview deploy of this PR, scroll down to the section called "A new frontier for development" and select one of the options in that list to see the modal.

Since the CodeModal is likely to be using this same general styling, I would take all of the styling from variantCode and move it to baseStyle and address the compressed width of CodeModal from there. (I'd recommend simply removing the maxWidth from the dialog part for now and use size="2xl" instead)

This would mean Modal should have no variant, and CodeModal is basically redundant against the custom Modal that has been added.

2. All components related to the Design System need to be added to Storybook with a stories file. So Modal.tsx needs to be converted to Modal/index.tsx and add the stories file in this new folder as Modal.stories.tsx. For the directory title the new story is housed in, it should be Molecules / Overlay Content / Modal.

For further guidance on creating this stories file and using it for visual testing, there is a doc in the project repo to view. However, I just recognized that it is a bit out-of-date. Therefore, I would view the file via a PR I just opened. Though subject to change, this would be more accurate documentation. See this commit of the file from that PR and we'll go from there.

[ashiskumar-1999]

Hi @TylerAPfledderer, Addressed the above comments. Review this once in your available time.

[netlify[bot]]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	181a754a023b4b05cf65a7d15839944f109925a1
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/6655fad86eebd40008737b11
😎 Deploy Preview	https://deploy-preview-11212--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 46 (🟢 up 8 from production) Accessibility: 92 (no change from production) Best Practices: 89 (🔴 down 3 from production) SEO: 93 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[TylerAPfledderer]

Hey @ashiskumar-1999!

Looking good on my end. Can we go ahead and get this PR updated with the dev branch? I see there are conflicts, but also we have some additions in prod that should help make the next review proper.

Once you do that, please run yarn install to update dependencies (there are new ones in prod), and then run yarn lint:fix. There is an updated eslint config that includes auto fixing import sorts, and in addition there might be new errors/warnings to address. Then a new commit will need to be pushed.

(Already working on adding a runner to handle lint:fix automatically!)

Thank you!

[ashiskumar-1999]

Hi @TylerAPfledderer, updated with the dev branch & committed the necessary changes. Ran the yarn lint: fix. Please check with your available time. Also, try to merge this PR ASAP before any commits happen to the dev branch because the conflict that we're getting i.e CodeModal.tsx no longer exist in my local changes since it is of no usage but it still exists in the dev branch. That's why I think the conflict is happening.

[Coretaker101]

?

[TylerAPfledderer]

Hi @TylerAPfledderer, updated with the dev branch & committed the necessary changes. Ran the yarn lint: fix. Please check with your available time. Also, try to merge this PR ASAP before any commits happen to the dev branch because the conflict that we're getting i.e CodeModal.tsx no longer exist in my local changes since it is of no usage but it still exists in the dev branch. That's why I think the conflict is happening.

It's normal for conflicts to occur when a PR is no longer up-to-date with the main branch. Now that this one is up-to-date, you should not see the same conflicts again, even if other PRs get pushed.

Conflicts are only related to changes you made in this PR. Because one change involves removing an entire file, if someone merges a PR where they only make a change within said file, you should not receive a new conflict. Otherwise, it's easy to fix and it's just a part of the PR process 😁

[ashiskumar-1999]

Got it @TylerAPfledderer . So, Now we can merge this PR since it is up to date with the dev branch. Can you merge this PR?

[TylerAPfledderer]

I'm not a team member. @pettinarip or one of the other members needs to provide the final review before merging.

There are many tasks going on right now, but this will be addressed! :)

[ashiskumar-1999]

Ohh. Thanks for letting me know @TylerAPfledderer .

[ashiskumar-1999]

Hi @wackerow, Thanks for the requested changes. I'll make all the necessary changes once @nloureiro verifies the designs.

[nloureiro]

This needs further testing; maybe @konopkja can help do some Q&A on the models here.

I found one bug on the width of the modal on the quizzes

on the dev preview is like this:

in production is like this:

[ashiskumar-1999]

Hi @nloureiro , Not sure but I think this is happening because of the maxW prop that we've in the styles fo the Modal. Also, let me know once you've finished the design review.

[pettinarip]

@nloureiro PR ready for review (once the build finishes).

As discussed, we have:

• on mobile, used the same styles used in the Simulator modal
• unified the sizes of the modals
• the close button is not absolute positioned, now it is part of the header structure
• the modal padding is 32px

The affected modals and pages where you can see them are:

• default Modal
  • https://deploy-preview-11212--ethereumorg.netlify.app/en/developers/tutorials/
  • https://deploy-preview-11212--ethereumorg.netlify.app/en/developers/docs/
• CodeModal - unique modal that has its own styles
  • https://deploy-preview-11212--ethereumorg.netlify.app/en/
• QuizzesModal
  • https://deploy-preview-11212--ethereumorg.netlify.app/en/quizzes/
• SimulatorModal
  • https://deploy-preview-11212--ethereumorg.netlify.app/en/wallets/

[nloureiro]

@pettinarip looks great! great work

I found one tiny, tiny detail that it's not a blocker. I will create an issue later on.

[wackerow]

@pettinarip This look ready from your perspective?

I'm noticing the content of the Quiz modal

Production (left aligned text, full width content):

PR (center aligned text, fits-to-content)

[nloureiro]

@pettinarip This look ready from your perspective?

I'm noticing the content of the Quiz modal

Production (left aligned text, full width content):

PR (center aligned text, fits-to-content)

From my side, it's better centered. On the original Figma it's centered, too.

[gitpoap-bot[bot]]

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

Be sure to join the Ethereum.org discord if you are interested in contributing further to the project or have any questions for the team.

GitPOAP: 2024 Ethereum.org Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.