From b4906b2b787cc948901854220118fcd5ccde92d6 Mon Sep 17 00:00:00 2001
From: Wiktor Gut <wiktor.gut@swmansion.com>
Date: Fri, 9 Aug 2024 15:15:35 +0200
Subject: [PATCH 1/5] main solution

---
 src/components/EmptyStateComponent/index.tsx   | 3 ++-
 src/components/EmptyStateComponent/types.ts    | 1 +
 src/components/Skeletons/SearchRowSkeleton.tsx | 4 ++--
 src/pages/Search/EmptySearchView.tsx           | 1 +
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index 1efa526355f1..1e8ff5509ffc 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -25,6 +25,7 @@ function EmptyStateComponent({
     headerContentStyles,
     emptyStateForegroundStyles,
     minModalHeight = 400,
+    optionalStyles,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
     const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
@@ -79,7 +80,7 @@ function EmptyStateComponent({
 
     return (
         <ScrollView contentContainerStyle={[styles.emptyStateScrollView, {minHeight: minModalHeight}]}>
-            <View style={styles.skeletonBackground}>
+            <View style={[styles.skeletonBackground, optionalStyles]}>
                 <SkeletonComponent
                     gradientOpacityEnabled
                     shouldAnimate={false}
diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts
index 94860893c2c4..01014ada97a7 100644
--- a/src/components/EmptyStateComponent/types.ts
+++ b/src/components/EmptyStateComponent/types.ts
@@ -25,6 +25,7 @@ type SharedProps<T> = {
 
 type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {
     headerMedia: HeaderMedia;
+    optionalStyles?: ViewStyle;
 };
 
 type VideoProps = MediaType<string, 'video'>;
diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx
index 2359e47b7520..ea4ae944388f 100644
--- a/src/components/Skeletons/SearchRowSkeleton.tsx
+++ b/src/components/Skeletons/SearchRowSkeleton.tsx
@@ -35,7 +35,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
         return (
             <ItemListSkeletonView
                 itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT}
-                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr3, styles.ml3]}
+                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
                 gradientOpacityEnabled={gradientOpacityEnabled}
                 shouldAnimate={shouldAnimate}
                 fixedNumItems={fixedNumItems}
@@ -117,7 +117,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr3, styles.ml3]}
+            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
             renderSkeletonItem={() => (
                 <>
                     <Rect
diff --git a/src/pages/Search/EmptySearchView.tsx b/src/pages/Search/EmptySearchView.tsx
index 474cbfc0aff8..7684adfaef79 100644
--- a/src/pages/Search/EmptySearchView.tsx
+++ b/src/pages/Search/EmptySearchView.tsx
@@ -19,6 +19,7 @@ function EmptySearchView() {
             headerContentStyles={styles.emptyStateFolderIconSize}
             title={translate('search.searchResults.emptyResults.title')}
             subtitle={translate('search.searchResults.emptyResults.subtitle')}
+            optionalStyles={{padding: 0}}
         />
     );
 }

From 3c9df2bafbb2fbdc4a24ff9c3495ed1abea6e2c4 Mon Sep 17 00:00:00 2001
From: Wiktor Gut <wiktor.gut@swmansion.com>
Date: Fri, 9 Aug 2024 15:49:52 +0200
Subject: [PATCH 2/5] second solution

---
 src/components/EmptyStateComponent/index.tsx   | 3 +--
 src/components/EmptyStateComponent/types.ts    | 1 -
 src/components/Search/index.tsx                | 5 ++++-
 src/components/Skeletons/SearchRowSkeleton.tsx | 4 ++--
 src/pages/Search/EmptySearchView.tsx           | 1 -
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index 1e8ff5509ffc..1efa526355f1 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -25,7 +25,6 @@ function EmptyStateComponent({
     headerContentStyles,
     emptyStateForegroundStyles,
     minModalHeight = 400,
-    optionalStyles,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
     const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
@@ -80,7 +79,7 @@ function EmptyStateComponent({
 
     return (
         <ScrollView contentContainerStyle={[styles.emptyStateScrollView, {minHeight: minModalHeight}]}>
-            <View style={[styles.skeletonBackground, optionalStyles]}>
+            <View style={styles.skeletonBackground}>
                 <SkeletonComponent
                     gradientOpacityEnabled
                     shouldAnimate={false}
diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts
index 01014ada97a7..94860893c2c4 100644
--- a/src/components/EmptyStateComponent/types.ts
+++ b/src/components/EmptyStateComponent/types.ts
@@ -25,7 +25,6 @@ type SharedProps<T> = {
 
 type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {
     headerMedia: HeaderMedia;
-    optionalStyles?: ViewStyle;
 };
 
 type VideoProps = MediaType<string, 'video'>;
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 7283a36e9f59..5033aaf00824 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -1,6 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
@@ -196,7 +197,9 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
                     queryJSON={queryJSON}
                     hash={hash}
                 />
-                <SearchRowSkeleton shouldAnimate />
+                <View style={[styles.flex1, styles.ph2]}>
+                    <SearchRowSkeleton shouldAnimate />
+                </View>
             </>
         );
     }
diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx
index ea4ae944388f..2359e47b7520 100644
--- a/src/components/Skeletons/SearchRowSkeleton.tsx
+++ b/src/components/Skeletons/SearchRowSkeleton.tsx
@@ -35,7 +35,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
         return (
             <ItemListSkeletonView
                 itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT}
-                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
+                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr3, styles.ml3]}
                 gradientOpacityEnabled={gradientOpacityEnabled}
                 shouldAnimate={shouldAnimate}
                 fixedNumItems={fixedNumItems}
@@ -117,7 +117,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
+            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr3, styles.ml3]}
             renderSkeletonItem={() => (
                 <>
                     <Rect
diff --git a/src/pages/Search/EmptySearchView.tsx b/src/pages/Search/EmptySearchView.tsx
index 7684adfaef79..474cbfc0aff8 100644
--- a/src/pages/Search/EmptySearchView.tsx
+++ b/src/pages/Search/EmptySearchView.tsx
@@ -19,7 +19,6 @@ function EmptySearchView() {
             headerContentStyles={styles.emptyStateFolderIconSize}
             title={translate('search.searchResults.emptyResults.title')}
             subtitle={translate('search.searchResults.emptyResults.subtitle')}
-            optionalStyles={{padding: 0}}
         />
     );
 }

From 400ad62ac34f4ec11915a2b1f0b142c061618f2f Mon Sep 17 00:00:00 2001
From: Wiktor Gut <wiktor.gut@swmansion.com>
Date: Mon, 12 Aug 2024 16:22:20 +0200
Subject: [PATCH 3/5] shifting padding to Skeleton components

---
 src/components/Search/index.tsx                | 5 +----
 src/components/Skeletons/CardRowSkeleton.tsx   | 2 +-
 src/components/Skeletons/SearchRowSkeleton.tsx | 4 ++--
 src/components/Skeletons/TableRowSkeleton.tsx  | 2 +-
 src/styles/index.ts                            | 2 --
 5 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 5033aaf00824..7283a36e9f59 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -1,7 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
@@ -197,9 +196,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
                     queryJSON={queryJSON}
                     hash={hash}
                 />
-                <View style={[styles.flex1, styles.ph2]}>
-                    <SearchRowSkeleton shouldAnimate />
-                </View>
+                <SearchRowSkeleton shouldAnimate />
             </>
         );
     }
diff --git a/src/components/Skeletons/CardRowSkeleton.tsx b/src/components/Skeletons/CardRowSkeleton.tsx
index 82c382048415..19052e2eba9b 100644
--- a/src/components/Skeletons/CardRowSkeleton.tsx
+++ b/src/components/Skeletons/CardRowSkeleton.tsx
@@ -29,7 +29,7 @@ function CardRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEn
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr3, styles.ml3]}
+            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
             renderSkeletonItem={() => (
                 <>
                     <Circle
diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx
index 2359e47b7520..ea4ae944388f 100644
--- a/src/components/Skeletons/SearchRowSkeleton.tsx
+++ b/src/components/Skeletons/SearchRowSkeleton.tsx
@@ -35,7 +35,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
         return (
             <ItemListSkeletonView
                 itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT}
-                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr3, styles.ml3]}
+                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
                 gradientOpacityEnabled={gradientOpacityEnabled}
                 shouldAnimate={shouldAnimate}
                 fixedNumItems={fixedNumItems}
