Unify all modals

[igawaclawska]

What's new:

UI Updates

There are not that many visual changes. The Extension message pop-up is now visually consistent with all the other modals and has one button. More changes happen in the code.

• Old UI:
  

• New UI:
  

Code updates

1. The Extension message pop-up is now made with the modal_shared components

2. The modal_shared folder has been moved one level up out of the redirect_notification directory.
   The previous location falsely indicated that the reusable modal components are meant only for the redirect_modal. Since these components are meant to create all modals in the app, I have decided to move the modal_shared folder one level up.

3. The getInstallExtensionLinks() function was renamed to getExtensionInstallationLinks() and abstracted out by being placed in the extensionCommunication.js module
   The getInstallExtensionLinks() function that generates extension installation links based on the currently used browsers has been renamed to getExtensionInstallationLinks(). Additionally, given that this function is used by two modals—the SupportedNotification_NotInstalled and the ExtensionMessage—and will soon be needed in one of the info pages, I have decided to abstract it out and move it to the extensionCommunication.js module.

4. A modal stylesheet was unified and added to the modal_shared folder as Modal.sc.js.
   Previously, multiple, overlapping modal stylesheets controlled each modal. They would inherit values from each other and overwrite each other's values. This approach led to confusion about CSS inheritance and was very prone to introducing inconsistencies. To help it and ensure consistency across all the modals, I created one global stylesheet, Modal.sc.js, for the reusable modal components. If you find the current stylesheet too long, it could be divided into individual chunks for each reusable component, e.g., Header.sc.js.

5. More atomic reusable components for the Modal are created
   Similarly to the info page template, the modal_shared has more (similar) atomic components, such as:

   • Heading (separating the heading (h1 text) from the header makes the header component more versatile by allowing to pass more content as children, not only h1 text as before)
   • MainImage (initially, the developer had to add a specific class name to the <img> HTML tag to style the image adequately. Now, it is only a matter of using the MainImage component that already comes with the applied style.
   • ButtonContainer (a component taking care of button alignment on desktop and mobile)

[netlify[bot]]

✅ Deploy Preview for voluble-nougat-015dd1 ready!

Name	Link
🔨 Latest commit	9aa9440d7a71da35539ee6b100f90211b89c0976
🔍 Latest deploy log	https://app.netlify.com/sites/voluble-nougat-015dd1/deploys/6605826f9646020008d7131b
😎 Deploy Preview	https://deploy-preview-330--voluble-nougat-015dd1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[igawaclawska]

The Install Extension page implementation has been added to this PR. This page will now be displayed only on the supported browsers

• A previous version of the page:
• The new version:

This implementation needs one update:

• Adding a skip button

[igawaclawska]

A new update:

• Separate Stylesheet files have been created for each component in the info_page_shared and modal_shared folder.
• The ExtensionMessage.js pop-up has been moved to the /src/articles folder.
• The getExtensionInstallationLinks() function has been moved to the utils/misc/extensionInstallationLinks.js
• The InstallExtension page now allows users to skip the installation process and go straight to the App.
• The MainImage component has been factored out and moved to the components folder.
• The path to images in the MainImage component has been concatenated.
• Minor CSS adjustments and cleanups.