fix(suite-native): welcome flow ui review fixes

trezor · Feb 10, 2025 · 25ffdcd · 25ffdcd
1 parent 116e559
commit 25ffdcd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx b/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { TouchableOpacity } from 'react-native';
 
 import { EventType, analytics } from '@suite-native/analytics';
 import { Box, Button, Card, Switch, Text, TitleHeader, VStack } from '@suite-native/atoms';
@@ -57,6 +58,10 @@ export const AnalyticsConsentScreen = ({
         handleOpenLink(LEARN_MORE_LINK);
     };
 
+    const toggleAnalyticsConsent = () => {
+        setIsEnabled(prevIsEnabled => !prevIsEnabled);
+    };
+
     return (
         <Screen>
             <VStack justifyContent="space-between" flex={1}>
@@ -92,23 +97,26 @@ export const AnalyticsConsentScreen = ({
                                         }
                                     />
                                 </VStack>
-                                <Box
-                                    flexDirection="row"
-                                    alignItems="center"
-                                    justifyContent="space-between"
-                                    style={applyStyle(consentWrapperStyle)}
+                                <TouchableOpacity
+                                    onPress={toggleAnalyticsConsent}
+                                    activeOpacity={0.5}
                                 >
-                                    <Text>
-                                        <Translation id="moduleOnboarding.analyticsConsentScreen.helpSwitchTitle" />
-                                    </Text>
-                                    <Switch
-                                        testID="@onboarding/AnalyticsConsent/consentSwitch"
-                                        isChecked={isEnabled}
-                                        onChange={enabled => {
-                                            setIsEnabled(enabled);
-                                        }}
-                                    />
-                                </Box>
+                                    <Box
+                                        flexDirection="row"
+                                        alignItems="center"
+                                        justifyContent="space-between"
+                                        style={applyStyle(consentWrapperStyle)}
+                                    >
+                                        <Text>
+                                            <Translation id="moduleOnboarding.analyticsConsentScreen.helpSwitchTitle" />
+                                        </Text>
+                                        <Switch
+                                            testID="@onboarding/AnalyticsConsent/consentSwitch"
+                                            isChecked={isEnabled}
+                                            onChange={toggleAnalyticsConsent}
+                                        />
+                                    </Box>
+                                </TouchableOpacity>
                             </VStack>
                         </Box>
                     </Card>

diff --git a/suite-native/module-onboarding/src/screens/BiometricsScreen.tsx b/suite-native/module-onboarding/src/screens/BiometricsScreen.tsx
@@ -17,10 +17,17 @@ import {
     StackProps,
 } from '@suite-native/navigation';
 import { setIsOnboardingFinished } from '@suite-native/settings';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+const titleStyle = prepareNativeStyle(_ => ({
+    // this title should have smaller letter spacing by design.
+    letterSpacing: -1.4,
+}));
 
 export const BiometricsScreen = ({
     navigation,
 }: StackProps<OnboardingStackParamList, OnboardingStackRoutes.Biometrics>) => {
+    const { applyStyle } = useNativeStyles();
     const { toggleBiometricsOption } = useBiometricsSettings();
 
     const dispatch = useDispatch();
@@ -68,10 +75,10 @@ export const BiometricsScreen = ({
     return (
         <Screen header={<ScreenHeader />}>
             <VStack justifyContent="space-between" flex={1}>
-                <Box flex={1} alignItems="center" paddingTop="sp32">
+                <Box flex={1} alignItems="center" justifyContent="center">
                     <BiometricsSvg />
                 </Box>
-                <VStack spacing={40}>
+                <VStack spacing="sp40">
                     <VStack spacing="sp16">
                         <HStack spacing="sp8" alignItems="center">
                             <Icon
@@ -83,7 +90,7 @@ export const BiometricsScreen = ({
                                 <Translation id="moduleOnboarding.biometricsScreen.title" />
                             </Text>
                         </HStack>
-                        <Text variant="titleMedium">
+                        <Text style={applyStyle(titleStyle)} variant="titleMedium">
                             <Translation id="moduleOnboarding.biometricsScreen.description" />
                         </Text>
                     </VStack>