fix(mobile): enhance social login button UI and interaction

- Increase gap between social login buttons
- Add `hitSlop` to improve touch target area
- Increase social login icon size for better visibility

Signed-off-by: Innei <tukon479@gmail.com>

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

@@ -62,7 +62,7 @@ const TermsText = () => {
     <ContextMenu.Root>
       <ContextMenu.Trigger className="w-full overflow-hidden rounded-full">
         <Text className="text-secondary-label text-sm">
-          <Link href="/terms" className="text-primary-label">
+          <Link href="/terms" suppressHighlighting className="text-primary-label">
             Terms of Service
           </Link>
         </Text>

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

@@ -41,14 +41,15 @@ export function SocialLogin() {
   const { colorScheme } = useColorScheme()
 
   return (
-    <View className="flex flex-row justify-center gap-4">
+    <View className="flex flex-row justify-center gap-8">
       {Object.keys(provider)
         .filter((key) => key !== "apple" || (Platform.OS === "ios" && key === "apple"))
         .map((key) => {
           const providerInfo = provider[key]!
           return (
             <TouchableOpacity
               key={key}
+              hitSlop={20}
               className="border-opaque-separator border-hairline rounded-full p-2"
               onPress={async () => {
                 if (!data?.[providerInfo.id]) return
@@ -87,8 +88,8 @@ export function SocialLogin() {
               disabled={!data?.[providerInfo.id]}
             >
               <providerInfo.icon
-                width={20}
-                height={20}
+                width={24}
+                height={24}
                 color={colorScheme === "dark" ? providerInfo.darkColor : providerInfo.color}
               />
             </TouchableOpacity>