From fa37c50e0bbf8b61d346fb2fcc1b4ded2cb9c7c0 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 11 Jul 2024 13:50:32 +0700
Subject: [PATCH] fix highresolutioninfo padding

---
 .../Attachments/AttachmentView/HighResolutionInfo.tsx |  4 +++-
 src/styles/index.ts                                   |  2 --
 .../getHighResolutionInfoWrapperStyle/index.native.ts | 11 +++++++++++
 .../utils/getHighResolutionInfoWrapperStyle/index.ts  | 11 +++++++++++
 .../utils/getHighResolutionInfoWrapperStyle/types.ts  |  5 +++++
 .../utils/highResolutionInfoPadding/index.native.ts   | 10 ----------
 src/styles/utils/highResolutionInfoPadding/index.ts   |  9 ---------
 src/styles/utils/highResolutionInfoPadding/types.ts   |  5 -----
 src/styles/utils/index.ts                             |  2 ++
 9 files changed, 32 insertions(+), 27 deletions(-)
 create mode 100644 src/styles/utils/getHighResolutionInfoWrapperStyle/index.native.ts
 create mode 100644 src/styles/utils/getHighResolutionInfoWrapperStyle/index.ts
 create mode 100644 src/styles/utils/getHighResolutionInfoWrapperStyle/types.ts
 delete mode 100644 src/styles/utils/highResolutionInfoPadding/index.native.ts
 delete mode 100644 src/styles/utils/highResolutionInfoPadding/index.ts
 delete mode 100644 src/styles/utils/highResolutionInfoPadding/types.ts

diff --git a/src/components/Attachments/AttachmentView/HighResolutionInfo.tsx b/src/components/Attachments/AttachmentView/HighResolutionInfo.tsx
index 9aabc5849a73..7ea3c83aa96f 100644
--- a/src/components/Attachments/AttachmentView/HighResolutionInfo.tsx
+++ b/src/components/Attachments/AttachmentView/HighResolutionInfo.tsx
@@ -4,6 +4,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
@@ -11,10 +12,11 @@ import variables from '@styles/variables';
 function HighResolutionInfo({isUploaded}: {isUploaded: boolean}) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const stylesUtils = useStyleUtils();
     const {translate} = useLocalize();
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.justifyContentCenter, styles.highResolutionInfoPadding, !isUploaded ? styles.mbn1 : {}]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.justifyContentCenter, stylesUtils.getHighResolutionInfoWrapperStyle(isUploaded)]}>
             <Icon
                 src={Expensicons.Info}
                 height={variables.iconSizeExtraSmall}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 6b807885fd09..e422b8bd3d1e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -25,7 +25,6 @@ import emojiDefaultStyles from './utils/emojiDefaultStyles';
 import flex from './utils/flex';
 import FontUtils from './utils/FontUtils';
 import getPopOverVerticalOffset from './utils/getPopOverVerticalOffset';
-import highResolutionInfoPadding from './utils/highResolutionInfoPadding';
 import objectFit from './utils/objectFit';
 import optionAlternateTextPlatformStyles from './utils/optionAlternateTextPlatformStyles';
 import overflow from './utils/overflow';
@@ -261,7 +260,6 @@ const styles = (theme: ThemeColors) =>
         ...textDecorationLine,
         editedLabelStyles,
         emojiDefaultStyles,
