Merge pull request #5318 from Expensify/alberto-brandImages

Updates NewDot homepage to reflect N6 campaign (cherry picked from commit abed3f8)
Expensify · Oct 15, 2021 · 16342fe · 16342fe
1 parent 42ea836
commit 16342fe
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 94 deletions.
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -1,15 +1,13 @@
 import React from 'react';
-import {Image, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import styles from '../../../styles/styles';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import Text from '../../../components/Text';
-import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png';
 import variables from '../../../styles/variables';
 import TermsAndLicenses from '../TermsAndLicenses';
-import CONST from '../../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import TextLink from '../../../components/TextLink';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -28,89 +26,56 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const SignInPageLayoutWide = props => (
-    <View style={[styles.flex1, styles.signInPageInner]}>
-        <View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
-            <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
-                <View style={[
-                    styles.flex1,
-                    styles.dFlex,
-                    styles.flexColumn,
-                    styles.mt40Percentage,
-                    styles.signInPageFormContainer,
-                    styles.alignSelfCenter,
-                ]}
-                >
-                    <View style={[styles.flex1]}>
-                        <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
-                            <ExpensifyCashLogo
-                                width={variables.componentSizeLarge}
-                                height={variables.componentSizeLarge}
-                            />
+const SignInPageLayoutWide = (props) => {
+    const backgroundStyles = [styles.backgroundBlue, styles.backgroundGreen, styles.backgroundOrange, styles.backgroundPink];
+    const backgroundStyle = backgroundStyles[_.random(0, 3)];
+    return (
+        <View style={[styles.flex1, styles.signInPageInner]}>
+            <View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
+                <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
+                    <View style={[
+                        styles.flex1,
+                        styles.dFlex,
+                        styles.flexColumn,
+                        styles.mt40Percentage,
+                        styles.signInPageFormContainer,
+                        styles.alignSelfCenter,
+                    ]}
+                    >
+                        <View style={[styles.flex1]}>
+                            <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
+                                <ExpensifyCashLogo
+                                    width={variables.componentSizeLarge}
+                                    height={variables.componentSizeLarge}
+                                />
+                            </View>
+                            {props.shouldShowWelcomeText && (
+                                <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                                    {props.welcomeText}
+                                </Text>
+                            )}
+                            <View>
+                                {props.children}
+                            </View>
                         </View>
-                        {props.shouldShowWelcomeText && (
-                            <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
-                                {props.welcomeText}
-                            </Text>
-                        )}
-                        <View>
-                            {props.children}
+                        <View style={[styles.mv5]}>
+                            <TermsAndLicenses />
                         </View>
                     </View>
-                    <View style={[styles.mv5]}>
-                        <TermsAndLicenses />
-                    </View>
-                </View>
-            </View>
-            <View style={[
-                styles.flexGrow1,
-                styles.dFlex,
-                styles.flexRow,
-                styles.justifyContentAround,
-                styles.backgroundBlue,
-                styles.pb10Percentage,
-                !props.isMediumScreenWidth && styles.p20,
-                props.isMediumScreenWidth && styles.p10,
-                props.isMediumScreenWidth && styles.alignItemsCenter,
-            ]}
-            >
-                <View style={[styles.dFlex, styles.flexColumnReverse, styles.alignItemsCenter, styles.w50]}>
-                    <View style={[styles.signInPageWideHeroContent, styles.m4]}>
-                        <Text style={[styles.signInPageHeroHeading]}>{props.translate('signInPage.heroHeading')}</Text>
-                        <Text style={[styles.signInPageHeroDescription, styles.mt5]}>
-                            {props.translate('signInPage.heroDescription.phrase1')}
-                            {'\n\n'}
-                            {props.translate('signInPage.heroDescription.phrase2')}
-                            {' '}
-                            <TextLink href={CONST.GITHUB_URL}>
-                                <Text style={[styles.textUnderline, styles.textWhite]}>
-                                    {props.translate('signInPage.heroDescription.phrase3')}
-                                </Text>
-                            </TextLink>
-                            {'. '}
-                            {props.translate('signInPage.heroDescription.phrase4')}
-                            {' '}
-                            <TextLink href={CONST.UPWORK_URL}>
-                                <Text style={[styles.textUnderline, styles.textWhite]}>
-                                    {props.translate('signInPage.heroDescription.phrase5')}
-                                </Text>
-                            </TextLink>
-
-                            .
-                        </Text>
-                    </View>
-                </View>
-                <View style={[styles.w50, styles.dFlex, styles.flexColumnReverse, styles.alignItemsCenter]}>
-                    <Image
-                        resizeMode="contain"
-                        style={[styles.signInWelcomeScreenshotWide]}
-                        source={welcomeScreenshot}
-                    />
                 </View>
+                <View style={[
+                    styles.flexGrow1,
+                    styles.dFlex,
+                    styles.flexRow,
+                    styles.background100,
+                    backgroundStyle,
+                    props.isMediumScreenWidth && styles.alignItemsCenter,
+                ]}
+                />
             </View>
         </View>
-    </View>
-);
+    );
+};
 
 SignInPageLayoutWide.propTypes = propTypes;
 SignInPageLayoutWide.displayName = 'SignInPageLayoutWide';

diff --git a/src/styles/colors.js b/src/styles/colors.js
@@ -10,6 +10,8 @@ export default {
     blueHover: '#0063bf',
     green: '#03d47c',
     greenHover: '#03c775',
+    orange: '#ff7101',
+    pink: '#f68dfe',
     red: '#fc3826',
     redHover: '#e13826',
     redDisabled: '#fea29a',

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -181,8 +181,28 @@ const styles = {
         textTransform: 'uppercase',
     },
 
+    background100: {
+        backgroundSize: '100% 100%',
+    },
+
+    backgroundGreen: {
+        backgroundColor: colors.green,
+        backgroundImage: `url(${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_green.svg)`,
+    },
+
+    backgroundOrange: {
+        backgroundColor: colors.orange,
+        backgroundImage: `url(${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_orange.svg)`,
+    },
+
+    backgroundPink: {
+        backgroundColor: colors.pink,
+        backgroundImage: `url(${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_pink.svg)`,
+    },
+
     backgroundBlue: {
         backgroundColor: colors.blue,
+        backgroundImage: `url(${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_blue.svg)`,
     },
 
     colorReversed: {
@@ -650,19 +670,6 @@ const styles = {
         marginBottom: 24,
     },
 
-    signinWelcomeScreenshot: {
-        height: 354,
-        width: 295,
-    },
-
-    signInWelcomeScreenshotWide: {
-        aspectRatio: 1,
-        width: '100%',
-        height: '100%',
-        maxHeight: 551,
-        minHeight: 300,
-    },
-
     genericView: {
         backgroundColor: themeColors.heading,
         height: '100%',