From 4c55bf013125720bc76f6cff0759c5127aaea66f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= Date: Mon, 10 Jun 2024 05:03:00 +0700 Subject: [PATCH] feat(mobile): beautify auth screen (#58) --- apps/mobile/app/(app)/_layout.tsx | 12 +- apps/mobile/app/(auth)/_layout.tsx | 2 +- apps/mobile/app/(auth)/login.tsx | 44 +++++- apps/mobile/app/(aux)/privacy-policy.tsx | 5 + apps/mobile/app/(aux)/terms-of-service.tsx | 7 + apps/mobile/app/_layout.tsx | 33 +++-- apps/mobile/components/Button.tsx | 41 +++++- apps/mobile/components/IconButton.tsx | 85 ++++++++++++ apps/mobile/components/Input.tsx | 23 +++- apps/mobile/components/Separator.tsx | 38 ++++++ apps/mobile/components/auth/auth-email.tsx | 121 +++++++++++------ apps/mobile/components/auth/auth-social.tsx | 40 ++++++ apps/mobile/components/auth/emailSchema.tsx | 13 ++ .../components/form-fields/input-field.tsx | 28 ++++ .../components/form-fields/submit-button.tsx | 12 ++ .../components/svg-assets/apple-logo.tsx | 9 ++ .../svg-assets/auth-illustration.tsx | 125 ++++++++++++++++++ .../components/svg-assets/google-logo.tsx | 21 +++ apps/mobile/global.css | 4 +- apps/mobile/package.json | 6 +- pnpm-lock.yaml | 53 ++++++-- 21 files changed, 636 insertions(+), 86 deletions(-) create mode 100644 apps/mobile/app/(aux)/privacy-policy.tsx create mode 100644 apps/mobile/app/(aux)/terms-of-service.tsx create mode 100644 apps/mobile/components/IconButton.tsx create mode 100644 apps/mobile/components/Separator.tsx create mode 100644 apps/mobile/components/auth/auth-social.tsx create mode 100644 apps/mobile/components/auth/emailSchema.tsx create mode 100644 apps/mobile/components/form-fields/input-field.tsx create mode 100644 apps/mobile/components/form-fields/submit-button.tsx create mode 100644 apps/mobile/components/svg-assets/apple-logo.tsx create mode 100644 apps/mobile/components/svg-assets/auth-illustration.tsx create mode 100644 apps/mobile/components/svg-assets/google-logo.tsx diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx index be73b900..41d5c7d2 100644 --- a/apps/mobile/app/(app)/_layout.tsx +++ b/apps/mobile/app/(app)/_layout.tsx @@ -1,13 +1,15 @@ import { useAuth } from '@clerk/clerk-expo' -import { Redirect, Stack } from 'expo-router' -import { Text } from 'react-native' +import { Redirect, SplashScreen, Stack } from 'expo-router' +import { useEffect } from 'react' export default function AuthenticatedLayout() { const { isLoaded, isSignedIn } = useAuth() - if (!isLoaded) { - return Loading... - } + useEffect(() => { + if (isLoaded) { + SplashScreen.hideAsync() + } + }, [isLoaded]) if (!isSignedIn) { return diff --git a/apps/mobile/app/(auth)/_layout.tsx b/apps/mobile/app/(auth)/_layout.tsx index 79565437..8a60ae9e 100644 --- a/apps/mobile/app/(auth)/_layout.tsx +++ b/apps/mobile/app/(auth)/_layout.tsx @@ -10,7 +10,7 @@ export default function UnAuthenticatedLayout() { } return ( - + ) diff --git a/apps/mobile/app/(auth)/login.tsx b/apps/mobile/app/(auth)/login.tsx index 91795eb8..5f64349d 100644 --- a/apps/mobile/app/(auth)/login.tsx +++ b/apps/mobile/app/(auth)/login.tsx @@ -1,16 +1,54 @@ +import { Button } from '@/components/Button' +import { Separator } from '@/components/Separator' import { AuthEmail } from '@/components/auth/auth-email' -import { ScrollView, Text } from 'react-native' +import { + AppleAuthButton, + GoogleAuthButton, +} from '@/components/auth/auth-social' +import { AuthIllustration } from '@/components/svg-assets/auth-illustration' +import { Link } from 'expo-router' +import { MailIcon } from 'lucide-react-native' +import { useState } from 'react' +import { ScrollView, Text, View } from 'react-native' export default function LoginScreen() { + const [withEmail, setWithEmail] = useState(false) return ( - + Manage your expense seamlessly Let 6pm a good time to spend - + + + + +