[HOLD for payment 2023-04-26] Update sign up/sign in screen imagery to match new branding

[shawnborton]

Note: This issue is part of the greater Implement Our New Branding in NewDot project.

What is it: Updating the home page and sign up flow in the app to include our new illustrations. We’ll need to consider what this looks like for both mobile and desktop. Note that this may be adjusted based on passwordless flow.

Mini Design Doc can be found here: https://docs.google.com/document/d/1NxVst1XupNYpLVgknXPPlaQ2wAuR7-_8OmH442mQrzc/edit#

Does it require a mini design doc: Yes, this requires code changes

Design finished: No

cc @GabiHExpensify

[sketchydroide]

I've asked accounting to review the DD here https://expensify.slack.com/archives/C03TUCV48/p1676033288109999 Not sure if the GH was created

[MelvinBot]

:wave: Hello Generalist Track Team - you have been assigned to review this High Level Design Doc. Please, treat this as a priority. Review this Stack Overflow for some tips on reviewing a design doc. Once you are done, simply press the Add "Reviewed Doc" comment button in the right hand side K2 pannel or follow these instructions.

---

• @michaelhaxhiu (Expensifier / Graduate) - https://github.com/Expensify/App/issues/15147
• @grgia (Expensifier / Graduate) - https://github.com/Expensify/App/issues/15148
• @mateocole (Project Manager) - https://github.com/Expensify/App/issues/15149
• @zsgreenwald (Project Manager) - https://github.com/Expensify/App/issues/15150
• @RobertLadue (Product Manager) - https://github.com/Expensify/App/issues/15151
• @stephanieelliott (Product Manager) - https://github.com/Expensify/App/issues/15152
• @ryanschaffer (Generalist) - https://github.com/Expensify/App/issues/15153
• @KirkBarrett (Generalist) - https://github.com/Expensify/App/issues/15154
• @kortneywynn (Accounting Technical Team) - https://github.com/Expensify/App/issues/15155

[luacmartins]

I have read and reviewed this Design Doc!

[Gonals]

I have read and reviewed this Design Doc!

[shawnborton]

I have read and reviewed this Design Doc!

[sketchydroide]

It seems we are getting a few reviews coming, and I think I should restart my work on the detail section tomorrow, I think it will be ready for review early next week

[francoisl]

I have read and reviewed this Design Doc!

[mountiny]

I have read and reviewed this Design Doc!

[sketchydroide]

Accounting GH for Doc review is here, just keeping track of this things so it's easier to follow

[shawnborton]

Assigning @grgia and she is going to lead up implementation.

[dangrous]

I have read and reviewed this Design Doc!

[ryanschaffer]

I have read and reviewed this Design Doc!

[grgia]

I'm planning on looking at the detailed implementation today and making any changes necessary so we can move onto detailed reviews

[JmillsExpensify]

Don't forget to get the Accounting Review in the HL!

[JmillsExpensify]

I have read and reviewed this Design Doc!

[shannonmccallexfy]

Completed the accounting review !

[shawnborton]

Not overdue! Will take a look at the design doc today and then hopefully we can send out for detailed review!

[grgia]

I updated a few sections of the detailed portion of the design doc, so we should be good now to push this forward and send out the detailed section

[MelvinBot]

:wave: Hello Generalist Track Team - you have been assigned to review this High Level Design Doc. Please, treat this as a priority. Review this Stack Overflow for some tips on reviewing a design doc. Once you are done, simply press the Add "Reviewed Doc" comment button in the right hand side K2 pannel or follow these instructions.

---

• @shannonmccallexfy (Expensifier / Graduate) - https://github.com/Expensify/App/issues/15426
• @alexpensify (Expensifier / Graduate) - https://github.com/Expensify/App/issues/15427
• @mateocole (Project Manager) - https://github.com/Expensify/App/issues/15428
• @zsgreenwald (Project Manager) - https://github.com/Expensify/App/issues/15429
• @RobertLadue (Product Manager) - https://github.com/Expensify/App/issues/15430
• @laurenreidexpensify (Product Manager) - https://github.com/Expensify/App/issues/15431
• @anmurali (Generalist) - https://github.com/Expensify/App/issues/15432
• @quinthar (Generalist) - https://github.com/Expensify/App/issues/15433
• @kortneywynn (Accounting Technical Team) - https://github.com/Expensify/App/issues/15434

[grgia]

That should have been a detailed review request ^^

[grgia]

Lets try this again🤞

[MelvinBot]

:wave: Hello Generalist Track Team - you have been assigned to review this Detailed Design Doc. Please, treat this as a priority. Review this Stack Overflow for some tips on reviewing a design doc. Once you are done, simply press the Add "Reviewed Doc" comment button in the right hand side K2 pannel or follow these instructions.

---

