Page MenuHomePhabricator
Differential D8080

[landing] introduce request access compoonent
ClosedPublic
Actions

Authored by ginsu on Jun 2 2023, 1:02 PM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Apr 11, 2:26 AM
Unknown Object (File)
Tue, Apr 1, 2:54 PM
Unknown Object (File)
Tue, Apr 1, 10:59 AM
Unknown Object (File)
Tue, Apr 1, 4:26 AM
Unknown Object (File)
Mon, Mar 31, 9:33 PM
Unknown Object (File)
Mon, Mar 31, 7:54 PM
Unknown Object (File)
Mon, Mar 31, 5:22 PM
Unknown Object (File)
Mon, Mar 31, 11:53 AM
View All Files
Subscribers
ashoat
• ted
tomek

Details

Reviewers
atul
kamil
Commits
rCOMM3109eb8f6915: [landing] introduce request access compoonent
Summary

As part of the redesign for the landing page there is Request access call to action at the bottom of the main page. This diff creates that section into its own component. Here is a screenshot of the designs for extra context

Screenshot 2023-06-02 at 4.03.43 PM.png (1×3 px, 2 MB)

Depends on D8079

Test Plan

Please watch the demo video below/see the screenshots

Desktop/Responsive:

Tablet:

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

Mobile:

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

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Jun 2 2023, 1:02 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptJun 2 2023, 1:02 PM
ginsu edited the summary of this revision. (Show Details)Jun 2 2023, 1:07 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, kamil.
ginsu added a parent revision: D8079: [landing] repurpose InfoBlock component.
ginsu attached a referenced file: F569870: Screenshot 2023-06-02 at 4.06.58 PM.png. (Show Details)
ginsu attached a referenced file: F569868: Screenshot 2023-06-02 at 3.59.40 PM.png. (Show Details)
ginsu attached a referenced file: F569861: Screen Recording 2023-06-02 at 3.58.04 PM.mov. (Show Details)
ginsu attached a referenced file: F569860: Screenshot 2023-06-02 at 4.03.43 PM.png. (Show Details)
ginsu updated this revision to Diff 27418.Jun 2 2023, 1:09 PM

fix missed merge conflict

ginsu added inline comments.Jun 2 2023, 1:14 PM
landing/global.css
30

Kinda unrelated, but as I was working on this diff, I noticed that I had two --violet-dark-40.

landing/request-access.css
33

If I have time at the end, I will take a look at using box-shadow here and in D8076

ginsu added a child revision: D8081: [landing] add all section components to AppLanding.Jun 2 2023, 1:18 PM
Harbormaster completed remote builds in B20000: Diff 27417.Jun 2 2023, 1:22 PM
Harbormaster completed remote builds in B20001: Diff 27418.Jun 2 2023, 1:27 PM
ginsu requested review of this revision.Jun 2 2023, 1:27 PM
kamil accepted this revision.Jun 6 2023, 2:59 AM
kamil added inline comments.
landing/request-access.react.js
15

Font size seems too big on mobile after looking at the design but not sure how up-to-date are those

This revision is now accepted and ready to land.Jun 6 2023, 2:59 AM
kamil added inline comments.Jun 6 2023, 3:18 AM
landing/request-access.css
5

After looking at the demo the gap between this and upper component feels too big but it's just my personal opinion

ginsu added a subscriber: • ted.Jun 9 2023, 12:45 PM
ginsu added inline comments.
landing/request-access.css
5

Spoke to @ted about this, but we ultimately decided to just keep this as is

landing/request-access.react.js
15

This will be addressed in a subsequent diff (will link diff momentarily)

ginsu mentioned this in D8173: [landing] make typography responsive.Jun 9 2023, 2:50 PM
ginsu added inline comments.Jun 9 2023, 3:20 PM
landing/request-access.react.js
15

D8173

ginsu updated this revision to Diff 29686.Aug 8 2023, 12:33 PM

rebase before landing

