Redesign the ServerJobCard

lib/ui/components/jobs_content/server_job_card.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:selfprivacy/logic/models/json/server_job.dart';
-import 'package:selfprivacy/ui/components/brand_cards/brand_cards.dart';
 import 'package:selfprivacy/ui/components/brand_linear_indicator/brand_linear_indicator.dart';
 
 class ServerJobCard extends StatelessWidget {
@@ -12,31 +11,83 @@ class ServerJobCard extends StatelessWidget {
   final ServerJob serverJob;
 
   @override
-  Widget build(final BuildContext context) => GestureDetector(
+  Widget build(final BuildContext context) {
-        child: BrandCards.big(
+    Color color;
+    IconData icon;
+
+    switch (serverJob.status) {
+      case JobStatusEnum.created:
+        color = Theme.of(context).colorScheme.secondary;
+        icon = Icons.query_builder_outlined;
+        break;
+      case JobStatusEnum.running:
+        color = Theme.of(context).colorScheme.tertiary;
+        icon = Icons.pending_outlined;
+        break;
+      case JobStatusEnum.finished:
+        color = Theme.of(context).colorScheme.primary;
+        icon = Icons.check_circle_outline;
+        break;
+      case JobStatusEnum.error:
+        color = Theme.of(context).colorScheme.error;
+        icon = Icons.error_outline;
+        break;
+    }
+
+    final String? statusString =
+        serverJob.error ?? serverJob.result ?? serverJob.statusText;
+
+    return GestureDetector(
+      child: Card(
+        child: Padding(
+          padding: const EdgeInsets.all(16.0),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              Text(
+              Row(
-                serverJob.name,
+                crossAxisAlignment: CrossAxisAlignment.start,
-                style: Theme.of(context).textTheme.bodyMedium,
+                children: [
-              ),
+                  Column(
-              Text(
+                    crossAxisAlignment: CrossAxisAlignment.start,
-                serverJob.description,
+                    children: [
-                style: Theme.of(context).textTheme.bodySmall,
+                      Text(
+                        serverJob.name,
+                        style: Theme.of(context).textTheme.bodyMedium,
+                      ),
+                      Text(
+                        serverJob.description,
+                        style: Theme.of(context).textTheme.bodySmall,
+                      ),
+                    ],
+                  ),
+                  const Spacer(),
+                  Icon(
+                    icon,
+                    color: color,
+                  ),
+                ],
               ),
               const SizedBox(height: 8),
               BrandLinearIndicator(
                 value: serverJob.progress == null
                     ? 0.0
                     : serverJob.progress! / 100.0,
-                color: Theme.of(context).colorScheme.secondary,
+                color: color,
                 backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
                 height: 7.0,
               ),
               const SizedBox(height: 8),
+              if (statusString != null)
+                Text(
+                  statusString,
+                  style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                        color: Theme.of(context).colorScheme.onSurface,
+                      ),
+                ),
             ],
           ),
         ),
-      );
+      ),
+    );
+  }
 }