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

Jump to bottom

Fix Expensify Card empty state list cuts off centered modal #46649

Merged
merged 5 commits into from
Aug 6, 2024
Merged

Fix Expensify Card empty state list cuts off centered modal #46649

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
36c9605
Fix modal height
filip-solecki Aug 1, 2024
8d2780c
Add more space above modal
filip-solecki Aug 2, 2024
cba2cba
Fix padding of centered modal
filip-solecki Aug 2, 2024
89ee3db
Merge branch 'main' into filip-solecki/empty-state-modal-height-fix
filip-solecki Aug 6, 2024
aca8eb1
Fix after main merge
filip-solecki Aug 6, 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
8 changes: 4 additions & 4 deletions src/components/EmptyStateComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import Lottie from '@components/Lottie';
import ScrollView from '@components/ScrollView';
import Text from '@components/Text';
import VideoPlayer from '@components/VideoPlayer';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
import type {EmptyStateComponentProps, VideoLoadedEventType} from './types';
Expand All @@ -25,9 +24,9 @@ function EmptyStateComponent({
headerStyles,
headerContentStyles,
emptyStateForegroundStyles,
minModalHeight = 400,
}: EmptyStateComponentProps) {
const styles = useThemeStyles();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);

const setAspectRatio = (event: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
Expand Down Expand Up @@ -79,14 +78,15 @@ function EmptyStateComponent({
}, [headerMedia, headerMediaType, headerContentStyles, videoAspectRatio, styles.emptyStateVideo]);

return (
<ScrollView contentContainerStyle={styles.emptyStateScrollView}>
<ScrollView contentContainerStyle={[styles.emptyStateScrollView, {minHeight: minModalHeight}]}>
<View style={styles.skeletonBackground}>
<SkeletonComponent
gradientOpacityEnabled
shouldAnimate={false}
/>
</View>
<View style={[styles.emptyStateForeground(shouldUseNarrowLayout), emptyStateForegroundStyles]}>

<View style={[styles.emptyStateForeground, emptyStateForegroundStyles]}>
<View style={styles.emptyStateContent}>
<View style={[styles.emptyStateHeader(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
<View style={styles.p8}>
Expand Down
1 change: 1 addition & 0 deletions src/components/EmptyStateComponent/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ type SharedProps<T> = {
headerMediaType: T;
headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
emptyStateForegroundStyles?: StyleProp<ViewStyle>;
minModalHeight?: number;
};

type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {
Expand Down
1 change: 1 addition & 0 deletions src/pages/workspace/expensifyCard/EmptyCardView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function EmptyCardView() {
title={translate('workspace.expensifyCard.issueAndManageCards')}
subtitle={translate('workspace.expensifyCard.getStartedIssuing')}
emptyStateForegroundStyles={isSmallScreenWidth && {justifyContent: 'flex-start'}}
minModalHeight={500}
filip-solecki marked this conversation as resolved.
Show resolved Hide resolved
/>
</View>
<Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.expensifyCard.disclaimer')}</Text>
Expand Down
10 changes: 4 additions & 6 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5110,19 +5110,17 @@ const styles = (theme: ThemeColors) =>
},

emptyStateScrollView: {
marginTop: 12,
minHeight: 400,
height: '100%',
flex: 1,
},

emptyStateForeground: (isSmallScreenWidth: boolean) => ({
emptyStateForeground: {
padding: 32,
justifyContent: 'center',
alignItems: 'center',
height: '100%',
padding: isSmallScreenWidth ? 32 : 0,
width: '100%',
}),
boxSizing: 'content-box',
},

emptyStateContent: {
backgroundColor: theme.cardBG,
Expand Down
Loading