From 671ac28501c78280dae52bc5e993cec5f5ee605b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 3 Nov 2021 09:08:28 +0530 Subject: [PATCH 1/4] Fixed SVg image rendering on Login page --- src/components/SVGImage/index.js | 26 ++++++++++++++++++ src/components/SVGImage/index.native.js | 27 +++++++++++++++++++ .../SignInPageLayout/SignInPageLayoutWide.js | 27 +++++++++++-------- src/styles/styles.js | 24 +++++++++++++++++ 4 files changed, 93 insertions(+), 11 deletions(-) create mode 100644 src/components/SVGImage/index.js create mode 100644 src/components/SVGImage/index.native.js diff --git a/src/components/SVGImage/index.js b/src/components/SVGImage/index.js new file mode 100644 index 000000000000..cf9e4ea82191 --- /dev/null +++ b/src/components/SVGImage/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import {Image} from 'react-native'; +import PropTypes from 'prop-types'; +import {getWidthAndHeightStyle} from '../../styles/styles'; + +const propTypes = { + /** The asset to render. */ + src: PropTypes.string.isRequired, + + /** The width of the icon. */ + width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + + /** The height of the icon. */ + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, +}; + +const SVGImage = ({width, height, src}) => ( + +); + +SVGImage.propTypes = propTypes; + +export default SVGImage; diff --git a/src/components/SVGImage/index.native.js b/src/components/SVGImage/index.native.js new file mode 100644 index 000000000000..ce4b40a7253b --- /dev/null +++ b/src/components/SVGImage/index.native.js @@ -0,0 +1,27 @@ + +import React from 'react'; +import {SvgCssUri} from 'react-native-svg'; +import PropTypes from 'prop-types'; + +const propTypes = { + /** The asset to render. */ + src: PropTypes.string.isRequired, + + /** The width of the icon. */ + width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + + /** The height of the icon. */ + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, +}; + +const SVGImage = ({width, height, src}) => ( + +); + +SVGImage.propTypes = propTypes; + +export default SVGImage; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index baa74be76aef..0b372664a09c 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -2,12 +2,14 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; -import styles from '../../../styles/styles'; +import SVGImage from '../../../components/SVGImage'; +import styles, {getBackgroundColorStyle, getLoginPagePromoStyle} from '../../../styles/styles'; import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import Text from '../../../components/Text'; import variables from '../../../styles/variables'; import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import CONST from '../../../CONST'; const propTypes = { /** The children to show inside the layout */ @@ -26,12 +28,11 @@ const propTypes = { ...withLocalizePropTypes, }; -const backgroundStyles = [styles.backgroundBlue, styles.backgroundGreen, styles.backgroundOrange, styles.backgroundPink]; -const backgroundStyle = backgroundStyles[_.random(0, 3)]; +const backgroundStyle = getLoginPagePromoStyle(); const SignInPageLayoutWide = props => ( - + ( /> {props.shouldShowWelcomeText && ( - - {props.welcomeText} - + + {props.welcomeText} + )} {props.children} @@ -65,13 +66,17 @@ const SignInPageLayoutWide = props => ( + > + + ); diff --git a/src/styles/styles.js b/src/styles/styles.js index 28c057eff15a..a13dc02a2664 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import fontFamily from './fontFamily'; import addOutlineWidth from './addOutlineWidth'; import themeColors from './themes/default'; @@ -2462,6 +2463,28 @@ function getEmojiPickerStyle(isSmallScreenWidth) { }; } +function getLoginPagePromoStyle() { + const promos = [ + { + backgroundColor: colors.green, + backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_green.svg`, + }, + { + backgroundColor: colors.orange, + backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_orange.svg`, + }, + { + backgroundColor: colors.pink, + backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_pink.svg`, + }, + { + backgroundColor: colors.blue, + backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_blue.svg`, + }, + ]; + return promos[_.random(0, 3)]; +} + export default styles; export { getSafeAreaPadding, @@ -2483,4 +2506,5 @@ export { getModalPaddingStyles, getFontFamilyMonospace, getEmojiPickerStyle, + getLoginPagePromoStyle, }; From 106228f2b4a71a2fb032c5408e7fe181eed628aa Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 3 Nov 2021 09:40:53 +0530 Subject: [PATCH 2/4] fix: page styles --- src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index 0b372664a09c..46909aef119e 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -1,7 +1,6 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; -import _ from 'underscore'; import SVGImage from '../../../components/SVGImage'; import styles, {getBackgroundColorStyle, getLoginPagePromoStyle} from '../../../styles/styles'; import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; @@ -9,7 +8,6 @@ import Text from '../../../components/Text'; import variables from '../../../styles/variables'; import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import CONST from '../../../CONST'; const propTypes = { /** The children to show inside the layout */ @@ -32,7 +30,7 @@ const backgroundStyle = getLoginPagePromoStyle(); const SignInPageLayoutWide = props => ( - + ( Date: Wed, 3 Nov 2021 09:44:54 +0530 Subject: [PATCH 3/4] refactor Code --- src/components/SVGImage/index.js | 14 ++---------- src/components/SVGImage/index.native.js | 14 ++---------- src/components/SVGImage/propTypes.js | 14 ++++++++++++ src/styles/styles.js | 29 +++++-------------------- 4 files changed, 23 insertions(+), 48 deletions(-) create mode 100644 src/components/SVGImage/propTypes.js diff --git a/src/components/SVGImage/index.js b/src/components/SVGImage/index.js index cf9e4ea82191..ad957895b79d 100644 --- a/src/components/SVGImage/index.js +++ b/src/components/SVGImage/index.js @@ -1,18 +1,7 @@ import React from 'react'; import {Image} from 'react-native'; -import PropTypes from 'prop-types'; import {getWidthAndHeightStyle} from '../../styles/styles'; - -const propTypes = { - /** The asset to render. */ - src: PropTypes.string.isRequired, - - /** The width of the icon. */ - width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - - /** The height of the icon. */ - height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, -}; +import propTypes from './propTypes'; const SVGImage = ({width, height, src}) => ( ( ); SVGImage.propTypes = propTypes; +SVGImage.displayName = 'SVGImage'; export default SVGImage; diff --git a/src/components/SVGImage/index.native.js b/src/components/SVGImage/index.native.js index ce4b40a7253b..e2eeae8d5398 100644 --- a/src/components/SVGImage/index.native.js +++ b/src/components/SVGImage/index.native.js @@ -1,18 +1,7 @@ import React from 'react'; import {SvgCssUri} from 'react-native-svg'; -import PropTypes from 'prop-types'; - -const propTypes = { - /** The asset to render. */ - src: PropTypes.string.isRequired, - - /** The width of the icon. */ - width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - - /** The height of the icon. */ - height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, -}; +import propTypes from './propTypes'; const SVGImage = ({width, height, src}) => ( ( ); SVGImage.propTypes = propTypes; +SVGImage.displayName = 'SVGImage'; export default SVGImage; diff --git a/src/components/SVGImage/propTypes.js b/src/components/SVGImage/propTypes.js new file mode 100644 index 000000000000..a98dab91eb64 --- /dev/null +++ b/src/components/SVGImage/propTypes.js @@ -0,0 +1,14 @@ +import PropTypes from 'prop-types'; + +const propTypes = { + /** The asset to render. */ + src: PropTypes.string.isRequired, + + /** The width of the image. */ + width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + + /** The height of the image. */ + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, +}; + +export default propTypes; diff --git a/src/styles/styles.js b/src/styles/styles.js index a13dc02a2664..3ab2f8965bc0 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -175,30 +175,6 @@ 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: { color: themeColors.textReversed, }, @@ -2463,6 +2439,11 @@ function getEmojiPickerStyle(isSmallScreenWidth) { }; } +/** + * Get the random promo color and image for Login page + * + * @return {Object} + */ function getLoginPagePromoStyle() { const promos = [ { From a08ced4516f6534a2419eaa9dff78306636778e5 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 5 Nov 2021 02:44:04 +0530 Subject: [PATCH 4/4] Removed extra line --- src/components/SVGImage/index.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/SVGImage/index.native.js b/src/components/SVGImage/index.native.js index e2eeae8d5398..ca7df2868c49 100644 --- a/src/components/SVGImage/index.native.js +++ b/src/components/SVGImage/index.native.js @@ -1,4 +1,3 @@ - import React from 'react'; import {SvgCssUri} from 'react-native-svg'; import propTypes from './propTypes';