From 3fbd00dfd88bf197debcecedd9d64c414d6fbdf6 Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Fri, 23 Dec 2022 22:21:43 +0100
Subject: [PATCH] fix: orange progress bar for unsubmitted uploads

---
 .../dashboard/DashboardUploadCard.svelte      |  2 +-
 .../components/dashboard/ProgressBar.svelte   | 46 ++++++++++---------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
index f0876c6..f1126cc 100644
--- a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -155,7 +155,7 @@
 			>
 			<div class="items-center text-center">
 				<h2 class="text-sspsBlueDark mb-2 text-2xl font-bold">{Math.round(progress * 100)} %</h2>
-				<ProgressBar {progress} />
+				<ProgressBar submitted={status === 'submitted'} {progress} />
 			</div>
 		</div>
 	{:else}
diff --git a/frontend/src/lib/components/dashboard/ProgressBar.svelte b/frontend/src/lib/components/dashboard/ProgressBar.svelte
index 91446ba..f423da6 100644
--- a/frontend/src/lib/components/dashboard/ProgressBar.svelte
+++ b/frontend/src/lib/components/dashboard/ProgressBar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	export let progress: number;
+	export let submitted: boolean = false;
 </script>
 
 <div class="progress-bar">
@@ -13,27 +14,30 @@
 	>
 		<line x1="5" y1="3" x2="45" y2="3" stroke="#e6e6e6" stroke-width="6" stroke-linecap="round" />
 
-		{#if progress === 1}
-			<line
-				x1="5"
-				y1="3"
-				x2={progress * 45}
-				y2="3"
-				stroke="#35e000ff"
-				stroke-width="3"
-				stroke-linecap="round"
-			/>
-		{:else}
-			<line
-				x1="5"
-				y1="3"
-				x2={progress * 45}
-				y2="3"
-				stroke="#75bff8ff"
-				stroke-width="3"
-				stroke-linecap="round"
-			/>
-		{/if}
+		<line
+			x1="5"
+			y1="3"
+			x2={progress * 45}
+			y2="3"
+			class:submitted={progress === 1 && submitted}
+			class:not-submitted={progress === 1 && !submitted}
+			class:uploading={progress !== 1}
+			stroke-width="3"
+			stroke-linecap="round"
+		/>
+
 		>
 	</svg>
 </div>
+
+<style>
+	.submitted {
+		@apply stroke-[#35e000ff];
+	}
+	.not-submitted {
+		@apply stroke-[#ef8b46];
+	}
+	.uploading {
+		@apply stroke-[#75bff8ff];
+	}
+</style>