Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[No QA] Design improvements #45996

Merged
merged 11 commits into from
Jul 29, 2024
Merged

[No QA] Design improvements #45996

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
407d952
fix: move to expensifyCard folder
koko57 Jul 19, 2024
e969c68
fix: style fixes
koko57 Jul 19, 2024
7ed4231
fix: resolve conflicts
koko57 Jul 23, 2024
dfc540a
Merge branch 'main' into fix/45733-design-improvements
koko57 Jul 23, 2024
5430694
fix: style adjustments
koko57 Jul 23, 2024
398d54c
fix: android image issue
koko57 Jul 23, 2024
d23cf6b
Merge branch 'main' into fix/45733-design-improvements
koko57 Jul 24, 2024
c14b139
fix: apply requested changes
koko57 Jul 24, 2024
1bbdd99
Merge branch 'main' into fix/45733-design-improvements
koko57 Jul 26, 2024
aca41e1
Merge branch 'main' into fix/45733-design-improvements
koko57 Jul 29, 2024
bbedf30
Merge branch 'main' into fix/45733-design-improvements
koko57 Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/EmptyStateComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function EmptyStateComponent({
subtitle,
headerStyles,
headerContentStyles,
emptyStateContentStyles,
emptyStateForegroundStyles,
}: EmptyStateComponentProps) {
const styles = useThemeStyles();
const {isSmallScreenWidth} = useWindowDimensions();
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/EmptyStateComponent/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> & {
Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,7 +413,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,
Expand Down
13 changes: 10 additions & 3 deletions src/pages/workspace/expensifyCard/EmptyCardView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
Expand Down
0 .../workspace/card/issueNew/AssigneeStep.tsx → ...e/expensifyCard/issueNew/AssigneeStep.tsx
View file
Open in desktop
File renamed without changes.
0 .../workspace/card/issueNew/CardNameStep.tsx → ...e/expensifyCard/issueNew/CardNameStep.tsx
View file
Open in desktop
File renamed without changes.
0 .../workspace/card/issueNew/CardTypeStep.tsx → ...e/expensifyCard/issueNew/CardTypeStep.tsx
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion ...kspace/card/issueNew/ConfirmationStep.tsx → ...pensifyCard/issueNew/ConfirmationStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
0 ...kspace/card/issueNew/IssueNewCardPage.tsx → ...pensifyCard/issueNew/IssueNewCardPage.tsx
View file
Open in desktop
File renamed without changes.
0 ...ges/workspace/card/issueNew/LimitStep.tsx → ...pace/expensifyCard/issueNew/LimitStep.tsx
View file
Open in desktop
File renamed without changes.
2 changes: 2 additions & 0 deletions ...workspace/card/issueNew/LimitTypeStep.tsx → .../expensifyCard/issueNew/LimitTypeStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,8 @@ function LimitTypeStep({policy}: LimitTypeStepProps) {
onSelectRow={({value}) => setTypeSelected(value)}
sections={[{data}]}
shouldDebounceRowSelect
initiallyFocusedOptionKey={typeSelected}
shouldUpdateFocusedIndex
/>
<Button
success
Expand Down
Loading