-        highResolutionInfoPadding,
 
         autoCompleteSuggestionsContainer: {
             backgroundColor: theme.appBG,
diff --git a/src/styles/utils/getHighResolutionInfoWrapperStyle/index.native.ts b/src/styles/utils/getHighResolutionInfoWrapperStyle/index.native.ts
new file mode 100644
index 000000000000..743c52287486
--- /dev/null
+++ b/src/styles/utils/getHighResolutionInfoWrapperStyle/index.native.ts
@@ -0,0 +1,11 @@
+// eslint-disable-next-line no-restricted-imports
+import spacing from '@styles/utils/spacing';
+import type GetHighResolutionInfoWrapperStyle from './types';
+
+const getHighResolutionInfoWrapperStyle: GetHighResolutionInfoWrapperStyle = (isUploaded) => ({
+    ...spacing.ph8,
+    ...spacing.pt5,
+    ...(isUploaded ? spacing.pb5 : spacing.mbn1),
+});
+
+export default getHighResolutionInfoWrapperStyle;
diff --git a/src/styles/utils/getHighResolutionInfoWrapperStyle/index.ts b/src/styles/utils/getHighResolutionInfoWrapperStyle/index.ts
new file mode 100644
index 000000000000..ff10f7c71420
--- /dev/null
+++ b/src/styles/utils/getHighResolutionInfoWrapperStyle/index.ts
@@ -0,0 +1,11 @@
+// eslint-disable-next-line no-restricted-imports
+import spacing from '@styles/utils/spacing';
+import type GetHighResolutionInfoWrapperStyle from './types';
+
+const getHighResolutionInfoWrapperStyle: GetHighResolutionInfoWrapperStyle = (isUploaded) => ({
+    ...spacing.ph5,
+    ...spacing.pt5,
+    ...(isUploaded ? spacing.pb5 : spacing.mbn1),
+});
+
+export default getHighResolutionInfoWrapperStyle;
diff --git a/src/styles/utils/getHighResolutionInfoWrapperStyle/types.ts b/src/styles/utils/getHighResolutionInfoWrapperStyle/types.ts
new file mode 100644
index 000000000000..b7ff33d7c071
--- /dev/null
+++ b/src/styles/utils/getHighResolutionInfoWrapperStyle/types.ts
@@ -0,0 +1,5 @@
+import type {ViewStyle} from 'react-native';
+
+type GetHighResolutionInfoWrapperStyle = (isUploaded: boolean) => ViewStyle;
+
+export default GetHighResolutionInfoWrapperStyle;
diff --git a/src/styles/utils/highResolutionInfoPadding/index.native.ts b/src/styles/utils/highResolutionInfoPadding/index.native.ts
deleted file mode 100644
index e54def049522..000000000000
--- a/src/styles/utils/highResolutionInfoPadding/index.native.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import spacing from '@styles/utils/spacing';
-import type HighResolutionInfoPadding from './types';
-
-const highResolutionInfoPadding: HighResolutionInfoPadding = {
-    ...spacing.pv5,
-    ...spacing.ph8,
-};
-
-export default highResolutionInfoPadding;
diff --git a/src/styles/utils/highResolutionInfoPadding/index.ts b/src/styles/utils/highResolutionInfoPadding/index.ts
deleted file mode 100644
index a69047f5b45e..000000000000
--- a/src/styles/utils/highResolutionInfoPadding/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import spacing from '@styles/utils/spacing';
-import type HighResolutionInfoPadding from './types';
-
-const highResolutionInfoPadding: HighResolutionInfoPadding = {
-    ...spacing.p5,
-};
-
-export default highResolutionInfoPadding;
diff --git a/src/styles/utils/highResolutionInfoPadding/types.ts b/src/styles/utils/highResolutionInfoPadding/types.ts
deleted file mode 100644
index 566b0257681f..000000000000
--- a/src/styles/utils/highResolutionInfoPadding/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type {ViewStyle} from 'react-native';
-
-type HighResolutionInfoPadding = ViewStyle;
-
-export default HighResolutionInfoPadding;
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 09df150df0ed..c7fe153857e7 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -23,6 +23,7 @@ import createModalStyleUtils from './generators/ModalStyleUtils';
 import createReportActionContextMenuStyleUtils from './generators/ReportActionContextMenuStyleUtils';
 import createTooltipStyleUtils from './generators/TooltipStyleUtils';
 import getContextMenuItemStyles from './getContextMenuItemStyles';
+import getHighResolutionInfoWrapperStyle from './getHighResolutionInfoWrapperStyle';
 import getNavigationModalCardStyle from './getNavigationModalCardStyles';
 import getSignInBgStyles from './getSignInBgStyles';
 import {compactContentContainerStyles} from './optionRowStyles';
@@ -1182,6 +1183,7 @@ const staticStyleUtils = {
     getCharacterWidth,
     getAmountWidth,
     getBorderRadiusStyle,
+    getHighResolutionInfoWrapperStyle,
 };
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({