Add AppInstallPage

[danielfmiranda]

Description

Link to sample test Youtube page: https://foundation-s-tiktok-pag-1mbxqc.mofostaging.net/en/youtuberegrets/
Link to sample test TikTok page: https://foundation-s-tiktok-pag-1mbxqc.mofostaging.net/en/tiktok/
Link to Figma File: Figma
Related PR: #12036

This PR introduces a new page model AppInstallPage which is planned to be used on the upcoming TikTok Reporter App page, and to also recreate the Youtube Regrets Reporter Extension page.

The ask for this page was to have the hero section of the regrets reporter page (with some minor design changes), and the "body/cta" section of a campaign page.

To achieve this I made the AppInstallPage inherit from our existing CampaignPage model, so they can share the same body/cta fields.

I also had app_install_page.html extend campaign_page.html, with some minor updates to accommodate requests from design.

Screenshots

Figma Mockup:

Review App:

Please note that:

• I uploaded button icons that do not match the figma mock up, this is not an error.
• The circular "share" button underneath the download buttons in the figma mockup is missing on the review app, this is going to be added at a later date.

┆Issue is synchronized with this Jira Story

[kristinashu]

So amazing! Thank you @danielfmiranda for getting all the little details of this right!

[kristinashu]

I'm sorry Daniel, feel free to do this as a follow up ticket. I just got the the final graph from the illustrator and it seems like the image is a little pixelated on the site. Is the image getting compressed by the cms? The original is 383kb which I feel is a reasonable size for a large hero banner.

[robdivincenzo]

Excellent work @danielfmiranda ! 🔥

[simont-cr]

@danielfmiranda While reviewing the app, I noticed two issues regarding buttons:

1. Mobile view buttons width
When viewing the app on mobile view, the buttons do not have a consistent width. I feel that it would be much better if they are a similar width, maybe matching the bigger button.

2. When using tab for navigation and onFocus, the text turns width on the buttons
Right now when using tab to navigate through the page, whenever the focus is any of the two buttons, the text turns into white but the button stays with the white background.

The onFocus styling should be similar as the onHover, which turns the button background color black.

[danielfmiranda]

Great catches @simont-cr!

My latest commit to this PR updates the width and focus state of the buttons 👍

Whenever you find a free moment, can you please take another look at the review apps and approve the PR if everything looks OK?

Thanks!

[danielfmiranda]

Thanks for calling that out @kristinashu! I have created https://mozilla-hub.atlassian.net/browse/TP1-368 to investigate 👍

[simont-cr]

Tabbing through the buttons no longer cause issues and mobile btns are now similar width as expected, looking good, thanks!

[mmmavis]

Thanks @danielfmiranda !

[data-sync-user]

➤ Simon Acosta Torres commented:

PR has already been merged.