fix highresolutioninfo padding

src/components/Attachments/AttachmentView/HighResolutionInfo.tsx

@@ -4,17 +4,19 @@ 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';
 
 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}

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,

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;

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;

src/styles/utils/getHighResolutionInfoWrapperStyle/types.ts

@@ -0,0 +1,5 @@
+import type {ViewStyle} from 'react-native';
+
+type GetHighResolutionInfoWrapperStyle = (isUploaded: boolean) => ViewStyle;
+
+export default GetHighResolutionInfoWrapperStyle;

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) => ({