• @shannonmccallexfy (Expensifier / Graduate) - https://github.com/Expensify/App/issues/15439
• @alexpensify (Expensifier / Graduate) - https://github.com/Expensify/App/issues/15440
• @mateocole (Project Manager) - https://github.com/Expensify/App/issues/15441
• @zsgreenwald (Project Manager) - https://github.com/Expensify/App/issues/15442
• @nkuoch (Product Manager / Generalist + Engineer) - https://github.com/Expensify/App/issues/15443
• @cead22 (Product Manager / Generalist + Engineer) - https://github.com/Expensify/App/issues/15444
• @puneetlath (Product Manager / Generalist + Engineer) - https://github.com/Expensify/App/issues/15445
• @robertjchen (Product Manager / Generalist + Engineer) - https://github.com/Expensify/App/issues/15446
• @RobertLadue (Product Manager / Generalist + Non-Engineer) - https://github.com/Expensify/App/issues/15447
• @laurenreidexpensify (Product Manager / Generalist + Non-Engineer) - https://github.com/Expensify/App/issues/15448
• @anmurali (Product Manager / Generalist + Non-Engineer) - https://github.com/Expensify/App/issues/15449
• @quinthar (Product Manager / Generalist + Non-Engineer) - https://github.com/Expensify/App/issues/15450

[mountiny]

I have read and reviewed this Design Doc!

[robertjchen]

I have read and reviewed this Design Doc!

[puneetlath]

I have read and reviewed this Design Doc!

[shannonmccallexfy]

I have read and reviewed this Design Doc!

[stephanieelliott]

I have read and reviewed this Design Doc!

[shawnborton]

Not overdue - doc is being reviewed atm!

[michaelhaxhiu]

I have read and reviewed this Design Doc!

[grgia]

Still waiting on reviews to move forward with this :) Currently, we need 1 more Expensifier/Graduate and 6 more Project Managers/Generalists (3 engineers, 3 non-engineers)

[shawnborton]

@alexpensify @mateocole @zsgreenwald @nkuoch @cead22 @RobertLadue @anmurali @quinthar - can you all please try to find some time soon to review this doc? We'd love to get started on implementing the new sign in/up page - it's one of the final pieces of the new brand puzzle on NewDot. Thank you kindly!

[alexpensify]

I have read and reviewed this Design Doc!

[grgia]

One last bump on reviews for this design doc @mateocole @zsgreenwald @nkuoch @cead22 @RobertLadue @anmurali @quinthar

[shawnborton]

Here are the svg illustrations needed for implementation: HomeIllustrations.zip

[nkuoch]

I have read and reviewed this Design Doc!

[RobertLadue]

I have read and reviewed this Design Doc!

[anmurali]

I have read and reviewed this Design Doc!

[cead22]

I have read and reviewed this Design Doc!

[grgia]

Not overdue, @shawnborton started a slack thread here to talk about some doc suggestions for tweaks: https://expensify.slack.com/archives/C03KN50J0PM/p1678296281869769

[quinthar]

I have read and reviewed this Design Doc!

[grgia]

We have updated the design we will be using for the new sign-in imagery:

I'll work on updating this in the design doc. The primary modifications are colors and the fade on web/desktop

[JmillsExpensify]

I have read and reviewed this Design Doc!

[grgia]

Updated the design doc with the photos and updated copy. Last piece I'm missing, @shawnborton do you have any ideas for how we should implement the fade?

[shawnborton]

@grgia I think the fade would just be an absolutely positioned div (view) that has a linear gradient. We would then need to repeat that same shape in the footer area as well. Happy to show you what I mean in CSS terms as well!

[grgia]

@shawnborton is the linear gradient CSS reflected the figma? And when you say repeated in the footer, do you mean that the gradient starts at the right edge of the sign in LHN? And does the same apply for mobile that the gradient starts at the top edge of footer bg?

[shawnborton]

Yup, I think the CSS should work: background: linear-gradient(90deg, #07271F 0%, rgba(0, 46, 34, 0) 100%);

My thought is that it would be a rectangle you use in both the top content area as well as the footer area. The rectangle would be absolutely positioned to the top left. You might need some z-index magic to make sure the content shows on top of it. Then the background image can be applied to the top container and it should show behind the rectangle.

[grgia]

I was looking into linear-gradient and at a first glance, it might not be supported by react native on all platforms. I may need to do some more research/test it out first though. But I did see this alternative using SVGs on an oldish (external) SO:

Just export your gradient as SVG and use it using react-native-svg and when after you import your component set width and height and preserveAspectRatio="xMinYMin slice" to scale an SVG gradient at your needs.

Any thoughts on that solution @shawnborton ?

[shawnborton]

Oh nice, I am down to try that! We can then stretch the svg both vertically and horizontally as we may need.

Here it is as a 560px x 560px square. We can keep the width, but we should stretch it vertically (if possible). If that doesn't work, I can give you a taller one that we can just clip within the view.

home-fade-gradient.svg.zip

[grgia]

Here's a quick example using this method:

One question I have- is there also a vertical fade for the Sign in hero into the footer?

[grgia]

@shawnborton could I get the background buildings SVG with the updated colors?