Merge pull request Expensify#61996 from nabi-ebrahimi/fix/trips-empty-state-illustration-size

fix Lottie Animation Scaling and container width in Trips Empty State Illustration

Author: grgia

src/pages/Search/EmptySearchView.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo, useRef, useState} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import type {GestureResponderEvent, Text as RNText} from 'react-native';
+import type {GestureResponderEvent, ImageStyle, Text as RNText, ViewStyle} from 'react-native';
 import {Linking, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxCollection} from 'react-native-onyx';
@@ -144,11 +144,11 @@ function EmptySearchView({type, hasResults}: EmptySearchViewProps) {
             case CONST.SEARCH.DATA_TYPES.TRIP:
                 return {
                     headerMedia: LottieAnimations.TripsEmptyState,
-                    headerContentStyles: [StyleUtils.getWidthAndHeightStyle(375, 240), StyleUtils.getBackgroundColorStyle(theme.travelBG)],
+                    headerContentStyles: [styles.emptyStateFolderWebStyles, StyleUtils.getBackgroundColorStyle(theme.travelBG)],
                     title: translate('travel.title'),
                     titleStyles: {...styles.textAlignLeft},
                     children: tripViewChildren,
-                    lottieWebViewStyles: {backgroundColor: theme.travelBG, ...styles.emptyStateFolderWebStyles},
+                    lottieWebViewStyles: {backgroundColor: theme.travelBG, ...styles.emptyStateFolderWebStyles, ...styles.tripEmptyStateLottieWebView},
                 };
             case CONST.SEARCH.DATA_TYPES.EXPENSE:
                 if (!hasResults) {
@@ -247,6 +247,7 @@ function EmptySearchView({type, hasResults}: EmptySearchViewProps) {
         translate,
         styles.textAlignLeft,
         styles.emptyStateFolderWebStyles,
+        styles.tripEmptyStateLottieWebView,
         tripViewChildren,
         hasSeenTour,
         navatticURL,
@@ -272,7 +273,7 @@ function EmptySearchView({type, hasResults}: EmptySearchViewProps) {
                     titleStyles={content.titleStyles}
                     subtitle={content.subtitle}
                     buttons={content.buttons}
-                    headerContentStyles={[styles.h100, styles.w100, ...content.headerContentStyles]}
+                    headerContentStyles={[styles.h100, styles.w100, ...content.headerContentStyles] as Array<ViewStyle & ImageStyle>}
                     lottieWebViewStyles={content.lottieWebViewStyles}
                 >
                     {content.children}

src/styles/index.ts

@@ -5601,6 +5601,11 @@ const styles = (theme: ThemeColors) =>
             ...display.dFlex,
         },
 
+        tripEmptyStateLottieWebView: {
+            width: 335,
+            height: 220,
+        },
+
         workflowApprovalVerticalLine: {
             height: 16,
             width: 1,