chore(mobile): improve layout and styling in login terms (#2715)

apps/mobile/src/contexts/LoginTermsContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from "react"
+
+export const LoginTermsCheckedContext = createContext(__DEV__)
+
+export const LoginTermsCheckGuardContext = createContext<((callback: () => void) => void) | null>(
+  () => {},
+)

apps/mobile/src/modules/login/email.tsx

@@ -17,7 +17,7 @@ import { z } from "zod"
 
 import { ReAnimatedPressable } from "@/src/components/common/AnimatedComponents"
 import { ThemedText } from "@/src/components/common/ThemedText"
-import { LoginTeamsCheckGuardContext } from "@/src/contexts/LoginTeamsContext"
+import { LoginTermsCheckGuardContext } from "@/src/contexts/LoginTermsContext"
 import { signIn } from "@/src/lib/auth"
 import { toast } from "@/src/lib/toast"
 import { accentColor, useColor } from "@/src/theme/colors"
@@ -76,9 +76,9 @@ export function EmailLogin() {
     mutationFn: onSubmit,
   })
 
-  const teamsCheckGuard = useContext(LoginTeamsCheckGuardContext)
+  const termsCheckGuard = useContext(LoginTermsCheckGuardContext)
   const login = handleSubmit((values) => {
-    teamsCheckGuard?.(() => submitMutation.mutate(values))
+    termsCheckGuard?.(() => submitMutation.mutate(values))
   })
 
   const disableColor = useColor("gray3")

apps/mobile/src/modules/login/index.tsx

@@ -14,31 +14,31 @@ import * as ContextMenu from "zeego/context-menu"
 import { ThemedText } from "@/src/components/common/ThemedText"
 import { Logo } from "@/src/components/ui/logo"
 import {
-  LoginTeamsCheckedContext,
-  LoginTeamsCheckGuardContext,
-} from "@/src/contexts/LoginTeamsContext"
+  LoginTermsCheckedContext,
+  LoginTermsCheckGuardContext,
+} from "@/src/contexts/LoginTermsContext"
 import { isIOS } from "@/src/lib/platform"
 import { toast } from "@/src/lib/toast"
-import { TeamsMarkdown } from "@/src/screens/(headless)/terms"
+import { TermsMarkdown } from "@/src/screens/(headless)/terms"
 
 import { EmailLogin } from "./email"
 import { SocialLogin } from "./social"
 
 export function Login() {
   const [isChecked, setIsChecked] = useState(false)
 
-  const teamsCheckBoxRef = useRef<{ shake: () => void }>(null)
+  const termsCheckBoxRef = useRef<{ shake: () => void }>(null)
   return (
-    <LoginTeamsCheckedContext.Provider value={isChecked}>
-      <LoginTeamsCheckGuardContext.Provider
+    <LoginTermsCheckedContext.Provider value={isChecked}>
+      <LoginTermsCheckGuardContext.Provider
         value={useCallback(
           (callback: () => void) => {
             if (isChecked) {
               callback()
             } else {
               toast.info("Please accept the Terms of Service and Privacy Policy")
 
-              teamsCheckBoxRef.current?.shake()
+              termsCheckBoxRef.current?.shake()
             }
           },
           [isChecked],
@@ -57,7 +57,7 @@ export function Login() {
               <EmailLogin />
             </View>
           </TouchableWithoutFeedback>
-          <TeamsCheckBox ref={teamsCheckBoxRef} isChecked={isChecked} setIsChecked={setIsChecked} />
+          <TermsCheckBox ref={termsCheckBoxRef} isChecked={isChecked} setIsChecked={setIsChecked} />
           <View className="border-t-opaque-separator border-t-hairline mx-28" />
           <View className="mt-2 items-center">
             <View className="mb-4 flex w-full max-w-sm flex-row items-center gap-4">
@@ -68,12 +68,12 @@ export function Login() {
             <SocialLogin />
           </View>
         </View>
-      </LoginTeamsCheckGuardContext.Provider>
-    </LoginTeamsCheckedContext.Provider>
+      </LoginTermsCheckGuardContext.Provider>
+    </LoginTermsCheckedContext.Provider>
   )
 }
 
-const TeamsCheckBox = forwardRef<
+const TermsCheckBox = forwardRef<
   { shake: () => void },
   {
     isChecked: boolean
@@ -108,10 +108,11 @@ const TeamsCheckBox = forwardRef<
   return (
     <Animated.View className="mb-4 flex-row items-center gap-2 px-8" style={shakeStyle}>
       <BouncyCheckbox
+        className="gap-2"
         isChecked={isChecked}
         onPress={setIsChecked}
         size={14}
-        textComponent={<TeamsText />}
+        textComponent={<TermsText />}
         onLongPress={() => {
           if (!isIOS) {
             router.push("/terms")
@@ -122,10 +123,10 @@ const TeamsCheckBox = forwardRef<
   )
 })
 
-const TeamsText = () => {
+const TermsText = () => {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="overflow-hidden rounded-full px-2">
+      <ContextMenu.Trigger className="overflow-hidden rounded-full">
         <ThemedText className="text-secondary-label text-sm">
           I agree to the Terms of Service and Privacy Policy
         </ThemedText>
@@ -139,8 +140,8 @@ const TeamsText = () => {
           }, [])}
         >
           {() => (
-            <View className="flex-1">
-              <TeamsMarkdown />
+            <View className="bg-system-background flex-1">
+              <TermsMarkdown />
             </View>
           )}
         </ContextMenu.Preview>

apps/mobile/src/modules/login/social.tsx

@@ -3,7 +3,7 @@ import { useColorScheme } from "nativewind"
 import { useContext } from "react"
 import { Platform, TouchableOpacity, View } from "react-native"
 
-import { LoginTeamsCheckGuardContext } from "@/src/contexts/LoginTeamsContext"
+import { LoginTermsCheckGuardContext as LoginTermsCheckGuardContext } from "@/src/contexts/LoginTermsContext"
 import { AppleCuteFiIcon } from "@/src/icons/apple_cute_fi"
 import { GithubCuteFiIcon } from "@/src/icons/github_cute_fi"
 import { GoogleCuteFiIcon } from "@/src/icons/google_cute_fi"
@@ -40,7 +40,7 @@ const provider: Record<
 
 export function SocialLogin() {
   const { data } = useAuthProviders()
-  const teamsCheckGuard = useContext(LoginTeamsCheckGuardContext)
+  const termsCheckGuard = useContext(LoginTermsCheckGuardContext)
   const { colorScheme } = useColorScheme()
 
   return (
@@ -54,7 +54,7 @@ export function SocialLogin() {
               key={key}
               className="border-opaque-separator border-hairline rounded-full p-2"
               onPress={() =>
-                teamsCheckGuard?.(async () => {
+                termsCheckGuard?.(async () => {
                   if (!data?.[providerInfo.id]) return
 
                   if (providerInfo.id === "apple") {

apps/mobile/src/screens/(headless)/terms.tsx

@@ -82,7 +82,7 @@ Before contributing, ensure that you have read and understood our contributing g
 Follow takes your privacy seriously. As a user, you acknowledge that we may collect, store, and process your personal information, including your usage patterns and interactions with content. We are committed to ensuring that your data is handled securely and transparently. Please refer to our [Privacy Policy](#) for more information on how we collect, process, and protect your data.
 `
 
-export const TeamsMarkdown = () => {
+export const TermsMarkdown = () => {
   return (
     <Markdown
       value={txt}
@@ -112,7 +112,7 @@ export default function Teams() {
         }}
       />
 
-      <TeamsMarkdown />
+      <TermsMarkdown />
     </View>
   )
 }