Fix - Log in - Promo Colors are changing each time the user writes a new character for new password

[rushatgabhane]

Details

We were getting a random backgroundStyle everytime the component SignInPageLayout rendered.

App/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js

Lines 29 to 32 in 4339b0b

	const SignInPageLayoutWide = (props) => {
	const backgroundStyles = [styles.backgroundBlue, styles.backgroundGreen, styles.backgroundOrange, styles.backgroundPink];
	const backgroundStyle = backgroundStyles[_.random(0, 3)];
	return (

So I just moved it outside of SignInPageLayoutWide function.

App/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js

Lines 29 to 32 in f618cac

	const backgroundStyles = [styles.backgroundBlue, styles.backgroundGreen, styles.backgroundOrange, styles.backgroundPink];
	const backgroundStyle = backgroundStyles[_.random(0, 3)];
	const SignInPageLayoutWide = props => (

Fixed Issues

$ #5912

Tests / QA

1. Navigate to log in screen
2. Enter a new email
3. Look for the validation mail on email inbox
4. Change link to localhost/setpassword/token/id
5. Write some characters in password fields

• Verify that the background color doesn't change on every keystroke.
• Verify that the background color is random on refresh.

Tested On

• Web
• Desktop

Screenshots

Web

Did a refresh to demonstrate that the colors are random on refresh.

Screencast.from.16-10-21.01_17_06.PM.+03.mp4

Desktop

[github-actions]

⚠️ ⚠️ Heads up! This pull request has the CP Staging label. ⚠️ ⚠️
Merging it will cause it to be immediately deployed to staging, even if the open StagingDeployCash deploy checklist is locked.

[Jag96]

LGTM, adding CP Staging label to resolve deploy blocker

[OSBotify]

🚀 Cherry-picked to staging by @Jag96 in version: 1.1.8-3 🚀

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

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.1.8-9 🚀

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

[OSBotify]

🚀 Deployed to staging by @Jag96 in version: 1.1.8-10 🚀

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

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.1.10-2 🚀

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