@@ -117,7 +117,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr3, styles.ml3]}
+            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
             renderSkeletonItem={() => (
                 <>
                     <Rect
diff --git a/src/components/Skeletons/TableRowSkeleton.tsx b/src/components/Skeletons/TableRowSkeleton.tsx
index 865bffc5842f..32c62f6f0898 100644
--- a/src/components/Skeletons/TableRowSkeleton.tsx
+++ b/src/components/Skeletons/TableRowSkeleton.tsx
@@ -21,7 +21,7 @@ function TableListItemSkeleton({shouldAnimate = true, fixedNumItems, gradientOpa
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr3, styles.ml3]}
+            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
             renderSkeletonItem={() => (
                 <>
                     <Circle
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 59803541bfef..dff3ed8de5c5 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5109,8 +5109,6 @@ const styles = (theme: ThemeColors) =>
             left: 0,
             width: '100%',
             height: '100%',
-            paddingRight: 8,
-            paddingLeft: 8,
         },
 
         emptyStateScrollView: {

From 57f70787e5eb02ba659bc7f019d527775c36cdc3 Mon Sep 17 00:00:00 2001
From: Wiktor Gut <wiktor.gut@swmansion.com>
Date: Mon, 12 Aug 2024 16:45:28 +0200
Subject: [PATCH 4/5] margin horizontal refactor

---
 src/components/Skeletons/CardRowSkeleton.tsx   | 2 +-
 src/components/Skeletons/SearchRowSkeleton.tsx | 2 +-
 src/components/Skeletons/TableRowSkeleton.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Skeletons/CardRowSkeleton.tsx b/src/components/Skeletons/CardRowSkeleton.tsx
index 19052e2eba9b..38cbf5d15823 100644
--- a/src/components/Skeletons/CardRowSkeleton.tsx
+++ b/src/components/Skeletons/CardRowSkeleton.tsx
@@ -29,7 +29,7 @@ function CardRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEn
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
+            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mh5]}
             renderSkeletonItem={() => (
                 <>
                     <Circle
diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx
index ea4ae944388f..811c55c4bee1 100644
--- a/src/components/Skeletons/SearchRowSkeleton.tsx
+++ b/src/components/Skeletons/SearchRowSkeleton.tsx
@@ -35,7 +35,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
         return (
             <ItemListSkeletonView
                 itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT}
-                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
+                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mh5]}
                 gradientOpacityEnabled={gradientOpacityEnabled}
                 shouldAnimate={shouldAnimate}
                 fixedNumItems={fixedNumItems}
diff --git a/src/components/Skeletons/TableRowSkeleton.tsx b/src/components/Skeletons/TableRowSkeleton.tsx
index 32c62f6f0898..a62d66bfc02b 100644
--- a/src/components/Skeletons/TableRowSkeleton.tsx
+++ b/src/components/Skeletons/TableRowSkeleton.tsx
@@ -21,7 +21,7 @@ function TableListItemSkeleton({shouldAnimate = true, fixedNumItems, gradientOpa
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
+            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mh5]}
             renderSkeletonItem={() => (
                 <>
                     <Circle

From a4002ef501cafeee42d8a95765067c27b9b8d8c2 Mon Sep 17 00:00:00 2001
From: Wiktor Gut <wiktor.gut@swmansion.com>
Date: Mon, 12 Aug 2024 16:46:01 +0200
Subject: [PATCH 5/5] margin horizontal refactor 2

---
 src/components/Skeletons/SearchRowSkeleton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx
index 811c55c4bee1..8a7df5140e9e 100644
--- a/src/components/Skeletons/SearchRowSkeleton.tsx
+++ b/src/components/Skeletons/SearchRowSkeleton.tsx
@@ -117,7 +117,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr5, styles.ml5]}
+            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mh5]}
             renderSkeletonItem={() => (
                 <>
                     <Rect