From 6ac274604092d5d4f8853b025be63f81fe58d53a Mon Sep 17 00:00:00 2001
From: Eric Han <hanyl_fight@126.com>
Date: Wed, 1 Nov 2023 21:55:06 +0800
Subject: [PATCH 1/2] fix Android inconsistent pixel of +n triangle corner

---
 .../ReportActionItem/ReportActionItemImages.js    | 15 ++++++++++++++-
 src/styles/styles.ts                              | 15 ---------------
 src/styles/variables.ts                           |  1 +
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index b41307864de6..564485317241 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import {Polygon, Svg} from 'react-native-svg';
 import _ from 'underscore';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import styles from '@styles/styles';
+import theme from '@styles/themes/default';
 import * as StyleUtils from '@styles/StyleUtils';
 import variables from '@styles/variables';
 import ReportActionItemImage from './ReportActionItemImage';
@@ -68,6 +70,8 @@ function ReportActionItemImages({images, size, total, isHovered}) {
 
     const hoverStyle = isHovered ? styles.reportPreviewBoxHoverBorder : undefined;
 
+    const triangleWidth = variables.reportActionItemImagesMoreCornerTriangleWidth;
+
     return (
         <View style={[styles.reportActionItemImages, hoverStyle, heightStyle]}>
             {_.map(shownImages, ({thumbnail, image, transaction}, index) => {
@@ -89,7 +93,16 @@ function ReportActionItemImages({images, size, total, isHovered}) {
                         {isLastImage && remaining > 0 && (
                             <View style={[styles.reportActionItemImagesMoreContainer]}>
                                 <View style={[styles.reportActionItemImagesMore, isHovered ? styles.reportActionItemImagesMoreHovered : {}]} />
-                                <View style={[styles.reportActionItemImagesMoreCornerTriangle, isHovered ? styles.reportActionItemImagesMoreCornerTriangleHighlighted : {}]} />
+                                <Svg
+                                    height={triangleWidth}
+                                    width={triangleWidth}
+                                    style={styles.reportActionItemImagesMoreCornerTriangle}
+                                >
+                                    <Polygon
+                                        points={`${triangleWidth},0 ${triangleWidth},${triangleWidth} 0,${triangleWidth}`}
+                                        fill={isHovered ? theme.border : theme.cardBG}
+                                    />
+                                </Svg>
                                 <Text style={[styles.reportActionItemImagesMoreText, styles.textStrong]}>{remaining > MAX_REMAINING ? `${MAX_REMAINING}+` : `+${remaining}`}</Text>
                             </View>
                         )}
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 589c3756042f..b024f42a8437 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -3749,21 +3749,6 @@ const styles = (theme: ThemeDefault) =>
 
         reportActionItemImagesMoreCornerTriangle: {
             position: 'absolute',
-            bottom: 0,
-            right: 0,
-            width: 0,
-            height: 0,
-            borderStyle: 'solid',
-            borderWidth: 0,
-            borderBottomWidth: 40,
-            borderLeftWidth: 40,
-            borderColor: 'transparent',
-            borderBottomColor: theme.cardBG,
-        },
-
-        reportActionItemImagesMoreCornerTriangleHighlighted: {
-            borderColor: 'transparent',
-            borderBottomColor: theme.border,
         },
 
         assignedCardsIconContainer: {
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 382ed3e032d1..7bad3b1b0fb7 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -174,6 +174,7 @@ export default {
     reportActionImagesSingleImageHeight: 147,
     reportActionImagesDoubleImageHeight: 138,
     reportActionImagesMultipleImageHeight: 110,
+    reportActionItemImagesMoreCornerTriangleWidth: 40,
     bankCardWidth: 40,
     bankCardHeight: 26,
 

From 7d31ff48e016e9c65ea6d8a86bbf856538a33135 Mon Sep 17 00:00:00 2001
From: Eric Han <hanyl_fight@126.com>
Date: Wed, 1 Nov 2023 22:07:42 +0800
Subject: [PATCH 2/2] fix lint

---
 src/components/ReportActionItem/ReportActionItemImages.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index 564485317241..e44e27bb7ec0 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -6,8 +6,8 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import styles from '@styles/styles';
-import theme from '@styles/themes/default';
 import * as StyleUtils from '@styles/StyleUtils';
+import theme from '@styles/themes/default';
 import variables from '@styles/variables';
 import ReportActionItemImage from './ReportActionItemImage';