Merge pull request #671 from christianlouis/copilot/update-logos-and-ux

[WIP] Update mobile app to use DocuElevate's original UX and logos

mobile/App.tsx

@@ -8,6 +8,7 @@
 
 import { NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -48,8 +49,8 @@ function TabNavigator() {
         options={{
           title: "Upload",
           tabBarLabel: "Upload",
-          tabBarIcon: ({ color }) => (
-            <Text style={{ fontSize: 20, color }}>⬆️</Text>
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="cloud-upload-outline" size={size} color={color} />
           ),
           headerTitle: "DocuElevate",
         }}
@@ -60,8 +61,8 @@ function TabNavigator() {
         options={{
           title: "Files",
           tabBarLabel: "Files",
-          tabBarIcon: ({ color }) => (
-            <Text style={{ fontSize: 20, color }}>📄</Text>
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="document-text-outline" size={size} color={color} />
           ),
           headerTitle: "My Documents",
         }}
@@ -72,8 +73,8 @@ function TabNavigator() {
         options={{
           title: "Profile",
           tabBarLabel: "Profile",
-          tabBarIcon: ({ color }) => (
-            <Text style={{ fontSize: 20, color }}>👤</Text>
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="person-circle-outline" size={size} color={color} />
           ),
           headerTitle: "Profile",
         }}

mobile/src/screens/LoginScreen.tsx

@@ -10,6 +10,7 @@ import React, { useState } from "react";
 import {
   ActivityIndicator,
   Alert,
+  Image,
   KeyboardAvoidingView,
   Platform,
   Pressable,
@@ -53,7 +54,15 @@ export default function LoginScreen() {
       behavior={Platform.OS === "ios" ? "padding" : undefined}
     >
       <View style={styles.card}>
-        <Text style={styles.logo}>DocuElevate</Text>
+        <View style={styles.logoContainer}>
+          <Image
+            source={require("../../../assets/logo.png")}
+            style={styles.logoImage}
+            resizeMode="contain"
+            accessibilityLabel="DocuElevate logo"
+          />
+          <Text style={styles.logoText}>DocuElevate</Text>
+        </View>
         <Text style={styles.tagline}>Intelligent Document Processing</Text>
 
         <Text style={styles.label}>Server URL</Text>
@@ -110,12 +119,20 @@ const styles = StyleSheet.create({
     shadowRadius: 12,
     elevation: 4,
   },
-  logo: {
+  logoContainer: {
+    alignItems: "center",
+    marginBottom: 4,
+  },
+  logoImage: {
+    width: 80,
+    height: 80,
+    marginBottom: 10,
+  },
+  logoText: {
     fontSize: 28,
     fontWeight: "700",
     color: "#1e40af",
     textAlign: "center",
-    marginBottom: 4,
   },
   tagline: {
     fontSize: 14,