Clean up login page

components/auth/AzureSignIn.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StyleSheet, Alert } from 'react-native';
+import { Image, StyleSheet, Alert } from 'react-native';
 import * as WebBrowser from 'expo-web-browser';
 import * as Linking from 'expo-linking';
 import * as AuthSession from 'expo-auth-session';
@@ -136,27 +136,27 @@ const AzureSignIn = () => {
   };
 
   return (
-    <ThemedView style={styles.verticallySpaced}>
-      <ThemedButton disabled={loading} onPress={signInWithAzure}>
-        <ThemedText
-          lightColor={Colors.dark.text}
-          darkColor={Colors.light.text}
-          type='defaultSemiBold'
-        >
-          {loading ? 'Signing in...' : 'Sign in with Microsoft'}
-        </ThemedText>
-      </ThemedButton>
-    </ThemedView>
+    <ThemedButton disabled={loading} onPress={signInWithAzure}>
+      <Image source={require('@/assets/images/Microsoft_Logo.png')} style={styles.microsoftLogo} />
+      <ThemedText
+        type='custom'
+        fontWeight='semibold'
+        fontSize={26}
+        lightColor={Colors.dark.text}
+        darkColor={Colors.light.text}
+      >
+        {loading ? 'Signing in...' : 'Sign in with Microsoft'}
+      </ThemedText>
+    </ThemedButton>
   );
 };
 
 export default AzureSignIn;
 
 const styles = StyleSheet.create({
-  verticallySpaced: {
-    paddingTop: 4,
-    paddingBottom: 4,
-    alignItems: 'center',
-    marginTop: 20,
+  microsoftLogo: {
+    height: 30,
+    width: 30,
+    marginRight: 10,
   },
 });