Upload improvements for imgproxy.

components/error/error-display.jsx

@@ -5,7 +5,7 @@ import { Button, Card, Text } from "react-native-paper";
 export default function ErrorDisplay({ errorMessage, error, onDismiss }) {
   const { t } = useTranslation();
   return (
-    <Card style={{ margin: 8, backgroundColor: "#ffdddd" }}>
+    <Card mode="outlined" style={{ margin: 8, backgroundColor: "#ffdddd" }}>
       <Card.Title title={t("general.labels.error")} titleVariant="titleLarge" />
       <Card.Content>
         <Text>

components/job-documents/image-loader.jsx

@@ -33,7 +33,14 @@ const ImageLoader = ({ style, source, ...props }) => {
   if (loading)
     return (
       <>
-        <ActivityIndicator style={{ ...style, position: "absolute" }} />
+        <ActivityIndicator
+          style={{
+            ...style,
+            position: "absolute",
+            alignSelf: "center",
+            margin: 12,
+          }}
+        />
         {memorizedImage}
       </>
     );

components/job-lines/job-lines.jsx

@@ -4,7 +4,7 @@ import { useGlobalSearchParams } from "expo-router";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, useWindowDimensions } from "react-native";
-import { ActivityIndicator, DataTable } from "react-native-paper";
+import { ActivityIndicator, DataTable, useTheme } from "react-native-paper";
 import ErrorDisplay from "../error/error-display";
 
 export default function JobLines() {
@@ -18,7 +18,7 @@ export default function JobLines() {
   });
   const { width, height } = useWindowDimensions();
   const isLandscape = width > height;
-
+  const theme = useTheme();
   const { t } = useTranslation();
   const onRefresh = async () => {
     return refetch();
@@ -58,8 +58,13 @@ export default function JobLines() {
           </DataTable.Title>
         </DataTable.Header>
 
-        {job.joblines.map((item) => (
-          <DataTable.Row key={item.id}>
+        {job.joblines.map((item, index) => (
+          <DataTable.Row
+            key={item.id}
+            style={{
+              backgroundColor: index % 2 === 0 && theme.colors.surface,
+            }}
+          >
             <DataTable.Cell style={{ flex: 4 }}>
               {item.line_desc}
             </DataTable.Cell>

components/job-notes/job-notes.jsx

@@ -119,7 +119,7 @@ export default function JobNotes() {
 
 const NoteListItem = memo(function NoteListItem({ item }) {
   return (
-    <Card style={{ margin: 8 }}>
+    <Card mode="outlined" style={{ margin: 8 }}>
       <Card.Content>
         <View style={{ display: "flex", flex: 1 }}>
           <Text>{item.text}</Text>

components/job-tombstone/job-tombstone.jsx

@@ -95,7 +95,7 @@ function JobTombstone({ bodyshop }) {
         <RefreshControl refreshing={loading} onRefresh={onRefresh} />
       }
     >
-      <Card>
+      <Card mode="outlined">
         <Card.Title
           title={t("jobdetail.labels.jobinfo")}
           titleVariant="titleLarge"
@@ -132,7 +132,7 @@ function JobTombstone({ bodyshop }) {
         </Card.Content>
       </Card>
 
-      <Card>
+      <Card mode="outlined">
         <Card.Title
           title={t("jobdetail.labels.claiminformation")}
           titleVariant="titleLarge"
@@ -164,7 +164,7 @@ function JobTombstone({ bodyshop }) {
           </View>
         </Card.Content>
       </Card>
-      <Card>
+      <Card mode="outlined">
         <Card.Title
           title={t("jobdetail.labels.employeeassignments")}
           titleVariant="titleLarge"
@@ -211,7 +211,7 @@ function JobTombstone({ bodyshop }) {
           />
         </Card.Content>
       </Card>
-      <Card>
+      <Card mode="outlined">
         <Card.Title
           title={t("jobdetail.labels.dates")}
           titleVariant="titleLarge"

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

@@ -56,7 +56,7 @@ function JobListItemComponent({ openImagePicker, item }) {
           style={[
             styles.glassCard,
             {
-              backgroundColor: theme.colors.primaryContainer,
+              backgroundColor: theme.colors.surface,
               borderColor: theme.colors.outlineVariant,
             },
           ]}

components/settings/settings.jsx

@@ -71,7 +71,7 @@ function Tab({ bodyshop, currentUser, signOutStart }) {
         {t("settings.titles.settings")}
       </Text>
       <ScrollView contentContainerStyle={styles.container}>
-        <Card style={styles.section}>
+        <Card style={styles.section} mode="outlined">
           <Card.Title title="Storage" />
           <Card.Content>
             <List.Section>
@@ -110,7 +110,7 @@ function Tab({ bodyshop, currentUser, signOutStart }) {
           </Card.Actions>
         </Card>
 
-        <Card style={styles.section}>
+        <Card style={styles.section} mode="outlined">
           <Card.Title title={t("settings.labels.theme")} />
           <Card.Content>
             <List.Section>
@@ -121,7 +121,7 @@ function Tab({ bodyshop, currentUser, signOutStart }) {
           </Card.Content>
           <Card.Actions></Card.Actions>
         </Card>
-        <Card style={styles.section}>
+        <Card style={styles.section} mode="outlined">
           <Card.Title title="Notifications" />
           <Card.Content>
             <List.Section>
@@ -157,7 +157,7 @@ function Tab({ bodyshop, currentUser, signOutStart }) {
           </Card.Actions>
         </Card>
 
-        <Card style={styles.section}>
+        <Card style={styles.section} mode="outlined">
           <Card.Content>
             <Text style={styles.paragraph}>
               {`${t("settings.labels.signedinshop")} ${

components/upload-progress/upload-progress.jsx

@@ -46,7 +46,7 @@ export function UploadProgress({
     const total = Object.keys(photoUploadProgress).length;
     if (total === 0) return 0;
     const completed = Object.values(photoUploadProgress).filter(
-      (p) => p.progress === 100
+      (p) => p.progress === 1
     ).length;
     return completed / total;
   }, [photoUploadProgress]);