Clean up login page

components/auth/Auth.tsx

@@ -4,6 +4,8 @@ import { supabase } from '@/lib/supabase';
 import { ThemedView, ThemedText, ThemedTextButton, ThemedTextInput } from '@/components/theme';
 import AppleSignInButton from '@/components/auth/AppleSignIniOS';
 import AzureSignIn from './AzureSignIn';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
 import type { updateUser } from '@/constants/Types';
 
 // Tells Supabase Auth to continuously refresh the session automatically if
@@ -21,6 +23,8 @@ if (Platform.OS !== 'web') {
 }
 
 const Auth = () => {
+  const scheme = useColorScheme() ?? 'dark';
+
   const [full_name, setFullName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -112,25 +116,46 @@ const Auth = () => {
         />
       </ThemedView>
 
-      <ThemedView style={[styles.verticallySpaced, styles.mt20]}>
-        <ThemedTextButton
-          text='Sign in'
-          disabled={loading}
-          onPress={() => signInWithEmail()}
-          fontSize={24}
-        />
+      <ThemedView style={styles.verticallySpaced}>
+        <ThemedView style={styles.horizontallySpaced}>
+          <ThemedTextButton
+            text='Sign in'
+            disabled={loading}
+            onPress={() => signInWithEmail()}
+            fontSize={28}
+            fontWeight='semibold'
+            width='50%'
+          />
+          <ThemedTextButton
+            text='Sign up'
+            disabled={loading}
+            onPress={() => signUpWithEmail()}
+            fontSize={28}
+            fontWeight='semibold'
+            width='50%'
+          />
+        </ThemedView>
+      </ThemedView>
+
+      <ThemedView style={styles.divider}>
+        <ThemedView style={[styles.dividerLine, { backgroundColor: Colors[scheme].text }]} />
+            <ThemedText type='subtitle' style={styles.dividerText}>or</ThemedText>
+        <ThemedView style={[styles.dividerLine, { backgroundColor: Colors[scheme].text }]} />
       </ThemedView>
 
       <ThemedView style={styles.verticallySpaced}>
-        <ThemedTextButton
-          text='Sign up'
-          disabled={loading}
-          onPress={() => signUpWithEmail()}
-          fontSize={24}
-        />
+        <AppleSignInButton />
+      </ThemedView>
+
+      <ThemedView style={styles.divider}>
+        <ThemedView style={[styles.dividerLine, { backgroundColor: Colors[scheme].text }]} />
+        <ThemedText type='subtitle' style={styles.dividerText}>or</ThemedText>
+        <ThemedView style={[styles.dividerLine, { backgroundColor: Colors[scheme].text }]} />
+      </ThemedView>
+
+      <ThemedView style={styles.verticallySpaced}>
+        <AzureSignIn />
       </ThemedView>
-      <AppleSignInButton />
-      <AzureSignIn />
     </ThemedView>
   );
 };
@@ -147,6 +172,14 @@ const styles = StyleSheet.create({
     paddingBottom: 4,
     alignItems: 'center',
   },
+  horizontallySpaced: {
+    flexDirection: 'row',
+    paddingLeft: 4,
+    paddingRight: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '90%',
+  },
   mt20: {
     marginTop: 20,
   },
@@ -172,11 +205,18 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: 20,
+    marginVertical: 5,
+    width: '80%',
+    alignSelf: 'center',
   },
   dividerText: {
-    marginHorizontal: 10,
-    fontSize: 16,
+    marginHorizontal: 15,
+    fontSize: 14,
     opacity: 0.7,
   },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    opacity: 0.3,
+  }
 });