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: payment banners on landing and login pages #6431

Merged
merged 10 commits into from
Jun 8, 2023
Merged

Conversation

LinHuiqing
Copy link
Contributor

@LinHuiqing LinHuiqing commented Jun 6, 2023

Problem

More marketing efforts for our payments feature!

Closes FRM-960, closes FRM-961

Solution

Breaking Changes

  • No - this PR is backwards compatible

Features:

  • Feature banner for payments and other future big features, used in the following places:
    • Login Page
    • Landing Page

Improvements:

  • Added h5 and h6 textStyles
  • Use constants for links to guide

Bug Fixes:

  • Fixed colour of login page banner

Before & After Screenshots

BEFORE:

Landing Page:

Screenshot 2023-06-06 at 5 32 19 PM

Login Page:

Screenshot 2023-06-06 at 5 32 28 PM

AFTER:

Landing Page:

Desktop:

Screenshot 2023-06-07 at 7 05 14 PM

Mobile:

Screenshot 2023-06-07 at 7 05 40 PM

Login Page:

Desktop:

Screenshot 2023-06-07 at 7 05 05 PM

Mobile:

Screenshot 2023-06-07 at 7 05 46 PM

Tests

Check that new banners work:

  • Landing page
    • Check that banner has the right copy
    • Check that the "Learn more" button opens the public FormSG payment guide in a new tab
  • Login page
    • Check that banner has the right copy
    • Check that the "Learn more" button opens the public FormSG payment guide in a new tab

Check that the refactor that takes out the links as constants works with the existing payments copy things:

  • Announcement Rollout Modal
    • If you've seen the announcement modal before, right click > Inspect > Applications. Delete local storage items prefixed with "has-seen-rollout-announcement-"
    • Check that the content in the announcement modal that pops up has the link to the payment directory slides
  • What's New drawer
    • Check that the content in the What's New drawer has the link to the payment directory slides

@LinHuiqing LinHuiqing marked this pull request as ready for review June 6, 2023 09:34
- fix h5 and h6 typography styles
- note: center on the y axis
@LinHuiqing LinHuiqing temporarily deployed to staging-alt2 June 7, 2023 09:47 — with GitHub Actions Inactive
@LinHuiqing
Copy link
Contributor Author

@staceytan1998 seems like chromatic still isn't rendering it properly, could you check the copy on staging-alt2.form.gov.sg instead?

@LinHuiqing LinHuiqing changed the title feat: pay banners on landing and login pages feat: payment banners on landing and login pages Jun 7, 2023
@LinHuiqing
Copy link
Contributor Author

for posterity, banners do not render properly on chromatic and have been (slack) approved by designer @staceytan1998 after checking the banners on staging-alt2.form.gov.sg.

Copy link
Contributor

@KenLSM KenLSM left a comment

Choose a reason for hiding this comment

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

LGTM! With on comment on bannerColor props

@LinHuiqing LinHuiqing enabled auto-merge (squash) June 8, 2023 08:41
@LinHuiqing LinHuiqing merged commit 0d025a0 into develop Jun 8, 2023
@LinHuiqing LinHuiqing deleted the feat/pay-banners branch June 8, 2023 09:07
KenLSM pushed a commit that referenced this pull request Jun 8, 2023
* feat: login page banner

* ref: pass links into FeatureBanner

- use link constants for payments copies

* fix: contrast login banners from background

* fix: hover colour based on figma

* chore: remove unnecessary variant def

* feat: add h5 and h6 textStyles

* feat: landing page banner

* fix: banner spacing

- fix h5 and h6 typography styles

* fix: justify text for login banner

- note: center on the y axis

* fix: only set banner color when provided
@LinHuiqing LinHuiqing mentioned this pull request Jun 12, 2023
51 tasks
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