Update the UpdateAppModal for easier visibility

[kadiealexander]

If you haven’t already, check out our contributing guidelines for onboarding!

---

Expected Result:

When a new update happens, the modal that appears should be non-invasive and modern looking, like this:

Actual Result:

The current modal is clunky and hard to digest, and the button looks humungous:

Action Performed:

1. Log into Expensify.cash
2. Wait for an update to be deployed
3. Observe the modal that appears

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Yes, this is a style update that does not majorly impact the functionality of the site.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: Not applicable
Logs: Not Applicable
Notes/Photos/Videos: Not applicable

[kadiealexander]

Upwork post:

https://www.upwork.com/jobs/~01b6adc982355988c0

[shahkeel]

Proposal:

The width of the modal is not correct we need to reduce the width based on dimensions of window and also need to add the cancel button to again hide and cancel the popup.

First import this
import { Dimensions } from 'react-native'

then give this to the width of modal
width: Dimensions.get('window').width/3,

and also add the cancel btn

[npsedhain]

Hi @kadiealexander, I would love to work on this issue!

I propose to do the following:

1. Discard HeaderWithClose component currently used, and use Header component instead (this also removes the border underneath).
2. Add a Cancel button below the Update App button.
3. Increase the border radius of the modal container using modelContainerStyle.
4. Use existing props from withDimensions to figure out the height and width - we have to decrease the width primarily as per the new design.

Questions:

1. Do we have a Figma file or specification already available for the height and width of the modal? Like the percentage of the total screen width and a minimum width?

[SameeraMadushan]

Hi @kadiealexander

Here is my proposal.

Problem

The current modal doesn't have the modern look and it doesn't follow any of the pre defined modal types.

Solution

• Currently, we have four types of modals.

    MODAL: {
        MODAL_TYPE: {
            CENTERED: 'centered',
            BOTTOM_DOCKED: 'bottom_docked',
            POPOVER: 'popover',
            RIGHT_DOCKED: 'right_docked',

• Current update modal implementation has no any of the above types defined. And the modal UI doesn't match any of the above modal types.
• Therefore I will create a new modal type called CENTER_MIDDLE. Then the new types will be,

    MODAL: {
        MODAL_TYPE: {
            CENTER_MIDDLE: 'center_middle',
            CENTERED: 'centered',
            BOTTOM_DOCKED: 'bottom_docked',
            POPOVER: 'popover',
            RIGHT_DOCKED: 'right_docked',

• Then I will add modal styles inside getModalStyles.js switch case statement as follows,

switch (type) {
        case CONST.MODAL.MODAL_TYPE.CENTER_MIDDLE:
            // A moddle centered modal is one that has a visible backdrop
            // and can be dismissed by clicking outside of the modal.
            modalStyle = {
                ...modalStyle,
                ...{
                    alignItems: 'center',
                },
            };
            modalContainerStyle = {
                // Shadow Styles
                shadowColor: colors.black,
                shadowOffset: {
                    width: 0,
                    height: 0,
                },
                shadowOpacity: 0.1,
                shadowRadius: 5,

                borderRadius: 12,
                overflow: 'hidden',
                width: isSmallScreenWidth ? '90%' : windowWidth * 0.3,   // modal size will define here
                minWidth: isSmallScreenWidth ? '90%' : 400,   // min width maintained for small screen sizes
            };

            // setting this to undefined we effectively disable the
            // ability to swipe our modal
            swipeDirection = undefined;
            animationIn = 'fadeIn';
            animationOut = 'fadeOut';
            shouldAddTopSafeAreaPadding = true;
            break;

• After that, I will add a modified modal type in ModalPropTypes.js (default props),

    // Style of modal to display
    type: PropTypes.oneOf([
        CONST.MODAL.MODAL_TYPE.CENTER_MIDDLE,    // new type
        CONST.MODAL.MODAL_TYPE.CENTERED,
        CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED,
        CONST.MODAL.MODAL_TYPE.POPOVER,
        CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED,
    ]),

• Finally, I will modify the BaseUpdateAppModal.js
• Base modal consist with HeaderWithClose. I will change it to Header component.
• Currently Base update modal has only the update button. I have to add the cancel button with default button styles.
• BaseUpdateAppModal.js render method will be as follows after modification.

    render() {
        return (
            <>
                <Modal
                    onSubmit={this.submitAndClose}
                    onClose={() => this.setState({isModalOpen: false})}
                    isVisible={this.state.isModalOpen}
                    type="center_middle"
                >
                    <View style={[styles.m5]}>
                        <Header
                            title="Update App"
                        />
                        <Text style={[styles.textLabel, styles.mt4]}>
                            A new version of Expensify.cash is available.
                            Update now or restart the app at a later time to download the latest changes.
                        </Text>
                        {this.props.onSubmit && (
                            <TouchableOpacity
                                style={[styles.button, styles.buttonSuccess, styles.mt4]}
                                onPress={this.submitAndClose}
                            >
                                <Text
                                    style={[
                                        styles.buttonText,
                                        styles.buttonSuccessText,
                                        styles.buttonConfirmText,
                                    ]}
                                >
                                    Update App
                                </Text>
                            </TouchableOpacity>
                        )}
                        <TouchableOpacity
                            style={[styles.button, styles.mt3]}
                            onPress={() => this.setState({isModalOpen: false})}
                        >
                            <Text
                                style={[
                                    styles.buttonText,
                                ]}
                            >
                                Cancel
                            </Text>
                        </TouchableOpacity>
                    </View>
                </Modal>
            </>
        );
    }
}

Screenshots

Web

Small Screen (Web)

Mobile

[roryabraham]

@SameeraMadushan, your proposal looks good. My only early piece of feedback is that the new generic modal type should just be called CONFIRM rather than CENTER_MIDDLE.

[SameeraMadushan]

@roryabraham Sure. I will change the type to CONFIRM 🙂

[SameeraMadushan]

@kadiealexander Let me know if I'm good to go with the PR.

[kadiealexander]

Hey @SameeraMadushan! Sorry, we had an internal hiccup that prevented me from moving forward before the weekend. I've just accepted your proposal in Upwork, please go ahead!

[SameeraMadushan]

That's fine @kadiealexander. I will start working on it. Thanks.