fix: polish swap UI [PERA-3428]

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<string, PWIconVariant> = {
     secondary: 'primary',
     helper: 'helper',
     link: 'link',
+    linkPositive: 'positive',
     destructive: 'white',
     destructiveLight: 'error',
     errorLink: 'error',

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,

apps/mobile/src/modules/swap/components/SwapConfigurationBottomSheet/SwapConfigurationBottomSheet.tsx

@@ -86,7 +86,7 @@ export const SwapConfigurationBottomSheet = ({
                     }
                     right={
                         <PWButton
-                            variant='link'
+                            variant='linkPositive'
                             title={t('swap.configuration.apply')}
                             onPress={handleApply}
                             isDisabled={!isApplyEnabled}

apps/mobile/src/modules/swap/components/SwapForm/SwapFormControls.tsx

@@ -53,7 +53,7 @@ export const SwapFormControls = ({
                     <PWIcon
                         name='sliders'
                         size='sm'
-                        variant='link'
+                        variant='positive'
                     />
                 </PWTouchableOpacity>
                 <PWView style={styles.maxDivider} />
@@ -63,7 +63,7 @@ export const SwapFormControls = ({
                     testID='swap-max-button'
                 >
                     <PWText
-                        variant='link'
+                        variant='linkPositive'
                         style={styles.maxText}
                     >
                         {t('swap.form.max')}

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 {

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()
 

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,15 +26,15 @@ export const useStyles = makeStyles(theme => ({
     },
     contentSection: {
         paddingHorizontal: theme.spacing.xl,
-        paddingTop: theme.spacing['3xl'],
+        paddingTop: theme.spacing.xxl,
         gap: theme.spacing.lg,
     },
     title: {
         color: theme.colors.textMain,
     },
     description: {
         color: theme.colors.textGray,
-        marginBottom: theme.spacing['3xl'],
+        marginBottom: theme.spacing.xl,
     },
     poweredBy: {
         color: theme.colors.textGrayLighter,

apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/SwapPairHistoryWidget.tsx

@@ -109,7 +109,7 @@ export const SwapPairHistoryWidget = () => {
                         {t('swap.history.widget.title')}
                     </PWText>
                     <PWButton
-                        variant='link'
+                        variant='linkPositive'
                         paddingStyle='none'
                         title={t('swap.history.widget.see_all')}
                         onPress={handleSeeAllPress}
@@ -122,6 +122,7 @@ export const SwapPairHistoryWidget = () => {
                     data={pairs}
                     renderItem={renderPair}
                     keyExtractor={keyExtractor}
+                    style={styles.list}
                     contentContainerStyle={styles.listContent}
                 />
             </PWView>

apps/mobile/src/modules/swap/components/SwapPairHistoryWidget/styles.ts

@@ -21,21 +21,25 @@ 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',
         alignItems: 'center',
         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: {

apps/mobile/src/modules/swap/components/SwapProviderBottomSheet/SwapProviderBottomSheet.tsx

@@ -77,7 +77,7 @@ export const SwapProviderBottomSheet = ({
                         onPress={handleApply}
                         testID='swap-provider-apply'
                     >
-                        <PWText style={styles.applyText}>
+                        <PWText variant='linkPositive'>
                             {t('swap.provider.apply')}
                         </PWText>
                     </PWTouchableOpacity>

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,

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,