feat: New landing page design #3079

pranshuchittora · 2021-05-23T17:43:54Z

Details

New landing page design

Fixed Issues

Closes #2938

Tests

QA Steps

Match the UI with the Figma Designs
Previously we are only showing Terms in the mobile. In the new design we are showing Terms as well as license.

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

shawnborton · 2021-05-24T17:41:39Z

Looks like the mobile view should have more padding around the inner logo/UI/etc.

src/styles/variables.js

Jag96

Conflicts and a few comments

src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js

Jag96 · 2021-05-24T18:34:02Z

src/styles/utilities/spacing.js

+        paddingHorizontal: 24,
+    },
+
+    ph7: {


Is this used? If not, let's remove it and any other unused classes that have been added here. For example, we have ph2 and ph4 above but not ph3 since it isn't used.

Ideally we should keep all the values even if they aren't used.
This won't increase the bundle size as unwanted objects will be tree shaken during compile time

Bundle size isn't the reason we want to avoid adding unused classes, the main reason is to avoid adding unnecessary code that can potentially be used by other contributors. In this case, we don't have a need for ph7, but if it is added in this PR then somebody could use ph7 later on and cause inconsistent styles across the app.

Were these removed? I still see them in the project now, it looks like 7-10 are unused after the latest changes.

pranshuchittora · 2021-05-29T06:35:10Z

Looks like the mobile view should have more padding around the inner logo/UI/etc.

Is that works?

fix: Linting issues and removes unwanted props fix: minor styling changes fix: Terms of service component change for native feat: PR review changes and removed unwatned props

Jag96

Added a couple more comments, will let @shawnborton review the latest style

Jag96 · 2021-06-01T17:19:03Z

src/styles/utilities/spacing.js

+        paddingHorizontal: 24,
+    },
+
+    ph7: {


Bundle size isn't the reason we want to avoid adding unused classes, the main reason is to avoid adding unnecessary code that can potentially be used by other contributors. In this case, we don't have a need for ph7, but if it is added in this PR then somebody could use ph7 later on and cause inconsistent styles across the app.

src/styles/styles.js

src/pages/signin/TermsAndLicenses/index.native.js

Jag96

This is looking good to me, good work on this! A few things for @shawnborton to check on since I'm not sure if they're real issues:

Landscape iOS has a bunch of space at the top. Probably not an issue, but just double-checking w/ design
Web with a small window has some tight spacing on the left and bottom, again just double-checking w/ design

Will leave final review to @shawnborton

shawnborton · 2021-06-03T00:25:38Z

Sorry for the delay - hoping to review this tomorrow.

pranshuchittora · 2021-06-04T14:49:34Z

Hi, @shawnborton any update on this?

shawnborton · 2021-06-04T18:37:46Z

Sorry for the delay! Looking into this now, going to start adding design comments.

On desktop, the fine print does not have the same outer padding as the form above it:

shawnborton · 2021-06-04T18:39:25Z

Do we need the padding on the bottom of Forgot?? Doing so makes a slight jump in the position of the input when you go from email to password:

shawnborton · 2021-06-04T18:41:56Z

When the screen is in that weird middle size between mobile and desktop:

Let's actually make sure the content has a max-width and is just centered, like so:

shawnborton · 2021-06-04T18:44:48Z

Expensify at the bottom of the sidebar should actually use a .svg and not be written in text:

You can use this file here and it should be shown at 78px wide: expensify-wordmark.svg.zip

shawnborton · 2021-06-04T18:47:37Z

The sidebar itself should not be a fluid width on wide screens. I see you currently have it at 25%:

It should actually always be fixed at 375, the same as the sidebar width when you are signed into the app. Once we hit the responsive breakpoint where we hide the blue area on the right, then the sidebar should just be 100% wide.

shawnborton · 2021-06-04T18:48:18Z

Just chiming in as well to say I agree with Joe's feedback about this:

Landscape iOS has a bunch of space at the top.

shawnborton · 2021-06-04T18:48:56Z

Also just a heads up that I will be OOO next week, so tagging @michelle-thompson to help out with final design review while I am out.

pranshuchittora · 2021-06-06T15:44:09Z

Do we need the padding on the bottom of Forgot?? Doing so makes a slight jump in the position of the input when you go from email to password:

There is no padding 🤔

pranshuchittora · 2021-06-06T16:04:37Z

Landscape Compatibility and max width

Peek.2021-06-06.21-33.mp4

stephanieelliott · 2021-06-08T13:27:56Z

Hey @Jag96 I think this is blocked on your review? We have a tight deadline for this one, can you take a look when you have a chance?

michelle-thompson · 2021-06-08T16:49:49Z

There is no padding 🤔

As long as the input field doesn't move around when switching screens, that is what's important here.

And I think the landscape view on mobile looks good 👍

pranshuchittora · 2021-07-13T18:51:40Z

@shawnborton I have updated the PR with the final changes.

shawnborton · 2021-07-13T18:54:10Z

Thanks for the update! Do you know what's happening with the fine print here? The line height looks strange:

And cc @kevinksullivan - should it be "New Expensify" or "new Expensify"?

shawnborton · 2021-07-13T18:54:33Z

@pranshuchittora it also looks like you missed changing out Expensify.cash here:

pranshuchittora · 2021-07-13T18:55:11Z

Done

pranshuchittora · 2021-07-13T18:57:32Z

Wait somebody again changes the TermsWithLicenses 🤦🏼

pranshuchittora · 2021-07-13T19:37:37Z

Fixed, it was a file reference issue that occurred due to rebasing with the main.

joelbettner · 2021-07-13T20:11:57Z

src/languages/en.js

@@ -259,17 +259,26 @@ export default {
    },
    signInPage: {
        expensifyDotCash: 'Expensify.cash',
-        expensifyIsOpenSource: 'Expensify.cash is open source',
+        expensifyIsOpenSource: 'New Expensify is open source',


@kevinksullivan is this how we want it to read? As stated elsewhere, this just seems clunky/grammatically incorrect to me.

Perhaps "The new Expensify is open source"?

joelbettner · 2021-07-13T20:14:11Z

src/languages/en.js

@@ -95,7 +95,7 @@ export default {
    hello: 'Hello',
    phoneCountryCode: '1',
    welcomeText: {
-        phrase1: 'With Expensify.cash, chat and payments are the same thing.',
+        phrase1: 'Welcome to new Expensify! Enter your phone or email to continue.',


This language is confusing. Perhaps 'Welcome to the new Expensify! Enter your phone number or email to continue.'

@kevinksullivan does it not seem weird to you to have it say "Welcome to new Expensify!"?

I agree. I think the New Expensify is best as the latest mockup shows.

src/languages/en.js

pranshuchittora · 2021-07-13T20:53:16Z

@joelbettner I have updated the PR. cc @shawnborton

shawnborton · 2021-07-13T20:56:13Z

@pranshuchittora Thank you - one last change - can you please capitalize the "N" in New Expensify?

pranshuchittora · 2021-07-13T20:59:02Z

Done @shawnborton

Jag96

LGTM!

OSBotify · 2021-07-14T00:43:18Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2021-07-14T19:52:27Z

🚀 Deployed to staging in version: 1.0.77-6🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

isagoico · 2021-07-15T13:36:46Z

Web - Profile - Too much space in mweb safari in log in page

Action Performed

Go to staging.expensify.cash

Expected Result

Log in page should be displayed properly

Actual Result

Too much space in mweb safari in log in page

Build: 1.0.78-0

Notes/Images/Video
OS and browser used: Safari

pranshuchittora · 2021-07-15T14:18:33Z

This is the expected behaviour as per the provided design

shawnborton · 2021-07-19T18:12:09Z

True, but I do think it would be nice if that top margin above the icon used a relative unit. Remember I left that comment here: #3079 (comment)

We have this in place on our Expensify.com homepage:

Where the top padding is 15vh. Perhaps we can create a follow up issue to make this a bit more mobile friendly. To clarify, I don't think this is a blocker for paying @pranshuchittora for the work that was completed, I just think we can separately follow up with some enhancements.

OSBotify · 2021-07-23T21:14:55Z

🚀 Deployed to production in version: 1.0.79-4🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

pranshuchittora requested a review from a team as a code owner May 23, 2021 17:43

MelvinBot requested review from Jag96 and removed request for a team May 23, 2021 17:44

shawnborton reviewed May 24, 2021

View reviewed changes

src/styles/variables.js Outdated Show resolved Hide resolved

shawnborton reviewed May 24, 2021

View reviewed changes

src/styles/variables.js Outdated Show resolved Hide resolved

Jag96 suggested changes May 24, 2021

View reviewed changes

pranshuchittora closed this May 29, 2021

pranshuchittora reopened this May 29, 2021

feat: New landing page design

059a4d3

fix: Linting issues and removes unwanted props fix: minor styling changes fix: Terms of service component change for native feat: PR review changes and removed unwatned props

pranshuchittora force-pushed the pranshuchittora/feat/landing-design branch from 72f226c to 059a4d3 Compare May 29, 2021 07:46

Jag96 reviewed Jun 1, 2021

View reviewed changes

chore: PR review changes

7f86170

Jag96 previously approved these changes Jun 2, 2021

View reviewed changes

feat: PR review changes

91a8646

pranshuchittora dismissed Jag96’s stale review via 91a8646 June 6, 2021 16:07

fix: Minor string changes

222e83b

fix: File refs

6857b11

fix: Minor terms styling changes

042cf83

pranshuchittora requested a review from shawnborton July 13, 2021 19:44

joelbettner suggested changes Jul 13, 2021

View reviewed changes

fix: adhoc string changes

ee03da9

fix: Minor string changes

2303b03

shawnborton approved these changes Jul 13, 2021

View reviewed changes

joelbettner approved these changes Jul 13, 2021

View reviewed changes

kevinksullivan approved these changes Jul 14, 2021

View reviewed changes

Jag96 approved these changes Jul 14, 2021

View reviewed changes

Jag96 merged commit b9569af into Expensify:main Jul 14, 2021

This was referenced Jul 14, 2021

Deploy Checklist: Expensify.cash 2021-07-09 #3958

Closed

Deploy Checklist: Expensify.cash 2021-07-14 #4046

Closed

francoisl mentioned this pull request Jul 19, 2021

Web - Safari - Login - Signin page looks weird #4110

Closed

feat: New landing page design #3079

feat: New landing page design #3079

Conversation

pranshuchittora commented May 23, 2021 • edited Loading

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

shawnborton commented May 24, 2021

Jag96 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pranshuchittora commented May 29, 2021 • edited Loading

Jag96 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jag96 left a comment

Choose a reason for hiding this comment

shawnborton commented Jun 3, 2021

pranshuchittora commented Jun 4, 2021

shawnborton commented Jun 4, 2021

shawnborton commented Jun 4, 2021

shawnborton commented Jun 4, 2021

shawnborton commented Jun 4, 2021

shawnborton commented Jun 4, 2021

shawnborton commented Jun 4, 2021

shawnborton commented Jun 4, 2021

pranshuchittora commented Jun 6, 2021

pranshuchittora commented Jun 6, 2021

stephanieelliott commented Jun 8, 2021

michelle-thompson commented Jun 8, 2021

pranshuchittora commented Jul 13, 2021

shawnborton commented Jul 13, 2021 • edited Loading

shawnborton commented Jul 13, 2021

pranshuchittora commented Jul 13, 2021

pranshuchittora commented Jul 13, 2021

pranshuchittora commented Jul 13, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pranshuchittora commented Jul 13, 2021

shawnborton commented Jul 13, 2021

pranshuchittora commented Jul 13, 2021

Jag96 left a comment

Choose a reason for hiding this comment

OSBotify commented Jul 14, 2021

OSBotify commented Jul 14, 2021

isagoico commented Jul 15, 2021

Web - Profile - Too much space in mweb safari in log in page

Action Performed

Expected Result

Actual Result

pranshuchittora commented Jul 15, 2021 • edited Loading

shawnborton commented Jul 19, 2021

OSBotify commented Jul 23, 2021

pranshuchittora commented May 23, 2021 •

edited

Loading

pranshuchittora commented May 29, 2021 •

edited

Loading

shawnborton commented Jul 13, 2021 •

edited

Loading

pranshuchittora commented Jul 13, 2021 •

edited

Loading

pranshuchittora commented Jul 15, 2021 •

edited

Loading