From 00e6da03f98a90cd98cd04af5f25625ab529b027 Mon Sep 17 00:00:00 2001
From: Vali98 <al244098@gmail.com>
Date: Sat, 23 Nov 2024 13:08:11 +0800
Subject: [PATCH] style: improved lock screen look

---
 app/_layout.tsx             | 21 +++++++++++----------
 app/constants/LocalAuth.tsx |  6 ++++--
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/_layout.tsx b/app/_layout.tsx
index b6c36ff..36b74f7 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,18 +1,18 @@
 import { AlertBox } from '@components/Alert'
+import useLocalAuth from '@constants/LocalAuth'
 import { db, rawdb } from '@db'
+import { AntDesign } from '@expo/vector-icons'
 import { Style, initializeApp, startupApp } from '@globals'
 import { useMigrations } from 'drizzle-orm/expo-sqlite/migrator'
 import { useDrizzleStudio } from 'expo-drizzle-studio-plugin'
 import { SplashScreen, Stack } from 'expo-router'
 import { setOptions } from 'expo-splash-screen'
 import { useEffect, useState } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { MenuProvider } from 'react-native-popup-menu'
 
 import migrations from '../db/migrations/migrations'
-import useLocalAuth from '@constants/LocalAuth'
-import { AntDesign } from '@expo/vector-icons'
 
 const DevDB = () => {
     useDrizzleStudio(rawdb)
@@ -52,8 +52,8 @@ const Layout = () => {
             <View style={styles.centeredContainer}>
                 <AntDesign
                     name="lock"
-                    size={180}
-                    style={{ marginBottom: 30 }}
+                    size={120}
+                    style={{ marginBottom: 12 }}
                     color={Style.getColor('primary-text3')}
                 />
                 <Text style={styles.title}>Authentication Required</Text>
@@ -105,11 +105,12 @@ const styles = StyleSheet.create({
     },
 
     button: {
-        paddingVertical: 8,
-        paddingHorizontal: 12,
-        marginTop: 20,
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        marginTop: 120,
         columnGap: 8,
-        borderRadius: 8,
-        backgroundColor: Style.getColor('primary-surface4'),
+        borderRadius: 32,
+        borderWidth: 2,
+        borderColor: Style.getColor('primary-surface4'),
     },
 })
diff --git a/app/constants/LocalAuth.tsx b/app/constants/LocalAuth.tsx
index 5631a26..0887ca1 100644
--- a/app/constants/LocalAuth.tsx
+++ b/app/constants/LocalAuth.tsx
@@ -15,8 +15,10 @@ const useLocalAuth = () => {
     }, [retryCount])
 
     useEffect(() => {
-        if (enabled)
-            authenticateAsync().then((result) => {
+        if (enabled && !success)
+            authenticateAsync({
+                promptMessage: 'ChatterUI requires authentication',
+            }).then((result) => {
                 setSuccess(result.success)
             })
     }, [retryCount])