more badge sizing fixes

rainbow-me · Dec 16, 2024 · e9f7542 · e9f7542
1 parent ef79118
commit e9f7542
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/src/__swaps__/screens/Swap/components/ReviewPanel.tsx b/src/__swaps__/screens/Swap/components/ReviewPanel.tsx
@@ -324,7 +324,7 @@ export function ReviewPanel() {
 
             <Inline alignVertical="center" horizontalSpace="6px" wrap={false}>
               <View style={sx.chainBadgeContainer}>
-                <AnimatedChainImage showMainnetBadge assetType="input" size={16} />
+                <AnimatedChainImage showMainnetBadge assetType="input" size={24} />
               </View>
               <AnimatedText
                 align="right"
@@ -385,7 +385,7 @@ export function ReviewPanel() {
               <Stack space="10px">
                 <Inline alignVertical="center" horizontalSpace="6px" wrap={false}>
                   <View style={sx.chainBadgeContainer}>
-                    <AnimatedChainImage showMainnetBadge assetType="input" size={16} />
+                    <AnimatedChainImage showMainnetBadge assetType="input" size={24} />
                   </View>
                   <UnmountOnAnimatedReaction
                     isMountedWorklet={() => {
@@ -434,7 +434,7 @@ const sx = StyleSheet.create({
     height: 8,
     left: 8,
     justifyContent: 'center',
-    top: 4,
-    width: 16,
+    top: 8,
+    width: 20,
   },
 });
diff --git a/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx b/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx
@@ -202,11 +202,11 @@ const ChainButtonIcon = ({ output }: { output: boolean | undefined }) => {
         <ChainImage
           chainId={selectedOutputChainId ?? animatedSelectedOutputChainId.value ?? ChainId.mainnet}
           size={24}
-          badgeXPosition={6}
-          badgeYPosition={-6}
+          badgeXPosition={-20}
+          badgeYPosition={-8}
         />
       ) : userAssetsFilter && userAssetsFilter !== 'all' ? (
-        <ChainImage chainId={userAssetsFilter} size={24} />
+        <ChainImage chainId={userAssetsFilter} size={24} badgeXPosition={-20} badgeYPosition={-8} />
       ) : (
         <></>
       )}

diff --git a/src/components/context-menu-buttons/ChainContextMenu.tsx b/src/components/context-menu-buttons/ChainContextMenu.tsx
@@ -145,7 +145,7 @@ export const ChainContextMenu = ({
               )}
               {selectedChainId && (
                 <Bleed vertical="4px">
-                  <ChainImage chainId={selectedChainId} size={16} />
+                  <ChainImage chainId={selectedChainId} size={24} badgeXPosition={-20} badgeYPosition={-8} />
                 </Bleed>
               )}
               <Text color={textColor} numberOfLines={1} size={textSize} weight={textWeight}>

diff --git a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx
@@ -91,6 +91,10 @@ export const TransactionDetailsValueAndFeeSection: React.FC<Props> = ({ transact
                     chainId={assetData?.chainId || ChainId.mainnet}
                     symbol={assetData?.symbol || ''}
                     color={assetData?.colors?.primary || assetData?.colors?.fallback || undefined}
+                    chainBadgePosition={{
+                      x: -12,
+                      y: -6,
+                    }}
                   />
                 )
               }