chore: security screen

app/screens/settings-screen/security-screen.tsx

@@ -1,14 +1,14 @@
 import * as React from "react"
 import { useState } from "react"
-import { Switch, View } from "react-native"
+import { View } from "react-native"
 
 import { useApolloClient } from "@apollo/client"
 import { GaloyTertiaryButton } from "@app/components/atomic/galoy-tertiary-button"
 import { useHideBalanceQuery } from "@app/graphql/generated"
 import { useI18nContext } from "@app/i18n/i18n-react"
 import { RouteProp, useFocusEffect } from "@react-navigation/native"
 import { StackNavigationProp } from "@react-navigation/stack"
-import { Text, makeStyles } from "@rneui/themed"
+import { Text, makeStyles, Switch } from "@rneui/themed"
 
 import { Screen } from "../../components/screen"
 import {
@@ -21,35 +21,6 @@ import { PinScreenPurpose } from "../../utils/enum"
 import KeyStoreWrapper from "../../utils/storage/secureStorage"
 import { toastShow } from "../../utils/toast"
 
-const useStyles = makeStyles(() => ({
-  container: {
-    minHeight: "100%",
-    paddingLeft: 24,
-    paddingRight: 24,
-  },
-
-  description: {
-    fontSize: 14,
-    marginTop: 2,
-  },
-
-  settingContainer: {
-    flexDirection: "row",
-  },
-
-  switch: {
-    bottom: 18,
-    position: "absolute",
-    right: 0,
-  },
-
-  textContainer: {
-    marginBottom: 12,
-    marginRight: 60,
-    marginTop: 32,
-  },
-}))
-
 type Props = {
   navigation: StackNavigationProp<RootStackParamList, "security">
   route: RouteProp<RootStackParamList, "security">
@@ -158,21 +129,19 @@ export const SecurityScreen: React.FC<Props> = ({ route, navigation }) => {
         <View style={styles.textContainer}>
           <Text type="h1">{LL.SecurityScreen.pinTitle()}</Text>
           <Text type="p2">{LL.SecurityScreen.pinDescription()}</Text>
+          <GaloyTertiaryButton
+            title={LL.SecurityScreen.setPin()}
+            onPress={() =>
+              navigation.navigate("pin", { screenPurpose: PinScreenPurpose.SetPin })
+            }
+          />
         </View>
         <Switch
           style={styles.switch}
           value={isPinEnabled}
           onValueChange={onPinValueChanged}
         />
       </View>
-      <View style={styles.settingContainer}>
-        <GaloyTertiaryButton
-          title={LL.SecurityScreen.setPin()}
-          onPress={() =>
-            navigation.navigate("pin", { screenPurpose: PinScreenPurpose.SetPin })
-          }
-        />
-      </View>
       <View style={styles.settingContainer}>
         <View style={styles.textContainer}>
           <Text type="h1">{LL.SecurityScreen.hideBalanceTitle()}</Text>
@@ -187,3 +156,28 @@ export const SecurityScreen: React.FC<Props> = ({ route, navigation }) => {
     </Screen>
   )
 }
+
+const useStyles = makeStyles(() => ({
+  container: {
+    margin: 24,
+    display: "flex",
+    flexDirection: "column",
+    rowGap: 20,
+  },
+
+  settingContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+
+  switch: {
+    position: "absolute",
+    right: 0,
+  },
+
+  textContainer: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: 8,
+  },
+}))