Merge pull request #45996 from koko57/fix/45733-design-improvements

Expensify · Jul 29, 2024 · 66ebb3e · 66ebb3e
2 parents 00d2c42 + bbedf30
commit 66ebb3e
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 16 deletions.
diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
@@ -24,7 +24,7 @@ function EmptyStateComponent({
     subtitle,
     headerStyles,
     headerContentStyles,
-    emptyStateContentStyles,
+    emptyStateForegroundStyles,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -86,8 +86,8 @@ function EmptyStateComponent({
                     shouldAnimate={false}
                 />
             </View>
-            <View style={styles.emptyStateForeground(isSmallScreenWidth)}>
-                <View style={[styles.emptyStateContent, emptyStateContentStyles]}>
+            <View style={[styles.emptyStateForeground(isSmallScreenWidth), emptyStateForegroundStyles]}>
+                <View style={styles.emptyStateContent}>
                     <View style={[styles.emptyStateHeader(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
                     <View style={styles.p8}>
                         <Text style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2]}>{title}</Text>

diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts
@@ -19,7 +19,7 @@ type SharedProps<T> = {
     headerStyles?: StyleProp<ViewStyle>;
     headerMediaType: T;
     headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
-    emptyStateContentStyles?: StyleProp<ViewStyle>;
+    emptyStateForegroundStyles?: StyleProp<ViewStyle>;
 };
 
 type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -418,7 +418,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.TAX_VALUE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/ValuePage').default,
     [SCREENS.WORKSPACE.TAX_CREATE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default,
     [SCREENS.WORKSPACE.TAX_CODE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxCodePage').default,
-    [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require<ReactComponentModule>('../../../../pages/workspace/card/issueNew/IssueNewCardPage').default,
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/issueNew/IssueNewCardPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceCardSettingsPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceSettlementAccountPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_FREQUENCY]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage').default,

diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
@@ -8,6 +8,7 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
 
 const HEADER_HEIGHT = 80;
@@ -23,15 +24,21 @@ function EmptyCardView() {
 
     return (
         <ScrollView>
-            <View style={{height: windowHeight - headerHeight}}>
+            <View style={[{height: windowHeight - headerHeight}, styles.mt5]}>
                 <EmptyStateComponent
                     SkeletonComponent={CardRowSkeleton}
                     headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
                     headerMedia={Illustrations.EmptyCardState}
-                    headerStyles={[{overflow: 'hidden'}, isSmallScreenWidth && {maxHeight: 300}]}
+                    headerStyles={[
+                        {
+                            overflow: 'hidden',
+                            backgroundColor: colors.green700,
+                        },
+                        isSmallScreenWidth && {maxHeight: 250},
+                    ]}
                     title={translate('workspace.expensifyCard.issueAndManageCards')}
                     subtitle={translate('workspace.expensifyCard.getStartedIssuing')}
-                    emptyStateContentStyles={isSmallScreenWidth ? {top: -BUTTON_HEIGHT} : undefined}
+                    emptyStateForegroundStyles={isSmallScreenWidth && {justifyContent: 'flex-start'}}
                 />
             </View>
             <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.expensifyCard.disclaimer')}</Text>

diff --git a/.../workspace/card/issueNew/AssigneeStep.tsx → ...e/expensifyCard/issueNew/AssigneeStep.tsx b/.../workspace/card/issueNew/AssigneeStep.tsx → ...e/expensifyCard/issueNew/AssigneeStep.tsx
diff --git a/.../workspace/card/issueNew/CardNameStep.tsx → ...e/expensifyCard/issueNew/CardNameStep.tsx b/.../workspace/card/issueNew/CardNameStep.tsx → ...e/expensifyCard/issueNew/CardNameStep.tsx
@@ -75,8 +75,7 @@ function CardNameStep() {
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.giveItName')}</Text>
             <FormProvider
                 formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM}
-                // TODO: change the submitButtonText to 'common.confirm' when editing and navigate to ConfirmationStep
-                submitButtonText={translate('common.next')}
+                submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
                 onSubmit={submit}
                 validate={validate}
                 style={[styles.mh5, styles.flexGrow1]}

diff --git a/.../workspace/card/issueNew/CardTypeStep.tsx → ...e/expensifyCard/issueNew/CardTypeStep.tsx b/.../workspace/card/issueNew/CardTypeStep.tsx → ...e/expensifyCard/issueNew/CardTypeStep.tsx
diff --git a/...kspace/card/issueNew/ConfirmationStep.tsx → ...pensifyCard/issueNew/ConfirmationStep.tsx b/...kspace/card/issueNew/ConfirmationStep.tsx → ...pensifyCard/issueNew/ConfirmationStep.tsx
@@ -67,7 +67,7 @@ function ConfirmationStep() {
                 contentContainerStyle={styles.flexGrow1}
             >
                 <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.letsDoubleCheck')}</Text>
-                <Text style={[styles.textLabelSupporting, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.willBeReady')}</Text>
+                <Text style={[styles.textSupporting, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.willBeReady')}</Text>
                 <MenuItemWithTopDescription
                     description={translate('workspace.card.issueNewCard.cardholder')}
                     title={PersonalDetailsUtils.getPersonalDetailByEmail(data?.assigneeEmail ?? '')?.displayName}

diff --git a/...kspace/card/issueNew/IssueNewCardPage.tsx → ...pensifyCard/issueNew/IssueNewCardPage.tsx b/...kspace/card/issueNew/IssueNewCardPage.tsx → ...pensifyCard/issueNew/IssueNewCardPage.tsx
diff --git a/...ges/workspace/card/issueNew/LimitStep.tsx → ...pace/expensifyCard/issueNew/LimitStep.tsx b/...ges/workspace/card/issueNew/LimitStep.tsx → ...pace/expensifyCard/issueNew/LimitStep.tsx
@@ -79,15 +79,15 @@ function LimitStep() {
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.setLimit')}</Text>
             <FormProvider
                 formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM}
-                // TODO: change the submitButtonText to 'common.confirm' when editing and navigate to ConfirmationStep
-                submitButtonText={translate('common.next')}
+                submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
                 shouldHideFixErrorsAlert
                 onSubmit={submit}
                 style={[styles.flex1]}
                 submitButtonStyles={[styles.mh5, styles.mt0]}
                 submitFlexEnabled={false}
-                enabledWhenOffline
+                disablePressOnEnter={false}
                 validate={validate}
+                enabledWhenOffline
             >
                 <InputWrapper
                     InputComponent={AmountForm}

diff --git a/...workspace/card/issueNew/LimitTypeStep.tsx → .../expensifyCard/issueNew/LimitTypeStep.tsx b/...workspace/card/issueNew/LimitTypeStep.tsx → .../expensifyCard/issueNew/LimitTypeStep.tsx
@@ -106,13 +106,14 @@ function LimitTypeStep({policy}: LimitTypeStepProps) {
                 onSelectRow={({value}) => setTypeSelected(value)}
                 sections={[{data}]}
                 shouldDebounceRowSelect
+                initiallyFocusedOptionKey={typeSelected}
+                shouldUpdateFocusedIndex
             />
             <Button
                 success
                 large
                 pressOnEnter
-                // TODO: change the text to 'common.confirm' when editing and navigate to ConfirmationStep
-                text={translate('common.next')}
+                text={translate(isEditing ? 'common.confirm' : 'common.next')}
                 onPress={submit}
                 style={styles.m5}
             />