Fix: change to simple solution

software-mansion-labs · Mar 20, 2024 · 093c223 · 093c223
1 parent f1b1afa
commit 093c223
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 16 deletions.
diff --git a/assets/images/imagesMoreBg/dark_bg.png b/assets/images/imagesMoreBg/dark_bg.png
diff --git a/assets/images/imagesMoreBg/light_bg.png b/assets/images/imagesMoreBg/light_bg.png
diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
 import {View} from 'react-native';
-import Image from '@components/Image';
+import {Polygon, Svg} from 'react-native-svg';
 import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeIllustrations from '@hooks/useThemeIllustrations';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils';
 import variables from '@styles/variables';
@@ -38,9 +38,9 @@ type ReportActionItemImagesProps = {
  */
 
 function ReportActionItemImages({images, size, total, isHovered = false}: ReportActionItemImagesProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const illustrations = useThemeIllustrations();
     // Calculate the number of images to be shown, limited by the value of 'size' (if defined)
     // or the total number of images.
     const numberOfShownImages = Math.min(size ?? images.length, images.length);
@@ -60,8 +60,10 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
 
     const hoverStyle = isHovered ? styles.reportPreviewBoxHoverBorder : undefined;
 
+    const triangleWidth = variables.reportActionItemImagesMoreCornerTriangleWidth;
+
     return (
-        <View>
+        <View style={styles.reportActionItemImagesContainer}>
             <View style={[styles.reportActionItemImages, hoverStyle, heightStyle]}>
                 {shownImages.map(({thumbnail, image, transaction, isLocalFile, filename}, index) => {
                     // Show a border to separate multiple images. Shown to the right for each except the last.
@@ -86,10 +88,17 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
             </View>
             {remaining > 0 && (
                 <View style={[styles.reportActionItemImagesMoreContainer]}>
-                    <Image
-                        source={illustrations.ImagesMoreBg}
-                        style={styles.reportActionItemImagesMore}
-                    />
+                    <View style={[styles.reportActionItemImagesMore, isHovered ? styles.reportActionItemImagesMoreHovered : {}]} />
+                    <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/index.ts b/src/styles/index.ts
@@ -4099,9 +4099,12 @@ const styles = (theme: ThemeColors) =>
             gap: 16,
         },
 
+        reportActionItemImagesContainer: {
+            margin: 4,
+        },
+
         reportActionItemImages: {
             flexDirection: 'row',
-            margin: 4,
             borderRadius: 12,
             overflow: 'hidden',
             height: variables.reportActionImagesSingleImageHeight,
@@ -4123,13 +4126,14 @@ const styles = (theme: ThemeColors) =>
 
         reportActionItemImagesMoreContainer: {
             position: 'absolute',
-            bottom: 4,
-            right: 4,
+            bottom: 0,
+            right: 0,
             display: 'flex',
         },
 
         reportActionItemImagesMore: {
             borderTopLeftRadius: 12,
+            backgroundColor: theme.border,
             width: 40,
             height: 40,
         },

diff --git a/src/styles/theme/illustrations/themes/dark.ts b/src/styles/theme/illustrations/themes/dark.ts
@@ -1,4 +1,3 @@
-import ImagesMoreBg from '@assets/images/imagesMoreBg/dark_bg.png';
 import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.png';
 import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-dark-en.png';
 import ExampleCheckES from '@assets/images/themeDependent/example-check-image-dark-es.png';
@@ -10,7 +9,6 @@ const illustrations = {
     ExampleCheckEN,
     ExampleCheckES,
     WorkspaceProfile,
-    ImagesMoreBg,
 } satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/theme/illustrations/themes/light.ts b/src/styles/theme/illustrations/themes/light.ts
@@ -1,4 +1,3 @@
-import ImagesMoreBg from '@assets/images/imagesMoreBg/light_bg.png';
 import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-light.png';
 import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-light-en.png';
 import ExampleCheckES from '@assets/images/themeDependent/example-check-image-light-es.png';
@@ -10,7 +9,6 @@ const illustrations = {
     ExampleCheckEN,
     ExampleCheckES,
     WorkspaceProfile,
-    ImagesMoreBg,
 } satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/theme/illustrations/types.ts b/src/styles/theme/illustrations/types.ts
@@ -5,7 +5,6 @@ type IllustrationsType = {
     ExampleCheckES: ImageSourcePropType;
     ExampleCheckEN: ImageSourcePropType;
     WorkspaceProfile: ImageSourcePropType;
-    ImagesMoreBg: ImageSourcePropType;
 };
 
 export default IllustrationsType;