Fix Tx List Margins

Picking the unfavorable route of modifying each component's horizontal padding because of the SceneHeader in the middle of the Animated.FlatList is not yet UI4 compatible
EdgeApp · Jan 29, 2024 · 0cd3a4e · 0cd3a4e
1 parent 56766ba
commit 0cd3a4e
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 132 deletions.
diff --git a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
           "borderRadius": 16,
         },
         {
-          "marginBottom": 22,
+          "marginBottom": 11,
           "marginLeft": 11,
           "marginRight": 11,
           "marginTop": 11,
@@ -576,10 +576,10 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
           "borderRadius": 16,
         },
         {
-          "marginBottom": -11,
+          "marginBottom": 11,
           "marginLeft": 11,
           "marginRight": 11,
-          "marginTop": 22,
+          "marginTop": 11,
         },
         {
           "paddingBottom": 0,
@@ -699,83 +699,92 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
   </View>,
   <View
     style={
-      [
-        {
-          "justifyContent": "center",
-          "marginHorizontal": 22,
-          "paddingBottom": 22,
-        },
-        null,
-        undefined,
-      ]
+      {
+        "marginRight": -11,
+        "overflow": "visible",
+      }
     }
   >
     <View
       style={
+        [
+          {
+            "justifyContent": "center",
+            "marginHorizontal": 22,
+            "paddingBottom": 22,
+          },
+          null,
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          }
+        }
+      />
+      <Text
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.65}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Quicksand-Regular",
+              "fontSize": 22,
+              "includeFontPadding": false,
+            },
+            {
+              "fontFamily": "Quicksand-Medium",
+            },
+            null,
+          ]
+        }
+      >
+        Transactions
+      </Text>
+    </View>
+    <BVLinearGradient
+      colors={
+        [
+          452984831,
+          452984831,
+        ]
+      }
+      endPoint={
         {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "x": 1,
+          "y": 0.5,
+        }
+      }
+      locations={null}
+      startPoint={
+        {
+          "x": 0,
+          "y": 0.5,
         }
       }
-    />
-    <Text
-      adjustsFontSizeToFit={true}
-      minimumFontScale={0.65}
-      numberOfLines={1}
       style={
         [
           {
-            "color": "#FFFFFF",
-            "fontFamily": "Quicksand-Regular",
-            "fontSize": 22,
-            "includeFontPadding": false,
+            "alignSelf": "stretch",
+            "height": 1,
           },
           {
-            "fontFamily": "Quicksand-Medium",
+            "marginBottom": 0,
+            "marginLeft": 22,
+            "marginRight": 0,
+            "marginTop": 0,
           },
-          null,
         ]
       }
-    >
-      Transactions
-    </Text>
+    />
   </View>,
-  <BVLinearGradient
-    colors={
-      [
-        452984831,
-        452984831,
-      ]
-    }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0.5,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0.5,
-      }
-    }
-    style={
-      [
-        {
-          "alignSelf": "stretch",
-          "height": 1,
-        },
-        {
-          "marginBottom": 0,
-          "marginLeft": 22,
-          "marginRight": 0,
-          "marginTop": 0,
-        },
-      ]
-    }
-  />,
 ]
 `;
 
@@ -789,7 +798,7 @@ exports[`TransactionListTop should render 1`] = `
           "borderRadius": 16,
         },
         {
-          "marginBottom": 22,
+          "marginBottom": 11,
           "marginLeft": 11,
           "marginRight": 11,
           "marginTop": 11,
@@ -1349,82 +1358,91 @@ exports[`TransactionListTop should render 1`] = `
   </View>,
   <View
     style={
-      [
-        {
-          "justifyContent": "center",
-          "marginHorizontal": 22,
-          "paddingBottom": 22,
-        },
-        null,
-        undefined,
-      ]
+      {
+        "marginRight": -11,
+        "overflow": "visible",
+      }
     }
   >
     <View
       style={
+        [
+          {
+            "justifyContent": "center",
+            "marginHorizontal": 22,
+            "paddingBottom": 22,
+          },
+          null,
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          }
+        }
+      />
+      <Text
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.65}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Quicksand-Regular",
+              "fontSize": 22,
+              "includeFontPadding": false,
+            },
+            {
+              "fontFamily": "Quicksand-Medium",
+            },
+            null,
+          ]
+        }
+      >
+        Transactions
+      </Text>
+    </View>
+    <BVLinearGradient
+      colors={
+        [
+          452984831,
+          452984831,
+        ]
+      }
+      endPoint={
         {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "x": 1,
+          "y": 0.5,
+        }
+      }
+      locations={null}
+      startPoint={
+        {
+          "x": 0,
+          "y": 0.5,
         }
       }
-    />
-    <Text
-      adjustsFontSizeToFit={true}
-      minimumFontScale={0.65}
-      numberOfLines={1}
       style={
         [
           {
-            "color": "#FFFFFF",
-            "fontFamily": "Quicksand-Regular",
-            "fontSize": 22,
-            "includeFontPadding": false,
+            "alignSelf": "stretch",
+            "height": 1,
           },
           {
-            "fontFamily": "Quicksand-Medium",
+            "marginBottom": 0,
+            "marginLeft": 22,
+            "marginRight": 0,
+            "marginTop": 0,
           },
-          null,
         ]
       }
-    >
-      Transactions
-    </Text>
+    />
   </View>,
-  <BVLinearGradient
-    colors={
-      [
-        452984831,
-        452984831,
-      ]
-    }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0.5,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0.5,
-      }
-    }
-    style={
-      [
-        {
-          "alignSelf": "stretch",
-          "height": 1,
-        },
-        {
-          "marginBottom": 0,
-          "marginLeft": 22,
-          "marginRight": 0,
-          "marginTop": 0,
-        },
-      ]
-    }
-  />,
 ]
 `;
diff --git a/src/components/cards/VisaCardCard.tsx b/src/components/cards/VisaCardCard.tsx
@@ -52,7 +52,7 @@ export const VisaCardCard = (props: Props) => {
   return (
     <>
       {ioniaPluginIds.includes(pluginId) && tokenId == null && (
-        <CardUi4 paddingRem={0} marginRem={[1, 0.5, -0.5, 0.5]}>
+        <CardUi4 paddingRem={0}>
           <TouchableOpacity onPress={handlePress} style={styles.container}>
             <FastImage resizeMode="contain" source={{ uri: icon.symbolImage }} style={styles.icon} />
             <EdgeText numberOfLines={0} style={styles.text}>

diff --git a/src/components/scenes/TransactionListScene.tsx b/src/components/scenes/TransactionListScene.tsx
@@ -289,9 +289,15 @@ function TransactionListComponent(props: Props) {
       {({ insetStyle, undoInsetStyle }) => (
         <View style={undoInsetStyle}>
           <Animated.FlatList
+            style={{ overflow: 'visible', flexShrink: 0 }}
             // @ts-expect-error
             ref={flashListRef}
-            contentContainerStyle={insetStyle}
+            contentContainerStyle={{
+              paddingTop: insetStyle.paddingTop + theme.rem(0.5),
+              paddingBottom: insetStyle.paddingBottom + theme.rem(0.5),
+              paddingLeft: insetStyle.paddingLeft + theme.rem(0.5),
+              paddingRight: insetStyle.paddingRight + theme.rem(0.5)
+            }}
             data={listItems}
             keyboardShouldPersistTaps="handled"
             keyExtractor={keyExtractor}