diff --git a/src/components/coin-divider/CoinDividerEditButton.js b/src/components/coin-divider/CoinDividerEditButton.js index e5d07b3c4f0..4a1833b3549 100644 --- a/src/components/coin-divider/CoinDividerEditButton.js +++ b/src/components/coin-divider/CoinDividerEditButton.js @@ -1,5 +1,5 @@ import React, { useCallback } from 'react'; -import { LayoutAnimation } from 'react-native'; +import { LayoutAnimation, StyleSheet } from 'react-native'; import { useTheme } from '../../theme/ThemeContext'; import { magicMemo } from '../../utils'; import { ButtonPressAnimation, OpacityToggler } from '../animations'; @@ -7,6 +7,7 @@ import { Row } from '../layout'; import { Text } from '../text'; import styled from '@/styled-thing'; import { padding, shadow } from '@/styles'; +import { IS_ANDROID } from '@/env'; const ButtonContent = styled(Row).attrs({ justify: 'center', @@ -39,6 +40,7 @@ const CoinDividerEditButton = ({ isActive, isVisible, onPress, shouldReloadList, opacity={textOpacityAlwaysOn || isActive ? 1 : 0.3333333333} size="lmedium" weight="bold" + style={sx.text} > {text} @@ -48,4 +50,10 @@ const CoinDividerEditButton = ({ isActive, isVisible, onPress, shouldReloadList, ); }; +const sx = StyleSheet.create({ + text: { + marginTop: IS_ANDROID ? -4 : 0, + }, +}); + export default magicMemo(CoinDividerEditButton, ['isActive', 'isVisible', 'text']); diff --git a/src/components/coin-divider/CoinDividerOpenButton.js b/src/components/coin-divider/CoinDividerOpenButton.js index 9c079004ce9..c818dc22b9b 100644 --- a/src/components/coin-divider/CoinDividerOpenButton.js +++ b/src/components/coin-divider/CoinDividerOpenButton.js @@ -53,7 +53,7 @@ const CoinDividerEditButton = ({ isSmallBalancesOpen, onPress }) => { opacity: 0.6, transform: [ { translateX: 0 + animation.value * 5 }, - { translateY: (IS_ANDROID ? 4 : 0) + animation.value * 1.25 }, + { translateY: (IS_ANDROID ? (!animation.value ? 2.5 : 4) : 0) + animation.value * 1.25 }, { rotate: animation.value * -90 + 'deg' }, ], }; @@ -74,6 +74,7 @@ const CoinDividerEditButton = ({ isSmallBalancesOpen, onPress }) => { opacity={1} size="lmedium" weight="bold" + style={{ marginTop: IS_ANDROID ? -4 : 0 }} > {isSmallBalancesOpen ? i18n.t(i18n.l.button.less) : i18n.t(i18n.l.button.all)} diff --git a/src/components/coin-row/CollectiblesSendRow.tsx b/src/components/coin-row/CollectiblesSendRow.tsx index 4f87045430d..294fd818d0f 100644 --- a/src/components/coin-row/CollectiblesSendRow.tsx +++ b/src/components/coin-row/CollectiblesSendRow.tsx @@ -1,5 +1,5 @@ import React, { Fragment, useMemo } from 'react'; -import { PressableProps, TouchableWithoutFeedback } from 'react-native'; +import { PressableProps, TouchableWithoutFeedback, StyleSheet } from 'react-native'; import { buildAssetUniqueIdentifier } from '../../helpers/assets'; import { useTheme } from '../../theme/ThemeContext'; import { deviceUtils, getUniqueTokenType, magicMemo } from '../../utils'; @@ -33,6 +33,7 @@ const BottomRow = ({ selected, subtitle }: { selected: boolean; subtitle: string letterSpacing="roundedMedium" size="smedium" weight={selected ? 'bold' : 'regular'} + style={sx.bottomRow} > {subtitle} @@ -137,6 +138,12 @@ const CollectiblesSendRow = React.memo( (props, nextProps) => buildAssetUniqueIdentifier(props.item) !== buildAssetUniqueIdentifier(nextProps.item) ); +const sx = StyleSheet.create({ + bottomRow: { + marginTop: ios ? 0 : -6, + }, +}); + CollectiblesSendRow.displayName = 'CollectiblesSendRow'; // @ts-expect-error CollectiblesSendRow.dividerHeight = dividerHeight; diff --git a/src/components/coin-row/SendCoinRow.js b/src/components/coin-row/SendCoinRow.js index dd2a3543c60..15e2067aa86 100644 --- a/src/components/coin-row/SendCoinRow.js +++ b/src/components/coin-row/SendCoinRow.js @@ -1,5 +1,5 @@ import React from 'react'; -import { TouchableWithoutFeedback } from 'react-native'; +import { StyleSheet, TouchableWithoutFeedback } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import { useTheme } from '../../theme/ThemeContext'; import { deviceUtils } from '../../utils'; @@ -49,6 +49,7 @@ const BottomRow = ({ balance, native, nativeCurrencySymbol, selected, showNative numberOfLines={1} size="smedium" weight={selected ? 'bold' : 'regular'} + style={sx.bottomRow} > {showNativeValue ? `${fiatValue} available` @@ -133,7 +134,7 @@ const SendCoinRow = ({ children ) : ( - {fiatValueFormatted} + {fiatValueFormatted} )} @@ -141,6 +142,15 @@ const SendCoinRow = ({ ); }; +const sx = StyleSheet.create({ + nativeAmountBubbleText: { + marginTop: android ? -2.5 : 0, + }, + bottomRow: { + marginTop: android ? -6 : 0, + }, +}); + SendCoinRow.displayName = 'SendCoinRow'; SendCoinRow.selectedHeight = selectedHeight; diff --git a/src/components/contacts/ContactRow.js b/src/components/contacts/ContactRow.js index e52b5f8251e..a0a44097f35 100644 --- a/src/components/contacts/ContactRow.js +++ b/src/components/contacts/ContactRow.js @@ -16,6 +16,7 @@ import styled from '@/styled-thing'; import { margin } from '@/styles'; import { addressHashedColorIndex, addressHashedEmoji } from '@/utils/profileUtils'; import * as i18n from '@/languages'; +import { StyleSheet } from 'react-native'; const ContactAddress = styled(TruncatedAddress).attrs(({ theme: { colors }, lite }) => ({ align: 'left', @@ -44,7 +45,7 @@ const ContactName = styled(TruncatedText).attrs(({ lite }) => ({ size: 'lmedium', weight: lite ? 'regular' : 'medium', }))({ - height: 22, + height: ios ? 22 : 26, width: ({ deviceWidth }) => deviceWidth - 90, }); @@ -53,6 +54,12 @@ const css = { symmetrical: margin.object(9.5, 19), }; +const sx = StyleSheet.create({ + bottomRowText: { + marginTop: ios ? 0 : -4.5, + }, +}); + const ContactRow = ({ address, color, nickname, symmetricalMargins, ...props }, ref) => { const profilesEnabled = useExperimentalFlag(PROFILES); const { width: deviceWidth } = useDimensions(); @@ -132,7 +139,12 @@ const ContactRow = ({ address, color, nickname, symmetricalMargins, ...props }, {isValidDomainFormat(address) ? address : abbreviations.address(address, 4, 6)} )} - + {balanceText}