Paths

Table of Contentst

Differential D7915

[landing] redesign the subscription form component
AcceptedPublic
Actions

Authored by ginsu on Mon, May 22, 7:07 AM.

Tags

None

Referenced Files

	F566247: Screenshot 2023-05-31 at 12.10.37 PM.png
	Wed, May 31, 9:11 AM

	F566246: Screenshot 2023-05-31 at 12.10.45 PM.png
	Wed, May 31, 9:11 AM

	Unknown Object (File)
	Wed, May 31, 12:37 AM

	Unknown Object (File)
	Mon, May 22, 7:56 AM

	F551458: Screenshot 2023-05-22 at 5.15.40 PM.png
	Mon, May 22, 7:16 AM

	F551457: Screenshot 2023-05-22 at 5.15.23 PM.png
	Mon, May 22, 7:16 AM

	F551454: Screenshot 2023-05-22 at 5.13.59 PM.png
	Mon, May 22, 7:16 AM

	F551453: Screenshot 2023-05-22 at 5.13.49 PM.png
	Mon, May 22, 7:16 AM

View All 12 Files

Subscribers

Details

Reviewers

atul
kamil

Summary

As part of the Hero redesign for the landing page we need to redesign our SubscriptionForm component. The focus of this diff is to change the language and visuals (color and layout by separating the input field from the button) shown on SubscriptionForm. Here is a screenshot of the Figma doc (please note that a subsequent diff will handle displaying the feedback text shown in the Figma)

Screenshot 2023-05-22 at 5.10.49 PM.png (2×3 px, 2 MB)

Screenshot 2023-05-22 at 5.10.53 PM.png (2×3 px, 2 MB)

Depends on D7914

Test Plan

Please see the screenshots below:

Desktop Normal:

Screenshot 2023-05-22 at 5.12.39 PM.png (2×3 px, 1 MB)

Hover:

Success Case:

Screenshot 2023-05-22 at 5.13.49 PM.png (2×3 px, 1 MB)

Error Case:

Screenshot 2023-05-22 at 5.13.59 PM.png (2×3 px, 1 MB)

Mobile View:

Screenshot 2023-05-31 at 12.10.45 PM.png (2×3 px, 904 KB)

Tablet View:

Screenshot 2023-05-31 at 12.10.37 PM.png (2×3 px, 943 KB)

Diff Detail

Repository

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Mon, May 22, 7:07 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMon, May 22, 7:07 AM

ginsu edited the summary of this revision. (Show Details)Mon, May 22, 7:16 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, kamil.

ginsu added a parent revision: D7914: [landing] remove react-text-loop dependency.

ginsu attached a referenced file: F551458: Screenshot 2023-05-22 at 5.15.40 PM.png. (Show Details)

ginsu attached a referenced file: F551457: Screenshot 2023-05-22 at 5.15.23 PM.png. (Show Details)

ginsu attached a referenced file: F551454: Screenshot 2023-05-22 at 5.13.59 PM.png. (Show Details)

ginsu attached a referenced file: F551453: Screenshot 2023-05-22 at 5.13.49 PM.png. (Show Details)

ginsu attached a referenced file: F551451: Screen Recording 2023-05-22 at 5.13.15 PM.mov. (Show Details)

ginsu attached a referenced file: F551450: Screenshot 2023-05-22 at 5.12.39 PM.png. (Show Details)

ginsu attached a referenced file: F551449: Screenshot 2023-05-22 at 5.10.53 PM.png. (Show Details)

ginsu attached a referenced file: F551448: Screenshot 2023-05-22 at 5.10.49 PM.png. (Show Details)

ginsu added a child revision: D7917: [landing] fix css class names for subscription form component.Mon, May 22, 7:21 AM

Harbormaster completed remote builds in B19603: Diff 26792.Mon, May 22, 7:25 AM

ginsu requested review of this revision.Mon, May 22, 7:25 AM

Can we set a minimum width on the button so it can fit Request Access/Requested!/Invalid Email/etc?

That way the size of the input field and button won't "shift around" during different states

This revision now requires changes to proceed.Mon, May 22, 9:13 AM

address comments

ginsu edited the test plan for this revision. (Show Details)Wed, May 31, 9:11 AM

ginsu attached a referenced file: F566247: Screenshot 2023-05-31 at 12.10.37 PM.png. (Show Details)

ginsu attached a referenced file: F566246: Screenshot 2023-05-31 at 12.10.45 PM.png. (Show Details)

Harbormaster completed remote builds in B19927: Diff 27302.Wed, May 31, 9:27 AM

ginsu added a child revision: D8039: [landing] add feedback text to subscription form component.Wed, May 31, 9:28 AM

atul accepted this revision.Wed, May 31, 1:13 PM

This revision is now accepted and ready to land.Wed, May 31, 1:13 PM

ginsu removed a child revision: D8039: [landing] add feedback text to subscription form component.Thu, Jun 1, 10:10 AM

Revision Contents
Changeset List

Path

Size

landing/

subscription-form.css

75 lines

subscription-form.react.js

14 lines

Diff 27302

landing/subscription-form.css

Loading...

landing/subscription-form.react.js

Loading...