+4 -4

apps/amethyst/app/auth/login.tsx

··· 23 const handleLogin = async () => { 24 if (!handle) { 25 setErr("Please enter a handle"); 26 - return 27 } 28 29 setIsLoading(true); ··· 71 <View className="flex items-center"> 72 <Icon icon={AtSign} className="color-bsky" name="at" size={64} /> 73 </View> 74 - <Text className="text-3xl font-semibold text-center text-foreground"> 75 Sign in with your PDS 76 </Text> 77 <View> ··· 118 > 119 {isRedirecting ? ( 120 <> 121 - <Text className="font-semibold text-lg">Redirecting</Text> 122 <Icon icon={Check} /> 123 </> 124 ) : ( 125 <> 126 - <Text className="font-semibold text-lg">Login</Text> 127 <Icon icon={ChevronRight} /> 128 </> 129 )}

··· 23 const handleLogin = async () => { 24 if (!handle) { 25 setErr("Please enter a handle"); 26 + return; 27 } 28 29 setIsLoading(true); ··· 71 <View className="flex items-center"> 72 <Icon icon={AtSign} className="color-bsky" name="at" size={64} /> 73 </View> 74 + <Text className="text-3xl text-center text-foreground"> 75 Sign in with your PDS 76 </Text> 77 <View> ··· 118 > 119 {isRedirecting ? ( 120 <> 121 + <Text className="text-lg">Redirecting</Text> 122 <Icon icon={Check} /> 123 </> 124 ) : ( 125 <> 126 + <Text className="text-lg">Sign in</Text> 127 <Icon icon={ChevronRight} /> 128 </> 129 )}

+1 -1

apps/amethyst/app/auth/logoutModal.tsx

··· 32 router.navigate("/"); 33 }} 34 > 35 - <Text className="font-semibold text-lg">Sign out</Text> 36 </Button> 37 38 {/* Use a light status bar on iOS to account for the black space above the modal */}

··· 32 router.navigate("/"); 33 }} 34 > 35 + <Text className="text-lg">Sign out</Text> 36 </Button> 37 38 {/* Use a light status bar on iOS to account for the black space above the modal */}

+2 -2

apps/amethyst/app/auth/options.tsx

··· 16 }} 17 /> 18 <View className="gap-2"> 19 - <Text className="text-5xl font-semibold text-center text-foreground"> 20 Get started with 21 </Text> 22 - <Text className="text-center text-5xl font-semibold text-foreground"> 23 teal 24 <Text className="text-5xl font-serif-old-italic">.fm</Text> 25 </Text>

··· 16 }} 17 /> 18 <View className="gap-2"> 19 + <Text className="text-5xl text-center text-foreground"> 20 Get started with 21 </Text> 22 + <Text className="text-center text-5xl text-foreground"> 23 teal 24 <Text className="text-5xl font-serif-old-italic">.fm</Text> 25 </Text>

+18 -18

apps/amethyst/app/auth/signup.tsx

··· 4 import { Text } from "@/components/ui/text"; 5 import { Button } from "@/components/ui/button"; 6 import { Icon } from "@/lib/icons/iconWithClassName"; 7 - import { ArrowRight } from "lucide-react-native"; 8 9 import { Stack, router } from "expo-router"; 10 import { FontAwesome6 } from "@expo/vector-icons"; ··· 19 headerShown: false, 20 }} 21 /> 22 - <View className="flex-1 justify-center p-8 gap-4 pb-32 w-screen max-w-screen-md"> 23 - <Text className="text-4xl font-semibold text-center text-foreground"> 24 - Sign up with{" "} 25 <Icon 26 - icon={FontAwesome6} 27 - className="color-bsky" 28 - name="bluesky" 29 - size={28} 30 />{" "} 31 - Bluesky 0 0 0 32 </Text> 33 <View className="flex flex-col justify-center items-center"> 34 - <Text className="text-foreground text-lg"> 35 - No account? That's fine. 36 - </Text> 37 - <Text className="text-foreground text-center text-lg"> 38 - Sign up for Bluesky, then return here to sign in. 39 </Text> 40 - <Text className="text-muted-foreground mt-2 mb-4 text-center text-xs"> 41 - You'll need a PDS to use teal.fm. Bluesky is a good way to get one. 42 </Text> 43 {/* on click, open tab, then in the background navigate to /login */} 44 <Button ··· 53 router.replace("/auth/login"); 54 }, 1000); 55 }} 56 - className="flex flex-row justify-center items-center gap-2" 57 > 58 - <Text className="text-sm ml-2 text-secondary">Go</Text> 59 <Icon icon={ArrowRight} /> 60 </Button> 61 </View>

··· 4 import { Text } from "@/components/ui/text"; 5 import { Button } from "@/components/ui/button"; 6 import { Icon } from "@/lib/icons/iconWithClassName"; 7 + import { ArrowRight, AtSignIcon } from "lucide-react-native"; 8 9 import { Stack, router } from "expo-router"; 10 import { FontAwesome6 } from "@expo/vector-icons"; ··· 19 headerShown: false, 20 }} 21 /> 22 + <View className="flex-1 justify-center p-8 gap-4 pb-32 w-screen max-w-md"> 23 + <Text className="text-3xl text-center text-foreground -mb-2"> 24 + Sign up via{" "} 25 <Icon 26 + icon={AtSignIcon} 27 + className="color-bsky inline mb-2" 28 + size={32} 0 29 />{" "} 30 + ATProto 31 + </Text> 32 + <Text className="text-foreground text-xl text-center"> 33 + No account? No problem. 34 </Text> 35 <View className="flex flex-col justify-center items-center"> 36 + <Text className="mb-2 text-center -mx-3"> 37 + To use teal.fm, you’ll need a PDS—your personal data storage on the 38 + AT Protocol. Signing up with Bluesky is a great way to begin. 0 0 39 </Text> 40 + <Text className="text-center mb-4 text-xs text-muted-foreground"> 41 + Sign up with Bluesky, then return here to start exploring. 42 </Text> 43 {/* on click, open tab, then in the background navigate to /login */} 44 <Button ··· 53 router.replace("/auth/login"); 54 }, 1000); 55 }} 56 + className="flex flex-row justify-center items-center gap-2 bg-bsky" 57 > 58 + <Text className="text-sm ml-2 text-secondary">To Bluesky</Text> 59 <Icon icon={ArrowRight} /> 60 </Button> 61 </View>