✨ feat(mobile): replace custom icons with lucide-react-native and upd…

apps/mobile/package.json

@@ -20,10 +20,13 @@
     "@ts-rest/core": "^3.51.0",
     "better-auth": "^1.2.7",
     "expo": "~54.0.10",
+    "expo-linear-gradient": "~15.0.7",
     "expo-status-bar": "~3.0.8",
+    "lucide-react-native": "^0.544.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.4",
+    "react-native-svg": "^15.13.0",
     "react-native-web": "~0.21.1",
     "zod": "^3.24.1"
   },

apps/mobile/src/components/AccountScreen.tsx

@@ -202,7 +202,7 @@ export default function AccountScreen({ onTabPress }: AccountScreenProps) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#1A1A1A',
+    backgroundColor: '#191d26',
   },
   header: {
     alignItems: 'center',
@@ -233,8 +233,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    backgroundColor: 'rgba(255, 255, 255, 0.08)',
-    borderRadius: 16,
+    backgroundColor: '#282c38',
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#414551',
     paddingHorizontal: 20,
     paddingVertical: 18,
     marginBottom: 12,
@@ -283,10 +285,10 @@ const styles = StyleSheet.create({
     marginTop: 16,
   },
   logoutItem: {
-    backgroundColor: 'rgba(231, 76, 60, 0.15)',
+    backgroundColor: '#282c38',
   },
   logoutText: {
-    color: '#E74C3C',
+    color: '#FFFFFF',
     fontWeight: '600',
   },
   bottomSpacing: {

apps/mobile/src/components/BottomNavigation.tsx

@@ -4,35 +4,13 @@ import {
   TouchableOpacity,
   StyleSheet,
 } from 'react-native';
+import { Notebook, User, Dumbbell } from 'lucide-react-native';
 
 interface BottomNavigationProps {
   activeTab: 'pr' | 'dashboard' | 'account';
   onTabPress: (tab: 'pr' | 'dashboard' | 'account') => void;
 }
 
-// PR Icon Component (Trophy/Medal icon)
-const PRIcon = ({ active }: { active: boolean }) => (
-  <View style={styles.iconWrapper}>
-    {/* Trophy base */}
-    <View style={[styles.trophyBase, { backgroundColor: active ? '#FFFFFF' : 'rgba(255,255,255,0.5)' }]} />
-    {/* Trophy cup */}
-    <View style={[styles.trophyCup, { backgroundColor: active ? '#FFFFFF' : 'rgba(255,255,255,0.5)' }]} />
-    {/* Trophy handles */}
-    <View style={[styles.trophyHandleLeft, { borderColor: active ? '#FFFFFF' : 'rgba(255,255,255,0.5)' }]} />
-    <View style={[styles.trophyHandleRight, { borderColor: active ? '#FFFFFF' : 'rgba(255,255,255,0.5)' }]} />
-  </View>
-);
-
-// Account Icon Component (User profile icon)
-const AccountIcon = ({ active }: { active: boolean }) => (
-  <View style={styles.iconWrapper}>
-    {/* Head */}
-    <View style={[styles.userHead, { backgroundColor: active ? '#FFFFFF' : 'rgba(255,255,255,0.5)' }]} />
-    {/* Body */}
-    <View style={[styles.userBody, { backgroundColor: active ? '#FFFFFF' : 'rgba(255,255,255,0.5)' }]} />
-  </View>
-);
-
 export default function BottomNavigation({ activeTab, onTabPress }: BottomNavigationProps) {
   return (
     <View style={styles.container}>
@@ -43,7 +21,10 @@ export default function BottomNavigation({ activeTab, onTabPress }: BottomNaviga
           onPress={() => onTabPress('pr')}
           activeOpacity={0.7}
         >
-          <PRIcon active={activeTab === 'pr'} />
+          <Notebook
+            color={activeTab === 'pr' ? '#FFFFFF' : 'rgba(255,255,255,0.5)'}
+            size={24}
+          />
         </TouchableOpacity>
 
         {/* Dashboard Button (Center/Main) */}
@@ -52,12 +33,10 @@ export default function BottomNavigation({ activeTab, onTabPress }: BottomNaviga
           onPress={() => onTabPress('dashboard')}
           activeOpacity={0.7}
         >
-          <View style={[
-            styles.centerIcon,
-            activeTab === 'dashboard' && styles.activeCenterIcon
-          ]}>
-            <View style={styles.playIcon} />
-          </View>
+          <Dumbbell
+            color={activeTab === 'dashboard' ? '#FFFFFF' : 'rgba(255,255,255,0.5)'}
+            size={24}
+          />
         </TouchableOpacity>
 
         {/* Account Button */}
@@ -66,7 +45,10 @@ export default function BottomNavigation({ activeTab, onTabPress }: BottomNaviga
           onPress={() => onTabPress('account')}
           activeOpacity={0.7}
         >
-          <AccountIcon active={activeTab === 'account'} />
+          <User
+            color={activeTab === 'account' ? '#FFFFFF' : 'rgba(255,255,255,0.5)'}
+            size={24}
+          />
         </TouchableOpacity>
       </View>
     </View>
@@ -77,13 +59,13 @@ const styles = StyleSheet.create({
   container: {
     paddingBottom: 40, // Safe area for iPhone
     paddingTop: 20,
-    backgroundColor: '#1A1A1A',
+    backgroundColor: '#191d26',
   },
   navigationBar: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    backgroundColor: '#1A1A1A',
+    backgroundColor: '#191d26',
     paddingTop: 0,
     paddingHorizontal: 20,
     marginHorizontal: 0,
@@ -99,100 +81,4 @@ const styles = StyleSheet.create({
   centerButton: {
     marginHorizontal: 20,
   },
-  centerIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: '#FFFFFF',
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 8,
-  },
-  activeCenterIcon: {
-    backgroundColor: '#F0F0F0',
-  },
-  playIcon: {
-    width: 0,
-    height: 0,
-    backgroundColor: 'transparent',
-    borderStyle: 'solid',
-    borderTopWidth: 12,
-    borderRightWidth: 0,
-    borderBottomWidth: 12,
-    borderLeftWidth: 20,
-    borderTopColor: 'transparent',
-    borderRightColor: 'transparent',
-    borderBottomColor: 'transparent',
-    borderLeftColor: '#000000',
-    marginLeft: 4,
-  },
-  // Icon wrapper
-  iconWrapper: {
-    width: 28,
-    height: 28,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  // Trophy Icon Styles
-  trophyBase: {
-    width: 12,
-    height: 4,
-    position: 'absolute',
-    bottom: 0,
-  },
-  trophyCup: {
-    width: 12,
-    height: 14,
-    borderRadius: 6,
-    position: 'absolute',
-    top: 0,
-  },
-  trophyHandleLeft: {
-    position: 'absolute',
-    left: -2,
-    top: 4,
-    width: 6,
-    height: 8,
-    borderWidth: 2,
-    borderRightWidth: 0,
-    borderTopLeftRadius: 4,
-    borderBottomLeftRadius: 4,
-    backgroundColor: 'transparent',
-  },
-  trophyHandleRight: {
-    position: 'absolute',
-    right: -2,
-    top: 4,
-    width: 6,
-    height: 8,
-    borderWidth: 2,
-    borderLeftWidth: 0,
-    borderTopRightRadius: 4,
-    borderBottomRightRadius: 4,
-    backgroundColor: 'transparent',
-  },
-
-  // User Icon Styles
-  userHead: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    position: 'absolute',
-    top: 0,
-  },
-  userBody: {
-    width: 16,
-    height: 10,
-    borderRadius: 8,
-    position: 'absolute',
-    bottom: 0,
-  },
 });

apps/mobile/src/components/DashboardCarousel.tsx

@@ -222,7 +222,7 @@ const styles = StyleSheet.create({
     height: height * 0.6, // 60% of screen height for card content
     borderRadius: 20,
     borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)',
+    borderColor: '#414551',
     shadowColor: '#000',
     shadowOffset: {
       width: 0,

apps/mobile/src/components/DashboardScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
@@ -10,10 +10,53 @@ import BottomNavigation from './BottomNavigation';
 import AccountScreen from './AccountScreen';
 import PRScreen from './PRScreen';
 import TrainingScreen from './TrainingScreen';
+import { authClient } from '../lib/auth-client';
+import { api } from '../lib/api';
+import type { AthleteDetailsDto } from '@dropit/schemas';
 
 export default function DashboardScreen() {
   const [activeTab, setActiveTab] = useState<'pr' | 'dashboard' | 'account'>('dashboard');
   const [showTraining, setShowTraining] = useState(false);
+  const [athleteData, setAthleteData] = useState<AthleteDetailsDto | null>(null);
+  const [athleteId, setAthleteId] = useState<string | null>(null);
+
+  // Fetch athleteId from session on mount
+  useEffect(() => {
+    const fetchSession = async () => {
+      try {
+        const sessionData = await authClient.getSession();
+        if (sessionData.data?.session?.athleteId) {
+          setAthleteId(sessionData.data.session.athleteId);
+        }
+      } catch (error) {
+        console.error('Error fetching session:', error);
+      }
+    };
+    fetchSession();
+  }, []);
+
+  // Fetch athlete data when athleteId is available
+  useEffect(() => {
+    const fetchAthleteData = async () => {
+      if (!athleteId) return;
+
+      try {
+        const response = await api.athlete.getAthlete({
+          params: { id: athleteId },
+        });
+
+        const data = typeof response.body === 'string' ? JSON.parse(response.body) : response.body;
+
+        if (response.status === 200) {
+          setAthleteData(data);
+        }
+      } catch (error) {
+        console.error('Error fetching athlete data:', error);
+      }
+    };
+
+    fetchAthleteData();
+  }, [athleteId]);
 
 
   const handleTabPress = (tab: 'pr' | 'dashboard' | 'account') => {
@@ -55,7 +98,7 @@ export default function DashboardScreen() {
 
       {/* Greeting */}
       <View style={styles.greetingContainer}>
-        <Text style={styles.greeting}>Bonjour, Clovis</Text>
+        <Text style={styles.greeting}>Bonjour, {athleteData?.firstName || 'Athlète'}</Text>
       </View>
 
       {/* Carousel Content */}
@@ -75,7 +118,7 @@ export default function DashboardScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#1A1A1A',
+    backgroundColor: '#191d26',
   },
   header: {
     paddingHorizontal: 24,

apps/mobile/src/components/LoginScreen.tsx

@@ -147,7 +147,7 @@ export default function LoginScreen({ onLoginSuccess }: LoginScreenProps) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#1A1A1A',
+    backgroundColor: '#191d26',
   },
   scrollContainer: {
     flexGrow: 1,