This revision was landed with ongoing or failed builds.Aug 8 2023, 2:09 PM
Closed by commit rCOMM3109eb8f6915: [landing] introduce request access compoonent (authored by ginsu). · Explain Why
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMM3109eb8f6915: [landing] introduce request access compoonent.
ginsu mentioned this in rCOMM35aa546e7341: [landing] make typography responsive.
Harbormaster completed remote builds in B21640: Diff 29686.Aug 8 2023, 2:10 PM

Revision Contents
Changeset List

PathSize
landing/
2 lines
34 lines
24 lines

Diff 27418

View Options

landing/global.css

Show First 20 Lines • Show All 275 Lines • ▼ Show 20 Lines:root {
/* Link */ /* Link */
--link-background-primary-default: var(--violet-dark-100); --link-background-primary-default: var(--violet-dark-100);
/* Separator */ /* Separator */
--separator-background-primary-default: var(--shades-black-75); --separator-background-primary-default: var(--shades-black-75);
/* Modal */ /* Modal */
--modal-background-primary-default: var(--shades-black-85); --modal-background-primary-default: var(--shades-black-85);
--modal-background-secondary-default: var(--shades-black-90);
--modal-header-primary-default: var(--shades-white-100); --modal-header-primary-default: var(--shades-white-100);
--modal-close-primary-default: var(--shades-black-50); --modal-close-primary-default: var(--shades-black-50);
--modal-close-primary-hover: var(--shades-white-100); --modal-close-primary-hover: var(--shades-white-100);
--modal-listItem-primary-hover: var(--shades-black-90); --modal-listItem-primary-hover: var(--shades-black-90);
/* Input Field */ /* Input Field */
--inputField-background-primary-default: var(--shades-black-85); --inputField-background-primary-default: var(--shades-black-85);
--inputField-background-secondary-default: var(--shades-black-75); --inputField-background-secondary-default: var(--shades-black-75);
Show All 32 Lines[data-theme='light'] {
/* Link */ /* Link */
--link-background-primary-default: var(--violet-dark-100); --link-background-primary-default: var(--violet-dark-100);
/* Separator */ /* Separator */
--separator-background-primary-default: var(--shades-white-60); --separator-background-primary-default: var(--shades-white-60);
/* Modal */ /* Modal */
--modal-background-primary-default: var(--shades-white-100); --modal-background-primary-default: var(--shades-white-100);
--modal-background-secondary-default: var(--shades-white-80);
--modal-header-primary-default: var(--shades-black-95); --modal-header-primary-default: var(--shades-black-95);
--modal-close-primary-default: var(--shades-black-50); --modal-close-primary-default: var(--shades-black-50);
--modal-close-primary-hover: var(--shades-black-95); --modal-close-primary-hover: var(--shades-black-95);
--modal-listItem-primary-hover: var(--shades-white-70); --modal-listItem-primary-hover: var(--shades-white-70);
/* Input Field */ /* Input Field */
--inputField-background-primary-default: var(--shades-white-100); --inputField-background-primary-default: var(--shades-white-100);
--inputField-background-secondary-default: var(--shades-white-60); --inputField-background-secondary-default: var(--shades-white-60);
Show All 12 Lines
View Options

landing/request-access.css

Show First 20 Lines • Show All 275 Lines • ▼ Show 20 Lines:root {
/* Link */ /* Link */
--link-background-primary-default: var(--violet-dark-100); --link-background-primary-default: var(--violet-dark-100);
/* Separator */ /* Separator */
--separator-background-primary-default: var(--shades-black-75); --separator-background-primary-default: var(--shades-black-75);
/* Modal */ /* Modal */
--modal-background-primary-default: var(--shades-black-85); --modal-background-primary-default: var(--shades-black-85);
--modal-background-secondary-default: var(--shades-black-90);
--modal-header-primary-default: var(--shades-white-100); --modal-header-primary-default: var(--shades-white-100);
--modal-close-primary-default: var(--shades-black-50); --modal-close-primary-default: var(--shades-black-50);
--modal-close-primary-hover: var(--shades-white-100); --modal-close-primary-hover: var(--shades-white-100);
--modal-listItem-primary-hover: var(--shades-black-90); --modal-listItem-primary-hover: var(--shades-black-90);
/* Input Field */ /* Input Field */
--inputField-background-primary-default: var(--shades-black-85); --inputField-background-primary-default: var(--shades-black-85);
--inputField-background-secondary-default: var(--shades-black-75); --inputField-background-secondary-default: var(--shades-black-75);
Show All 32 Lines[data-theme='light'] {
/* Link */ /* Link */
--link-background-primary-default: var(--violet-dark-100); --link-background-primary-default: var(--violet-dark-100);
/* Separator */ /* Separator */
--separator-background-primary-default: var(--shades-white-60); --separator-background-primary-default: var(--shades-white-60);
/* Modal */ /* Modal */
--modal-background-primary-default: var(--shades-white-100); --modal-background-primary-default: var(--shades-white-100);
--modal-background-secondary-default: var(--shades-white-80);
--modal-header-primary-default: var(--shades-black-95); --modal-header-primary-default: var(--shades-black-95);
--modal-close-primary-default: var(--shades-black-50); --modal-close-primary-default: var(--shades-black-50);
--modal-close-primary-hover: var(--shades-black-95); --modal-close-primary-hover: var(--shades-black-95);
--modal-listItem-primary-hover: var(--shades-white-70); --modal-listItem-primary-hover: var(--shades-white-70);
/* Input Field */ /* Input Field */
--inputField-background-primary-default: var(--shades-white-100); --inputField-background-primary-default: var(--shades-white-100);
--inputField-background-secondary-default: var(--shades-white-60); --inputField-background-secondary-default: var(--shades-white-60);
Show All 12 Lines
View Options

landing/request-access.react.js

Show First 20 Lines • Show All 275 Lines • ▼ Show 20 Lines:root {
/* Link */ /* Link */
--link-background-primary-default: var(--violet-dark-100); --link-background-primary-default: var(--violet-dark-100);
/* Separator */ /* Separator */
--separator-background-primary-default: var(--shades-black-75); --separator-background-primary-default: var(--shades-black-75);
/* Modal */ /* Modal */
--modal-background-primary-default: var(--shades-black-85); --modal-background-primary-default: var(--shades-black-85);
--modal-background-secondary-default: var(--shades-black-90);
--modal-header-primary-default: var(--shades-white-100); --modal-header-primary-default: var(--shades-white-100);
--modal-close-primary-default: var(--shades-black-50); --modal-close-primary-default: var(--shades-black-50);
--modal-close-primary-hover: var(--shades-white-100); --modal-close-primary-hover: var(--shades-white-100);
--modal-listItem-primary-hover: var(--shades-black-90); --modal-listItem-primary-hover: var(--shades-black-90);
/* Input Field */ /* Input Field */
--inputField-background-primary-default: var(--shades-black-85); --inputField-background-primary-default: var(--shades-black-85);
--inputField-background-secondary-default: var(--shades-black-75); --inputField-background-secondary-default: var(--shades-black-75);
Show All 32 Lines[data-theme='light'] {
/* Link */ /* Link */
--link-background-primary-default: var(--violet-dark-100); --link-background-primary-default: var(--violet-dark-100);
/* Separator */ /* Separator */
--separator-background-primary-default: var(--shades-white-60); --separator-background-primary-default: var(--shades-white-60);
/* Modal */ /* Modal */
--modal-background-primary-default: var(--shades-white-100); --modal-background-primary-default: var(--shades-white-100);
--modal-background-secondary-default: var(--shades-white-80);
--modal-header-primary-default: var(--shades-black-95); --modal-header-primary-default: var(--shades-black-95);
--modal-close-primary-default: var(--shades-black-50); --modal-close-primary-default: var(--shades-black-50);
--modal-close-primary-hover: var(--shades-black-95); --modal-close-primary-hover: var(--shades-black-95);
--modal-listItem-primary-hover: var(--shades-white-70); --modal-listItem-primary-hover: var(--shades-white-70);
/* Input Field */ /* Input Field */
--inputField-background-primary-default: var(--shades-white-100); --inputField-background-primary-default: var(--shades-white-100);
--inputField-background-secondary-default: var(--shades-white-60); --inputField-background-secondary-default: var(--shades-white-60);
Show All 12 Lines