Skip to content

Commit

Permalink
Initial Bottom Banner Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@grgia
grgia committed Aug 22, 2023
1 parent 769bc7b commit f485cae
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 66 deletions.
110 changes: 89 additions & 21 deletions src/components/ConfirmContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import Button from './Button';
import useLocalize from '../hooks/useLocalize';
import useNetwork from '../hooks/useNetwork';
import Text from './Text';
import variables from '../styles/variables';
import AppIcon from '../../assets/images/expensify-app-icon.svg';
import Icon from './Icon';

const propTypes = {
/** Title of the modal */
Expand Down Expand Up @@ -40,9 +43,28 @@ const propTypes = {
/** Whether we should show the cancel button */
shouldShowCancelButton: PropTypes.bool,

iconSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

shouldCenterContent: PropTypes.bool,

/** Styles for title */
// eslint-disable-next-line react/forbid-prop-types
titleStyles: PropTypes.arrayOf(PropTypes.object),


/** Styles for prompt */
// eslint-disable-next-line react/forbid-prop-types
promptStyles: PropTypes.arrayOf(PropTypes.object),


/** Styles for view */
// eslint-disable-next-line react/forbid-prop-types
contentStyles: PropTypes.arrayOf(PropTypes.object),


/** Styles for icon */
// eslint-disable-next-line react/forbid-prop-types
iconStyles: PropTypes.arrayOf(PropTypes.object),
};

const defaultProps = {
Expand All @@ -55,6 +77,12 @@ const defaultProps = {
shouldDisableConfirmButtonWhenOffline: false,
shouldShowCancelButton: true,
contentStyles: [],
iconSource: null,
shouldCenterContent: false,
titleStyles: [],
promptStyles: [],
iconStyles: [],

};

function ConfirmContent(props) {
Expand All @@ -63,29 +91,69 @@ function ConfirmContent(props) {

return (
<View style={[styles.m5, ...props.contentStyles]}>
<View style={[styles.flexRow, styles.mb4]}>
<Header title={props.title} />
<View style={props.shouldCenterContent ? [styles.alignItemsCenter, styles.mb6] : []}>
{!_.isEmpty(props.iconSource) || _.isFunction(props.iconSource) && (
<View style={[styles.flexRow, styles.mb3]}>
<Icon
src={props.iconSource}
width={variables.mobileBannerAppIconSize}
height={variables.mobileBannerAppIconSize}
additionalStyles={[[...props.iconStyles]]}
/>
</View>
)}

<View style={[styles.flexRow, props.shouldCenterContent ? {} : styles.mb4]}>
<Header title={props.title} textStyles={[...props.titleStyles]}/>
</View>

{_.isString(props.prompt) ? <Text style={[...props.promptStyles, props.shouldCenterContent ? styles.textAlignCenter : {}]}>{props.prompt}</Text> : props.prompt}
</View>

{_.isString(props.prompt) ? <Text>{props.prompt}</Text> : props.prompt}

<Button
success={props.success}
danger={props.danger}
style={[styles.mt4]}
onPress={props.onConfirm}
pressOnEnter
text={props.confirmText || translate('common.yes')}
isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
/>
{props.shouldShowCancelButton && (
<Button
style={[styles.mt3, styles.noSelect]}
onPress={props.onCancel}
text={props.cancelText || translate('common.no')}
shouldUseDefaultHover
/>
)}
{props.shouldCenterContent ? (
<View style={[styles.flexRow, styles.gap4]}>
{props.shouldShowCancelButton && (
<Button
style={[styles.noSelect, styles.flex1]}
onPress={props.onCancel}
text={props.cancelText || translate('common.no')}
shouldUseDefaultHover
medium
/>
)}
<Button
success={props.success}
danger={props.danger}
style={[styles.flex1]}
onPress={props.onConfirm}
pressOnEnter
text={props.confirmText || translate('common.yes')}
isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
medium
/>
</View>
) : (
<>
<Button
success={props.success}
danger={props.danger}
style={[styles.mt4]}
onPress={props.onConfirm}
pressOnEnter
text={props.confirmText || translate('common.yes')}
isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
/>
{props.shouldShowCancelButton && (
<Button
style={[styles.mt3, styles.noSelect]}
onPress={props.onCancel}
text={props.cancelText || translate('common.no')}
shouldUseDefaultHover
/>
) }
</>
)
}
</View>
);
}
Expand Down
22 changes: 22 additions & 0 deletions src/components/ConfirmModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,19 @@ const propTypes = {
/** Should we announce the Modal visibility changes? */
shouldSetModalVisibility: PropTypes.bool,

iconSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

/** Styles for title */
// eslint-disable-next-line react/forbid-prop-types
titleStyles: PropTypes.arrayOf(PropTypes.object),


/** Styles for prompt */
// eslint-disable-next-line react/forbid-prop-types
promptStyles: PropTypes.arrayOf(PropTypes.object),

shouldCenterContent: PropTypes.bool,

...windowDimensionsPropTypes,
};

Expand All @@ -59,7 +72,11 @@ const defaultProps = {
shouldShowCancelButton: true,
shouldSetModalVisibility: true,
title: '',
iconSource: null,
shouldCenterContent: false,
onModalHide: () => {},
titleStyles: [],
promptStyles: [],
};

function ConfirmModal(props) {
Expand All @@ -85,6 +102,11 @@ function ConfirmModal(props) {
danger={props.danger}
shouldDisableConfirmButtonWhenOffline={props.shouldDisableConfirmButtonWhenOffline}
shouldShowCancelButton={props.shouldShowCancelButton}
shouldCenterContent={props.shouldCenterContent}
iconSource={props.iconSource}
iconStyles={props.iconStyles}
titleStyles={props.titleStyles}
promptStyles={props.promptStyles}
/>
</Modal>
);
Expand Down
103 changes: 59 additions & 44 deletions src/components/MobileBanner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import * as Link from '../libs/actions/Link';
import * as Browser from '../libs/Browser';
import getOperatingSystem from '../libs/getOperatingSystem';
import setShowDownloadAppBanner from '../libs/actions/DownloadAppBanner';
import ConfirmModal from './ConfirmModal';

const propTypes = {
showDownloadAppBanner: PropTypes.bool,
Expand All @@ -28,7 +29,9 @@ const defaultProps = {
};

function MobileBanner({showDownloadAppBanner}) {
const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && showDownloadAppBanner);
const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() || true);
const [isModalOpen, setIsModalOpen] = useState(true);

const {translate} = useLocalize();

const handleCloseBanner = () => {
Expand All @@ -49,49 +52,61 @@ function MobileBanner({showDownloadAppBanner}) {
};

return (
shouldShowBanner && (
<View style={[styles.flexRow, styles.alignItemsCenter, styles.pv4, styles.ph5, styles.gap4, styles.activeComponentBG, styles.mw100]}>
<View style={[styles.flex1, styles.flexRow, styles.flexGrow1, styles.alignItemsCenter]}>
<View style={[styles.alignItemsCenter, styles.gap3, styles.flexRow, styles.flex1]}>
<Icon
src={AppIcon}
width={variables.mobileBannerAppIconSize}
height={variables.mobileBannerAppIconSize}
additionalStyles={[styles.appIconBorderRadius]}
/>
<View style={[styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.flex1]}>
<Text
style={[styles.alignSelfStretch, styles.textLabel, styles.textStrong]}
suppressHighlighting
>
{translate('mobileBanner.downloadTheApp')}
</Text>
<Text
style={[styles.alignSelfStretch, styles.textLabel, styles.lh16]}
suppressHighlighting
>
{translate('mobileBanner.keepTheConversationGoing')}
</Text>
</View>
</View>
</View>
<Button
small
success
text={translate('common.download')}
onPress={handleOpenAppStore}
/>
<Tooltip text={translate('common.close')}>
<PressableWithFeedback
onPress={handleCloseBanner}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={translate('common.close')}
>
<Icon src={Expensicons.Close} />
</PressableWithFeedback>
</Tooltip>
</View>
)
<ConfirmModal
title={translate('mobileBanner.downloadTheApp')}
isVisible={shouldShowBanner}
onConfirm={handleOpenAppStore}
onCancel={handleCloseBanner}
prompt={translate('mobileBanner.keepTheConversationGoing')}
confirmText={translate('common.download')}
cancelText={translate('mobileBanner.noThanks')}
// shouldCenterContent
iconSource={AppIcon}
promptStyles={[styles.textNormal, styles.lh20]}
titleStyles={[styles.textHeadline]}
iconStyles={[styles.appIconBorderRadius]}
/>
// <View style={[styles.flexRow, styles.alignItemsCenter, styles.pv4, styles.ph5, styles.gap4, styles.activeComponentBG, styles.mw100]}>
// <View style={[styles.flex1, styles.flexRow, styles.flexGrow1, styles.alignItemsCenter]}>
// <View style={[styles.alignItemsCenter, styles.gap3, styles.flexRow, styles.flex1]}>
// <Icon
// src={AppIcon}
// width={variables.mobileBannerAppIconSize}
// height={variables.mobileBannerAppIconSize}
// additionalStyles={[styles.appIconBorderRadius]}
// />
// <View style={[styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.flex1]}>
// <Text
// style={[styles.alignSelfStretch, styles.textLabel, styles.textStrong]}
// suppressHighlighting
// >
// {translate('mobileBanner.downloadTheApp')}
// </Text>
// <Text
// style={[styles.alignSelfStretch, styles.textLabel, styles.lh16]}
// suppressHighlighting
// >
// {translate('mobileBanner.keepTheConversationGoing')}
// </Text>
// </View>
// </View>
// </View>
// <Button
// small
// success
// text={translate('common.download')}
// onPress={handleOpenAppStore}
// />
// <Tooltip text={translate('common.close')}>
// <PressableWithFeedback
// onPress={handleCloseBanner}
// accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
// accessibilityLabel={translate('common.close')}
// >
// <Icon src={Expensicons.Close} />
// </PressableWithFeedback>
// </Tooltip>
// </View>
);
}

Expand Down
3 changes: 2 additions & 1 deletion src/languages/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,8 @@ export default {
},
mobileBanner: {
downloadTheApp: 'Download the app',
keepTheConversationGoing: 'Keep the conversation going in New Expensify.',
keepTheConversationGoing: 'Keep the conversation going in New Expensify, download the app for an enhanced experience.',
noThanks: 'No thanks',
},
login: {
hero: {
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ export default {
mobileBanner: {
downloadTheApp: 'Descarga la aplicación',
keepTheConversationGoing: 'Mantén la conversación en New Expensify.',
noThanks: '',
},
login: {
hero: {
Expand Down

0 comments on commit f485cae

Please sign in to comment.