Fix tasks page header not flush with top of screen

Remove SafeAreaView from available-pick-ups — it was double-stacking top
insets (SafeAreaView's automatic padding + header paddingTop:58), causing
the white header to appear pushed down with a gray gap behind the status bar.
Now matches the same pattern as my-tasks (plain View + paddingTop:58 to
clear the status bar). Also bumps contentContainer paddingBottom to 140
to clear the tab bar and home indicator.

Author: stephenhungg

src/app/(tabs)/available-pick-ups.tsx

@@ -5,15 +5,13 @@ import {
   Image,
   Pressable,
   RefreshControl,
-  SafeAreaView,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
 import { router } from 'expo-router';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import clockIcon from 'assets/date.png';
-import replateLogo from 'assets/replate-logo.png';
 import AnimatedSegmentedControl from '@/components/AnimatedSegmentedControl';
 import { useAuth } from '@/utils/AuthContext';
 import { ApiError, apiRequest, validateArrayResponse } from '~/api/apiUtils';
@@ -127,6 +125,11 @@ type UiPickup = {
 
 export default function AvailablePickupsPage() {
   const todayISO = localISODate(new Date());
+  const headerDate = new Date().toLocaleDateString('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+  });
 
   const tomorrowISO = React.useMemo(() => {
     const d = new Date();
@@ -219,7 +222,7 @@ export default function AvailablePickupsPage() {
 
   if (!driverId) {
     return (
-      <SafeAreaView style={styles.safeAreaContainer}>
+      <View style={styles.safeAreaContainer}>
         <View
           style={{
             flex: 1,
@@ -246,12 +249,12 @@ export default function AvailablePickupsPage() {
             </Text>
           </TouchableOpacity>
         </View>
-      </SafeAreaView>
+      </View>
     );
   }
 
   return (
-    <SafeAreaView style={styles.safeAreaContainer}>
+    <View style={styles.safeAreaContainer}>
       <FlatList
         data={filtered}
         keyExtractor={item => item.encrypted_id}
@@ -277,12 +280,18 @@ export default function AvailablePickupsPage() {
               </View>
             ) : null}
             <View style={styles.header}>
-              <View style={styles.brandRow}>
-                <Text style={styles.replateTitle}>Replate</Text>
-                <Image style={styles.logo} source={replateLogo} />
+              <View style={styles.headerTopRow}>
+                <Text style={styles.date}>{headerDate}</Text>
+                <View style={styles.avatarCircle}>
+                  <Text style={styles.avatarLetter}>
+                    {(driver?.first_name || '?')[0]}
+                  </Text>
+                </View>
               </View>
-              <Text style={styles.availableTasksTitle}>
-                Available Tasks ({filtered.length})
+              <Text style={styles.greeting}>Available Tasks</Text>
+              <Text style={styles.subtext}>
+                {filtered.length} task{filtered.length === 1 ? '' : 's'}{' '}
+                available
               </Text>
               <AnimatedSegmentedControl
                 leftLabel="Today"
@@ -342,6 +351,6 @@ export default function AvailablePickupsPage() {
           <Text style={styles.claimPickupText}>No pickups for this date.</Text>
         }
       />
-    </SafeAreaView>
+    </View>
   );
 }

src/styles/tabs/available-pick-ups-styles.ts

@@ -9,14 +9,58 @@ export const styles = StyleSheet.create({
     marginTop: 16,
   },
   // header
-  availableTasksTitle: {
-    fontSize: 28,
+  header: {
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 22,
+    paddingTop: 58,
+    paddingBottom: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: '#D8E0E9',
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 4 },
+    shadowRadius: 10,
+    elevation: 4,
+    fontFamily: 'Lato',
+  },
+  headerTopRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  date: {
+    fontSize: 15,
+    color: '#525454',
+    fontFamily: 'Lato',
+  },
+  avatarCircle: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    backgroundColor: '#aeddc4',
+    borderWidth: 2,
+    borderColor: '#3ea377',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarLetter: {
+    fontSize: 16,
+    color: '#3EA377',
+    fontWeight: '600',
     fontFamily: 'LatoBold',
-    fontWeight: '700',
-    color: '#2C805B',
-    marginLeft: 26,
-    marginTop: 27,
-    marginBottom: 14,
+  },
+  greeting: {
+    color: '#427B60',
+    textAlign: 'left',
+    fontFamily: 'LatoBold',
+    fontSize: 27,
+    height: 32,
+  },
+  subtext: {
+    textAlign: 'left',
+    color: '#2D8A60',
+    fontSize: 15,
+    marginTop: 12,
+    fontFamily: 'Lato',
   },
   segmentWrap: {
     flexDirection: 'row',
@@ -52,41 +96,6 @@ export const styles = StyleSheet.create({
   segmentTextInactive: {
     color: Colors.black,
   },
-  header: {
-    backgroundColor: '#FFFFFF',
-    // creates the “header container” separation
-    ...Platform.select({
-      ios: {
-        shadowColor: '#000',
-        shadowOpacity: 0.08,
-        shadowRadius: 10,
-        shadowOffset: { width: 0, height: 6 },
-      },
-      android: {
-        elevation: 6,
-      },
-    }),
-
-    // keeps the shadow from being clipped by the next content
-    marginBottom: 14,
-  },
-  replateTitle: {
-    fontSize: 18,
-    fontFamily: 'Lato',
-    color: '#3EA377',
-    fontWeight: '400',
-  },
-  logo: {
-    height: 30,
-    width: 30,
-  },
-  brandRow: {
-    flexDirection: 'row',
-    alignItems: 'center', // vertical centering
-    justifyContent: 'center', // horizontal centering
-    gap: 5, // space between text & logo
-    marginTop: 12,
-  },
   //cards
   pickupCard: {
     marginHorizontal: 16,
@@ -191,7 +200,7 @@ export const styles = StyleSheet.create({
     color: '#427B60',
   },
   contentContainer: {
-    paddingBottom: 24,
+    paddingBottom: 140,
   },
   claimPickupText: {
     textAlign: 'center',
@@ -202,7 +211,8 @@ export const styles = StyleSheet.create({
   },
   safeAreaContainer: {
     flex: 1,
-    backgroundColor: '#f8f8f8',
+    backgroundColor: '#EAEEF2',
+    paddingTop: 0,
   },
   loadingContainer: {
     flex: 1,
@@ -216,6 +226,9 @@ export const styles = StyleSheet.create({
   },
   itemSeparator: {
     height: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#EDF1F7',
+    marginHorizontal: 16,
   },
   //[id] styles
   detailsSections: {