chore: Action banner swap button (#2614)

Emurgo · Aug 15, 2023 · 0964cfe · 0964cfe
1 parent d53aaee
commit 0964cfe
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 16 deletions.
diff --git a/apps/wallet-mobile/src/TxHistory/ActionsBanner.tsx b/apps/wallet-mobile/src/TxHistory/ActionsBanner.tsx
@@ -63,12 +63,12 @@ export const ActionsBanner = ({disabled = false}: {disabled: boolean}) => {
           {Boolean(features.showSwapButton) && (
             <View style={styles.centralized}>
               <TouchableOpacity
-                style={styles.actionIconNoBackground}
+                style={styles.actionIcon}
                 onPress={navigateTo.swap}
                 testID="swapButton"
                 disabled={disabled}
               >
-                <Icon.Swap />
+                <Icon.Swap color={ACTION_PROPS.color} />
               </TouchableOpacity>
 
               <Text style={styles.actionLabel}>{strings.swapLabel}</Text>
@@ -119,13 +119,6 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     backgroundColor: '#3154CB',
   },
-  actionIconNoBackground: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: 42,
-    width: 42,
-    borderRadius: 20,
-  },
   actionLabel: {
     paddingTop: 8,
     fontSize: 12,

diff --git a/apps/wallet-mobile/src/components/Icon/Swap.tsx b/apps/wallet-mobile/src/components/Icon/Swap.tsx
@@ -1,21 +1,20 @@
 import React from 'react'
 import Svg, {ClipPath, Defs, G, Path, Rect} from 'react-native-svg'
 
-// TODO: make it dynamic like others
-export const Swap = () => (
-  <Svg width={42} height={42} viewBox="0 0 42 41" fill="none">
-    <G clipPath="url(#clip0_6637_7488)">
-      <Rect x={0.5} width={41} height={41} rx={20} fill="#3154CB" />
+type Props = {size?: number; color?: string}
 
+export const Swap = ({size = 42, color}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 42 41" fill="none">
+    <G clipPath="url(#clip0_6637_7488)">
       <Path
         d="M26.207 10.293a1 1 0 10-1.414 1.414L27.086 14H17.5a1 1 0 100 2h9.586l-2.293 2.293a1 1 0 001.414 1.414l4-4a1 1 0 000-1.414l-4-4zM16.207 20.293a1 1 0 010 1.414L13.914 24H23.5a1 1 0 110 2h-9.586l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-        fill="#fff"
+        fill={color}
       />
     </G>
 
     <Defs>
       <ClipPath id="clip0_6637_7488">
-        <Rect x={0.5} width={41} height={41} rx={20} fill="#fff" />
+        <Rect x={0.5} width={41} height={41} rx={20} fill={color} />
       </ClipPath>
     </Defs>
   </Svg>