From b7c02f5c7e799d3ef2871a6566dab648a90d86d6 Mon Sep 17 00:00:00 2001 From: cowboycito Date: Wed, 30 Nov 2022 20:47:32 -0300 Subject: [PATCH] Implemented launcher screen design and fixed iOS issue --- assets/images/expensify-wordmark.svg | 5 +- .../product-illustrations/rocket--blue.svg | 286 ++++++++++++++++++ .../DeeplinkWrapper.website.js | 71 ++++- src/components/Icon/Illustrations.js | 2 + src/languages/en.js | 6 + src/pages/ErrorPage/GenericErrorPage.js | 3 +- src/pages/signin/TermsAndLicenses.js | 3 +- src/styles/fontFamily/index.js | 10 + src/styles/styles.js | 19 ++ 9 files changed, 383 insertions(+), 22 deletions(-) create mode 100644 assets/images/product-illustrations/rocket--blue.svg diff --git a/assets/images/expensify-wordmark.svg b/assets/images/expensify-wordmark.svg index b90d7fb3c0f7..73018497030b 100644 --- a/assets/images/expensify-wordmark.svg +++ b/assets/images/expensify-wordmark.svg @@ -1,10 +1,7 @@ - + viewBox="0 0 78 18" style="enable-background:new 0 0 78 18;" xml:space="preserve"> diff --git a/assets/images/product-illustrations/rocket--blue.svg b/assets/images/product-illustrations/rocket--blue.svg new file mode 100644 index 000000000000..b59e8a28c8ca --- /dev/null +++ b/assets/images/product-illustrations/rocket--blue.svg @@ -0,0 +1,286 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/DeeplinkWrapper/DeeplinkWrapper.website.js b/src/components/DeeplinkWrapper/DeeplinkWrapper.website.js index 3764b0b1a34d..ed4c5e616e9b 100644 --- a/src/components/DeeplinkWrapper/DeeplinkWrapper.website.js +++ b/src/components/DeeplinkWrapper/DeeplinkWrapper.website.js @@ -4,15 +4,23 @@ import PropTypes from 'prop-types'; import React, {PureComponent} from 'react'; import deeplinkRoutes from './deeplinkRoutes'; import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator'; -import Button from '../Button'; +import TextLink from '../TextLink'; +import * as Illustrations from '../Icon/Illustrations'; +import LogoWordmark from '../../../assets/images/expensify-wordmark.svg'; +import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Text from '../Text'; import styles from '../../styles/styles'; import CONST from '../../CONST'; import CONFIG from '../../CONFIG'; +import * as FontFamily from '../../styles/fontFamily'; +import Icon from '../Icon'; +import colors from '../../styles/colors'; const propTypes = { /** Children to render. */ children: PropTypes.node.isRequired, + + ...withLocalizePropTypes, }; class DeeplinkWrapper extends PureComponent { @@ -65,9 +73,22 @@ class DeeplinkWrapper extends PureComponent { window.location = `${CONST.DEEPLINK_BASE_URL}${expensifyUrl.host}${pathname}`; } + isiOSWeb() { + return [ + 'iPad Simulator', + 'iPhone Simulator', + 'iPod Simulator', + 'iPad', + 'iPhone', + 'iPod', + ].includes(navigator.platform) + || (navigator.userAgent.includes('Mac') && 'ontouchend' in document) + } + isMacOSWeb() { if ( - typeof navigator === 'object' + !this.isiOSWeb() + && typeof navigator === 'object' && typeof navigator.userAgent === 'string' && /Mac/i.test(navigator.userAgent) && !/Electron/i.test(navigator.userAgent) @@ -88,19 +109,37 @@ class DeeplinkWrapper extends PureComponent { && this.state.appInstallationCheckStatus === 'installed' ) { return ( - - It looks like you have the desktop app installed. How do you wish to proceed? - - - - + diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/TermsAndLicenses.js index a9f9b8d6b520..deaed38c161e 100644 --- a/src/pages/signin/TermsAndLicenses.js +++ b/src/pages/signin/TermsAndLicenses.js @@ -7,6 +7,7 @@ import TextLink from '../../components/TextLink'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import LogoWordmark from '../../../assets/images/expensify-wordmark.svg'; import LocalePicker from '../../components/LocalePicker'; +import colors from '../../styles/colors'; const TermsAndLicenses = props => ( <> @@ -31,7 +32,7 @@ const TermsAndLicenses = props => ( . - + diff --git a/src/styles/fontFamily/index.js b/src/styles/fontFamily/index.js index a72945b7c838..f2d10bc860b9 100644 --- a/src/styles/fontFamily/index.js +++ b/src/styles/fontFamily/index.js @@ -13,4 +13,14 @@ const fontFamily = { EMOJI_TEXT_FONT: emojiFont, }; +const newKansas = { + NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Meduim', + NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic', +}; + export default fontFamily; + +export { + fontFamily, + newKansas, +}; diff --git a/src/styles/styles.js b/src/styles/styles.js index 27195c89ac6d..8f7c466f6da8 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2832,6 +2832,25 @@ const styles = { paddingLeft: 18, paddingRight: 18, }, + + deeplinkWrapperContainer: { + padding: 20, + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: themeColors.appBG, + }, + + deeplinkWrapperInfoSection: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + + deeplinkWrapperFooter: { + paddingTop: 80, + paddingBottom: 45, + }, }; export default styles;