Theme and UI updates

components/job-tombstone/job-tombstone.jsx

@@ -10,7 +10,7 @@ import {
   Text,
   View,
 } from "react-native";
-import { ActivityIndicator, Card } from "react-native-paper";
+import { ActivityIndicator, Card, useTheme } from "react-native-paper";
 import DataLabelComponent from "../data-label/data-label";
 
 export default function JobTombstone() {
@@ -22,6 +22,9 @@ export default function JobTombstone() {
     skip: !jobId,
   });
 
+  const theme = useTheme();
+  console.log("*** ~ JobTombstone ~ theme:", theme.colors);
+
   const { t } = useTranslation();
   const onRefresh = async () => {
     return refetch();

components/jobs-list/job-list-item.jsx

@@ -68,16 +68,31 @@ function JobListItemComponent({ openImagePicker, item }) {
               },
             ]}
           >
-            <View style={styles.headerRow}>
-              <View style={styles.leftHeader}>
-                <Text
-                  numberOfLines={1}
-                  style={[styles.roNumber, { color: theme.colors.primary }]}
-                >
-                  {roNumber} • {ownerName}
-                  {ownerName && company ? " • " : ""}
-                  {company}
-                </Text>
+            <View style={styles.cardContents}>
+              <View style={{ flex: 1, display: "flex" }}>
+                <View style={styles.headerRow}>
+                  <View style={styles.leftHeader}>
+                    <Text
+                      numberOfLines={1}
+                      style={[styles.roNumber, { color: theme.colors.primary }]}
+                    >
+                      {roNumber} • {ownerName}
+                      {ownerName && company ? " • " : ""}
+                      {company}
+                    </Text>
+                  </View>
+                </View>
+                <View style={styles.body}>
+                  {!!vehicle && (
+                    <Text
+                      variant="bodyMedium"
+                      numberOfLines={1}
+                      style={{ marginTop: 4 }}
+                    >
+                      {vehicle}
+                    </Text>
+                  )}
+                </View>
               </View>
               <IconButton
                 onPress={handleUpload}
@@ -88,17 +103,6 @@ function JobListItemComponent({ openImagePicker, item }) {
                 style={styles.uploadButton}
               />
             </View>
-            <View style={styles.body}>
-              {!!vehicle && (
-                <Text
-                  variant="bodyMedium"
-                  numberOfLines={1}
-                  style={{ marginTop: 4 }}
-                >
-                  {vehicle}
-                </Text>
-              )}
-            </View>
           </View>
         </BlurView>
       </View>
@@ -129,6 +133,7 @@ const styles = StyleSheet.create({
     borderWidth: StyleSheet.hairlineWidth,
     backdropFilter: "blur(20px)", // web only
   },
+  cardContents: { flex: 1, flexDirection: "row", display: "flex" },
   headerRow: {
     flexDirection: "row",
     alignItems: "flex-start",