Polish login screen layout and sign-in buttons

front/app/login.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { StyleSheet, Platform, Button, View, Text, Alert, ActivityIndicator } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
+import { ThemedText } from "@/components/ThemedText";
 import { ThemedTextInput } from "@/components/ThemedTextInput";
 import { getTokens, setTokens, TokenData } from "@/api/tokens";
 import { useRouter } from "expo-router";
@@ -27,6 +28,7 @@ const LoginScreen = () => {
   const router = useRouter();
   const borderColor = useThemeColor({}, "border");
   const textColor = useThemeColor({}, "text");
+  const mutedTextColor = useThemeColor({}, "icon");
 
   useEffect(() => {
     const checkForCachedPin = async () => {
@@ -185,11 +187,13 @@ const LoginScreen = () => {
         </View>
       )}
 
+      <ThemedText style={[styles.tagline, { color: mutedTextColor }]}>
+        Safe AI tutors for your kids
+      </ThemedText>
+
       <ThemedView style={styles.mainContent}>
         <GoogleSignInButton onPress={handleGoogleLogin} />
-        <View style={styles.appleButton}>
-          <AppleSignInButton onPress={handleAppleLogin} />
-        </View>
+        <AppleSignInButton onPress={handleAppleLogin} />
       </ThemedView>
     </ThemedView>
   );
@@ -202,8 +206,13 @@ const styles = StyleSheet.create({
   mainContent: {
     flex: 1,
     justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 20,
+    paddingHorizontal: 24,
+    gap: 16,
+  },
+  tagline: {
+    marginTop: 16,
+    textAlign: "center",
+    paddingHorizontal: 24,
   },
   devSection: {
     display: "flex",
@@ -218,9 +227,6 @@ const styles = StyleSheet.create({
   tokenInput: {
     marginBottom: 10,
   },
-  appleButton: {
-    marginTop: 30,
-  },
 });
 
 export default LoginScreen;

front/components/AppleSignInButton.tsx

@@ -1,22 +1,19 @@
 import React from 'react';
-import { Pressable, StyleSheet, Image, useColorScheme } from 'react-native';
+import { Pressable, StyleSheet, Image } from 'react-native';
 
 type AppleSignInButtonProps = {
   onPress: () => void;
 }
 
 export const AppleSignInButton = ({ onPress }: AppleSignInButtonProps) => {
-  const colorScheme = useColorScheme();
-  const imageSource = colorScheme === "dark" ? require("../assets/images/apple-sign-in-dark.png") : require("../assets/images/apple-sign-in.png");
-
   return (
-    <Pressable testID="apple-sign-in-button" onPress={onPress} 
+    <Pressable testID="apple-sign-in-button" onPress={onPress}
     style={({ pressed }) => [
       styles.appleButton,
       pressed && styles.appleButtonPressed,
     ]}>
       <Image
-        source={imageSource}
+        source={require("../assets/images/apple-sign-in.png")}
         style={styles.logo}
       />
     </Pressable>

front/components/GoogleSignInButton.tsx

@@ -22,21 +22,25 @@ export const GoogleSignInButton = ({ onPress }: GoogleSignInButtonProps) => {
       <Image
         source={imageSource}
         style={styles.googleImage}
+        contentFit="contain"
       />
     </Pressable>
   );
 };
 
 const styles = StyleSheet.create({
   googleButton: {
+    width: "100%",
+    height: 50,
     flexDirection: "row",
     alignItems: "center",
+    justifyContent: "center",
   },
   googleButtonPressed: {
     opacity: 0.8,
   },
   googleImage: {
-    width: 300,
-    height: 71,
+    width: "100%",
+    height: "100%",
   },
 });