diff --git a/apps/mobile/src/components/core/PWButton/PWButton.tsx b/apps/mobile/src/components/core/PWButton/PWButton.tsx index 083b35df8..5129128ab 100644 --- a/apps/mobile/src/components/core/PWButton/PWButton.tsx +++ b/apps/mobile/src/components/core/PWButton/PWButton.tsx @@ -23,6 +23,7 @@ export type PWButtonProps = { | 'secondary' | 'helper' | 'link' + | 'linkPositive' | 'destructive' | 'destructiveLight' | 'errorLink' @@ -44,6 +45,7 @@ const ICON_VARIANT_MAP: Record = { secondary: 'primary', helper: 'helper', link: 'link', + linkPositive: 'positive', destructive: 'white', destructiveLight: 'error', errorLink: 'error', diff --git a/apps/mobile/src/components/core/PWButton/styles.ts b/apps/mobile/src/components/core/PWButton/styles.ts index 5a7a82804..970688cc4 100644 --- a/apps/mobile/src/components/core/PWButton/styles.ts +++ b/apps/mobile/src/components/core/PWButton/styles.ts @@ -52,6 +52,10 @@ export const useStyles = makeStyles((theme, props: PWButtonProps) => { backgroundColor: theme.colors.background, color: theme.colors.linkPrimary, }, + linkPositive: { + backgroundColor: theme.colors.background, + color: theme.colors.positive, + }, errorLink: { backgroundColor: theme.colors.background, color: theme.colors.alertNegative, diff --git a/apps/mobile/src/modules/swap/components/SwapConfigurationBottomSheet/SwapConfigurationBottomSheet.tsx b/apps/mobile/src/modules/swap/components/SwapConfigurationBottomSheet/SwapConfigurationBottomSheet.tsx index 7aec306cd..817838e60 100644 --- a/apps/mobile/src/modules/swap/components/SwapConfigurationBottomSheet/SwapConfigurationBottomSheet.tsx +++ b/apps/mobile/src/modules/swap/components/SwapConfigurationBottomSheet/SwapConfigurationBottomSheet.tsx @@ -86,7 +86,7 @@ export const SwapConfigurationBottomSheet = ({ } right={ @@ -63,7 +63,7 @@ export const SwapFormControls = ({ testID='swap-max-button' > {t('swap.form.max')} diff --git a/apps/mobile/src/modules/swap/components/SwapForm/styles.ts b/apps/mobile/src/modules/swap/components/SwapForm/styles.ts index c24e6ba70..61992df46 100644 --- a/apps/mobile/src/modules/swap/components/SwapForm/styles.ts +++ b/apps/mobile/src/modules/swap/components/SwapForm/styles.ts @@ -14,7 +14,6 @@ import { makeStyles } from '@rneui/themed' export const useStyles = makeStyles(theme => { const maxText = { - color: theme.colors.linkPrimary, lineHeight: theme.spacing.lg, } return { diff --git a/apps/mobile/src/modules/swap/components/SwapIntroduction/SwapIntroduction.tsx b/apps/mobile/src/modules/swap/components/SwapIntroduction/SwapIntroduction.tsx index 9ec99300f..10170d467 100644 --- a/apps/mobile/src/modules/swap/components/SwapIntroduction/SwapIntroduction.tsx +++ b/apps/mobile/src/modules/swap/components/SwapIntroduction/SwapIntroduction.tsx @@ -18,6 +18,7 @@ import { PWView, } from '@components/core' import { Trans } from 'react-i18next' +import { useSafeAreaInsets } from 'react-native-safe-area-context' import { useLanguage } from '@hooks/useLanguage' import { useWebView } from '@modules/webview' import { config } from '@perawallet/wallet-core-config' @@ -36,7 +37,8 @@ export const SwapIntroduction = ({ onStartSwapping, onClose, }: SwapIntroductionProps) => { - const styles = useStyles() + const insets = useSafeAreaInsets() + const styles = useStyles(insets) const { t } = useLanguage() const { pushWebView } = useWebView() diff --git a/apps/mobile/src/modules/swap/components/SwapIntroduction/styles.ts b/apps/mobile/src/modules/swap/components/SwapIntroduction/styles.ts index 88c06e8d3..37577e36a 100644 --- a/apps/mobile/src/modules/swap/components/SwapIntroduction/styles.ts +++ b/apps/mobile/src/modules/swap/components/SwapIntroduction/styles.ts @@ -11,10 +11,11 @@ */ import { makeStyles } from '@rneui/themed' +import { EdgeInsets } from 'react-native-safe-area-context' -export const useStyles = makeStyles(theme => ({ +export const useStyles = makeStyles((theme, insets: EdgeInsets) => ({ sheetContainer: { - paddingBottom: theme.spacing.xxl, + paddingBottom: insets.bottom, }, heroSection: { backgroundColor: theme.colors.modalityBg, @@ -25,7 +26,7 @@ export const useStyles = makeStyles(theme => ({ }, contentSection: { paddingHorizontal: theme.spacing.xl, - paddingTop: theme.spacing['3xl'], + paddingTop: theme.spacing.xxl, gap: theme.spacing.lg, }, title: { @@ -33,7 +34,7 @@ export const useStyles = makeStyles(theme => ({ }, description: { color: theme.colors.textGray, - marginBottom: theme.spacing['3xl'], + marginBottom: theme.spacing.xl, }, poweredBy: { color: theme.colors.textGrayLighter, diff --git a/apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/SwapPairHistoryWidget.tsx b/apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/SwapPairHistoryWidget.tsx index 7812bef28..00b40dbf0 100644 --- a/apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/SwapPairHistoryWidget.tsx +++ b/apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/SwapPairHistoryWidget.tsx @@ -109,7 +109,7 @@ export const SwapPairHistoryWidget = () => { {t('swap.history.widget.title')} { data={pairs} renderItem={renderPair} keyExtractor={keyExtractor} + style={styles.list} contentContainerStyle={styles.listContent} /> diff --git a/apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/styles.ts b/apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/styles.ts index e1e2be9c3..3f44d45d0 100644 --- a/apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/styles.ts +++ b/apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/styles.ts @@ -21,13 +21,17 @@ export const useStyles = makeStyles(theme => ({ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', + paddingHorizontal: theme.spacing.md, }, title: { color: theme.colors.textMain, }, + list: { + marginHorizontal: -theme.spacing.sm, + }, listContent: { gap: theme.spacing.sm, - paddingRight: theme.spacing.md, + paddingHorizontal: theme.spacing.lg, }, chip: { flexDirection: 'row', @@ -35,7 +39,7 @@ export const useStyles = makeStyles(theme => ({ gap: theme.spacing.sm, paddingVertical: theme.spacing.sm, paddingHorizontal: theme.spacing.md, - borderRadius: theme.spacing.xl, + borderRadius: theme.spacing.lg, backgroundColor: theme.colors.layerGrayLightest, }, skeleton: { diff --git a/apps/mobile/src/modules/swap/components/SwapProviderBottomSheet/SwapProviderBottomSheet.tsx b/apps/mobile/src/modules/swap/components/SwapProviderBottomSheet/SwapProviderBottomSheet.tsx index d36df21df..5ed5f9ae3 100644 --- a/apps/mobile/src/modules/swap/components/SwapProviderBottomSheet/SwapProviderBottomSheet.tsx +++ b/apps/mobile/src/modules/swap/components/SwapProviderBottomSheet/SwapProviderBottomSheet.tsx @@ -77,7 +77,7 @@ export const SwapProviderBottomSheet = ({ onPress={handleApply} testID='swap-provider-apply' > - + {t('swap.provider.apply')} diff --git a/apps/mobile/src/modules/swap/components/SwapProviderBottomSheet/styles.ts b/apps/mobile/src/modules/swap/components/SwapProviderBottomSheet/styles.ts index 4f07e66cd..78912cce2 100644 --- a/apps/mobile/src/modules/swap/components/SwapProviderBottomSheet/styles.ts +++ b/apps/mobile/src/modules/swap/components/SwapProviderBottomSheet/styles.ts @@ -13,9 +13,6 @@ import { makeStyles } from '@rneui/themed' export const useStyles = makeStyles(theme => ({ - applyText: { - color: theme.colors.linkPrimary, - }, list: { paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.md, diff --git a/apps/mobile/src/theme/typography.ts b/apps/mobile/src/theme/typography.ts index 7fc12f83b..5a2e68dac 100644 --- a/apps/mobile/src/theme/typography.ts +++ b/apps/mobile/src/theme/typography.ts @@ -32,6 +32,7 @@ export type TypographyVariant = | 'bodySemibold' | 'caption' | 'link' + | 'linkPositive' | 'mono' export const getTypography = ( @@ -102,6 +103,13 @@ export const getTypography = ( color: theme.colors.linkPrimary, fontWeight: 500, }, + linkPositive: { + fontFamily: getFontFamily(500), + fontSize: 13, + lineHeight: 24, + color: theme.colors.positive, + fontWeight: 500, + }, mono: { fontFamily: getMonoFontFamily(400), fontSize: 13,