Page MenuHomePhabricator
Differential D8039

[landing] add feedback text to subscription form component
ClosedPublic
Actions

Authored by ginsu on May 31 2023, 9:26 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 2, 7:44 AM
Unknown Object (File)
Wed, Apr 2, 4:11 AM
Unknown Object (File)
Tue, Apr 1, 1:01 PM
Unknown Object (File)
Tue, Apr 1, 3:52 AM
Unknown Object (File)
Tue, Apr 1, 1:27 AM
Unknown Object (File)
Mon, Mar 31, 11:16 PM
Unknown Object (File)
Mon, Mar 31, 3:49 AM
Unknown Object (File)
Wed, Mar 19, 11:30 PM
View All Files
Subscribers
ashoat
atul
• ted
tomek

Details

Reviewers
atul
kamil
Commits
rCOMMcb315ae7cde7: [landing] add feedback text to subscription form component
Summary

As part of the subscription form redesign we need to show some feedback text to the user depending on the result of the email entered in the subscription form. For reference here are the designs:

Screenshot 2023-05-31 at 12.25.25 PM.png (1×3 px, 1 MB)

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

Depends on D7917

Test Plan

Please see the screenshots below to see what the feedback text looks like:

Desktop:

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

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

Tablet:

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

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

Mobile:

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

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

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.May 31 2023, 9:26 AM
Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMay 31 2023, 9:26 AM
ginsu edited the summary of this revision. (Show Details)May 31 2023, 9:28 AM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, kamil.
ginsu added a parent revision: D7915: [landing] redesign the subscription form component.
ginsu attached a referenced file: F566295: Screenshot 2023-05-31 at 12.21.44 PM.png. (Show Details)
ginsu attached a referenced file: F566296: Screenshot 2023-05-31 at 12.21.49 PM.png. (Show Details)
ginsu attached a referenced file: F566292: Screenshot 2023-05-31 at 12.22.06 PM.png. (Show Details)
ginsu attached a referenced file: F566293: Screenshot 2023-05-31 at 12.22.02 PM.png. (Show Details)
ginsu attached a referenced file: F566290: Screenshot 2023-05-31 at 12.15.27 PM.png. (Show Details)
ginsu attached a referenced file: F566291: Screenshot 2023-05-31 at 12.15.17 PM.png. (Show Details)
ginsu attached a referenced file: F566288: Screenshot 2023-05-22 at 5.10.53 PM.png. (Show Details)
ginsu attached a referenced file: F566287: Screenshot 2023-05-31 at 12.25.25 PM.png. (Show Details)
Harbormaster completed remote builds in B19928: Diff 27308.May 31 2023, 9:44 AM
ginsu requested review of this revision.May 31 2023, 9:44 AM
ginsu added a child revision: D8054: [landing] remove deprecated info blocks.Jun 1 2023, 10:08 AM
ginsu edited the summary of this revision. (Show Details)
ginsu added a parent revision: D7917: [landing] fix css class names for subscription form component.
ginsu removed a parent revision: D7915: [landing] redesign the subscription form component.
atul accepted this revision.Jun 1 2023, 11:09 AM
atul added inline comments.
landing/subscription-form.css
67 ↗(On Diff #27308)

Personally think this green is dull, but subjective

This revision is now accepted and ready to land.Jun 1 2023, 11:09 AM
ashoat added a comment.Jun 1 2023, 11:18 AM

Tablet / mobile screenshots have buttons with text that doesn't appear vertically centered. Can we look into that and ideally resolve it before landing?

ginsu updated this revision to Diff 27409.EditedJun 2 2023, 11:15 AM

fix text vertical alignment

Screenshot 2023-06-02 at 2.10.55 PM.png (2×3 px, 903 KB)

Screenshot 2023-06-02 at 2.10.49 PM.png (2×3 px, 899 KB)

Screenshot 2023-06-02 at 2.11.03 PM.png (2×3 px, 911 KB)

ginsu attached a referenced file: F569583: Screenshot 2023-06-02 at 2.11.03 PM.png. (Show Details)Jun 2 2023, 11:16 AM
ginsu attached a referenced file: F569584: Screenshot 2023-06-02 at 2.10.49 PM.png. (Show Details)
ginsu attached a referenced file: F569585: Screenshot 2023-06-02 at 2.10.55 PM.png. (Show Details)
Harbormaster completed remote builds in B19992: Diff 27409.Jun 2 2023, 11:32 AM
ginsu added a subscriber: • ted.Jun 5 2023, 1:23 PM
ginsu added inline comments.
landing/subscription-form.css
67 ↗(On Diff #27308)

cc @ted

ginsu updated this revision to Diff 29678.Aug 8 2023, 12:28 PM

rebase before landing

Harbormaster completed remote builds in B21632: Diff 29678.Aug 8 2023, 1:47 PM
Closed by commit rCOMMcb315ae7cde7: [landing] add feedback text to subscription form component (authored by ginsu). · Explain WhyAug 8 2023, 2:08 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMcb315ae7cde7: [landing] add feedback text to subscription form component.

Revision Contents
Changeset List

PathSize
landing/
31 lines
37 lines

Diff 29748

View Options

landing/subscription-form.css

Show All 21 Lines
a { a {
text-decoration: none; text-decoration: none;
color: #2a5db0; color: #2a5db0;
} }
img, img,
iframe { iframe {
display: block; display: block;
} }
input[type='text'], input[type='text'],
input[type='password'], input[type='password'],
textarea { textarea {
atulUnsubmitted
Not Done
Inline Actions

Moving the global input styling and moving it to the input component.

Then why are we keeping styles like border and border-radius?

Don't these styles also affect the <textarea> tag? Are you sure we want to be removing these styles for that as well? Or should we break this into two separate selectors (one for input and another for textarea)?

atul: > Moving the global input styling and moving it to the input component. Then why are we…
benschacAuthorUnsubmitted
Done
Inline Actions

Yeah, I should break these styles out a bit more. I don't think they really do anything. But you make a good point that this will also effect textarea elements.

benschac: Yeah, I should break these styles out a bit more. I don't think they really do anything. But…
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0;
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-radius: 1px; border-radius: 1px;
font-family: var(--font-stack); font-family: var(--font-stack);
} }
:global(#react-root) { :global(#react-root) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
▲ Show 20 Lines • Show All 243 Lines • Show Last 20 Lines
View Options

landing/subscription-form.react.js

Show All 21 Lines
a { a {
text-decoration: none; text-decoration: none;
color: #2a5db0; color: #2a5db0;
} }
img, img,
iframe { iframe {
display: block; display: block;
} }
input[type='text'], input[type='text'],
input[type='password'], input[type='password'],
textarea { textarea {
atulUnsubmitted
Not Done
Inline Actions

Moving the global input styling and moving it to the input component.

Then why are we keeping styles like border and border-radius?

Don't these styles also affect the <textarea> tag? Are you sure we want to be removing these styles for that as well? Or should we break this into two separate selectors (one for input and another for textarea)?

atul: > Moving the global input styling and moving it to the input component. Then why are we…
benschacAuthorUnsubmitted
Done
Inline Actions

Yeah, I should break these styles out a bit more. I don't think they really do anything. But you make a good point that this will also effect textarea elements.

benschac: Yeah, I should break these styles out a bit more. I don't think they really do anything. But…
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0;
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-radius: 1px; border-radius: 1px;
font-family: var(--font-stack); font-family: var(--font-stack);
} }
:global(#react-root) { :global(#react-root) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
▲ Show 20 Lines • Show All 243 Lines • Show Last 20 Lines