fix various shadows

rainbow-me · Dec 19, 2024 · 174f57d · 174f57d
1 parent ff44d3e
commit 174f57d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/src/screens/change-wallet/ChangeWalletSheet.tsx b/src/screens/change-wallet/ChangeWalletSheet.tsx
@@ -672,8 +672,7 @@ export default function ChangeWalletSheet() {
               flexDirection="row"
               justifyContent="space-between"
               alignItems="center"
-              paddingHorizontal="20px"
-              paddingBottom="20px"
+              paddingHorizontal={{ custom: PANEL_INSET_HORIZONTAL }}
               paddingTop="24px"
             >
               {!editMode ? (

diff --git a/src/screens/change-wallet/components/AddressRow.tsx b/src/screens/change-wallet/components/AddressRow.tsx
@@ -4,7 +4,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import { useTheme } from '@/theme/ThemeContext';
 import { ButtonPressAnimation } from '@/components/animations';
 import ConditionalWrap from 'conditional-wrap';
-import { Box, Inline, Stack, Text, useForegroundColor, useColorMode, TextIcon } from '@/design-system';
+import { Box, Inline, Stack, Text, useForegroundColor, useColorMode, TextIcon, globalColors } from '@/design-system';
 import { AddressItem, AddressMenuAction, AddressMenuActionData } from '@/screens/change-wallet/ChangeWalletSheet';
 import { TextSize } from '@/design-system/typography/typeHierarchy';
 import { TextWeight } from '@/design-system/components/Text/Text';
@@ -129,7 +129,17 @@ export function AddressRow({ data, editMode, onPress, menuItems, onPressMenuItem
               <Icon name="dragHandler" color={colors.alpha(colors.black, 0.2)} />
             </Box>
           )}
-          <AddressAvatar url={image} size={40} address={address} color={color} label={label} />
+          <Box
+            as={AddressAvatar}
+            url={image}
+            size={40}
+            borderRadius={20}
+            address={address}
+            color={color}
+            label={label}
+            shadow="12px"
+            background="surfaceSecondaryElevated"
+          />
           <Box style={{ flex: 1 }} paddingLeft="10px" paddingRight="8px">
             <Stack space="10px">
               <Text

diff --git a/src/screens/change-wallet/components/PinnedWalletsGrid.tsx b/src/screens/change-wallet/components/PinnedWalletsGrid.tsx
@@ -63,9 +63,8 @@ export function PinnedWalletsGrid({ walletItems, onPress, editMode, menuItems, o
 
   const avatarSize = useMemo(
     () =>
-      PixelRatio.roundToNearestPixel(
-        Math.min((PANEL_WIDTH - PANEL_INSET_HORIZONTAL * 2 - GRID_GAP * (PINS_PER_ROW - 1)) / PINS_PER_ROW, MAX_AVATAR_SIZE)
-      ),
+      // math.floor to prevent pixel rounding causing premature grid wrapping
+      Math.floor(Math.min((PANEL_WIDTH - PANEL_INSET_HORIZONTAL * 2 - GRID_GAP * (PINS_PER_ROW - 1)) / PINS_PER_ROW, MAX_AVATAR_SIZE)),
     []
   );
 
@@ -116,7 +115,7 @@ export function PinnedWalletsGrid({ walletItems, onPress, editMode, menuItems, o
                       <Box
                         width={{ custom: avatarSize }}
                         height={{ custom: avatarSize }}
-                        background="fill"
+                        background="surfaceSecondaryElevated"
                         shadow={
                           account.isSelected
                             ? {
@@ -144,7 +143,7 @@ export function PinnedWalletsGrid({ walletItems, onPress, editMode, menuItems, o
                                   },
                                 },
                               }
-                            : undefined
+                            : '30px'
                         }
                         borderRadius={avatarSize / 2}
                         borderWidth={account.isSelected ? 4 : undefined}