feat: file upload status improvements

frontend/src/lib/components/dashboard/DashboardUploadCard.svelte

@@ -3,9 +3,9 @@
 	import FileDrop from 'filedrop-svelte';
 	import { submissionProgress, UploadStatus, type Status } from '$lib/stores/portfolio';
 	import { createEventDispatcher } from 'svelte';
-	import StatusNotification from './StatusNotification.svelte';
 	import ProgressBar from './ProgressBar.svelte';
 	import type { AxiosProgressEvent } from 'axios';
+	import StatusNotificationDot from './StatusNotificationDot.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -22,7 +22,8 @@
 
 	$: if ($submissionProgress) {
 		status = getStatus();
-		console.log('type' + fileType + ' status: ' + status);
+		// console.log('type' + fileType + ' status: ' + status);
+		fileDropped = status === 'uploaded' || status === 'submitted';
 	}
 
 	const getStatus = (): Status => {
@@ -86,22 +87,28 @@
 <div class="card uploadCard">
 	<div class="flex flex-col sm:flex-row justify-between sm:items-center">
 		<h3 class="">{title}</h3>
-		<StatusNotification {status} />
 		<div class="mt-1 sm:mt-0">
 			<FileType {filetype} {filesize} />
 		</div>
+		<div class="mb-16 mr-8">
+			<StatusNotificationDot {status} />
+		</div>
 	</div>
 	{#if fileDropped}	
 		<div class="flex content-around justify-between items-center mb-5 ml-5 mr-5">
 			<svg class="w-35 h-35" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
 			<svg class="h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"><line x1="0" y="0" x2="0" y2="40" stroke="#406280ff" stroke-width="2" stroke-dasharray="3"></line></svg>
 			<div class="items-center">
-				<h2 class="text-xl">Nahráno {((bytesTotal / 1_000_000) * progress).toFixed(1)} MB</h2>
+				{#if bytesTotal === 0}
-				<h2 class="text-xl self-center">z {(bytesTotal / 1_000_000).toFixed(1)} MB</h2>
+					<h2 class="text-xl font-bold">{status === 'submitted' ? "Odesláno" : "Nahráno"}</h2>
+				{:else}
+					<h2 class="text-xl">Nahráno {((bytesTotal / 1_000_000) * progress).toFixed(1)} MB</h2>
+					<h2 class="text-xl self-center">z {(bytesTotal / 1_000_000).toFixed(1)} MB</h2>
+				{/if}
 			</div>
 			<svg class="h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"><line x1="0" y="0" x2="0" y2="40" stroke="#406280ff" stroke-width="2" stroke-dasharray="3"></line></svg>
 			<div class="items-center text-center">
-				<h2 class="text-2xl text-sspsBlueDark font-bold mb-2">{Math.round(progress * 100) + "%"}</h2>
+				<h2 class="text-2xl text-sspsBlueDark font-bold mb-2">{Math.round(progress * 100)} %</h2>
 				<ProgressBar progress={progress}></ProgressBar>
 			</div>
 		</div>

frontend/src/lib/components/dashboard/FileType.svelte

@@ -4,9 +4,9 @@
 </script>
 
 <div>
-	<span class="text-sspsBlue italic text-sm">{filetype}</span>
+	<span class="text-sspsBlue italic text-lg">{filetype}</span>
 	<span class="mx-2 text-sspsGray">/</span>
-	<span class="text-sspsBlue italic text-sm">Max {filesize}</span>
+	<span class="text-sspsBlue italic text-lg">Max {filesize}</span>
 </div>
 
 <style>

frontend/src/lib/components/dashboard/StatusNotificationBig.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Status } from "$lib/stores/portfolio";
+    import StatusNotificationDot from "./StatusNotificationDot.svelte";
+
+    export let status: Status;
+
+    let title: string;
+    switch (status) {
+        case "submitted":
+            title = "Soubory odeslány!";
+            break;
+        case "uploaded":
+            title = "Soubory nahrány!";
+            break;
+        case "missing":
+            title = "Chybí soubory!";
+            break;
+    }
+
+</script>
+<div class="bg-white rounded-full flex mb-8">
+    <div class="mt-3 mb-3 ml-3 flex flex-row">
+        <h2 class="ml-2 text-2xl text-sspsBlueDark font-bold">{title}</h2>
+        <span class="ml-32  w-8 h-8 rounded-full self-center {status}" />
+        <!-- <StatusNotificationDot {status} /> -->
+    </div>
+</div>
+
+<style>
+    .submitted {
+        @apply bg-[#35e000ff];
+    }
+
+    .uploaded {
+        @apply bg-[#ff8530ff];
+    }
+
+    .missing {
+        @apply bg-[#ff3030ff];
+    }
+</style>
+

frontend/src/lib/components/dashboard/StatusNotificationDot.svelte

@@ -19,22 +19,22 @@
 </script>
 
 <!-- make red dot -->
-<div class="flex flex-col justify-between">
+<div class="flex flex-row justify-between">
-    <span class="mt-1 w-5 h-5 rounded-full {status}" />
+    <span class="mt-1 w-6 h-6 rounded-full {status}" />
-    <h3 class="ml-8 font-bold text-xl">{title}</h3>
+    <!-- <h3 class="ml-8 font-bold text-xl">{title}</h3> -->
 </div>
 
 <style>
     span {
-		@apply absolute rounded-full p-1;
+		@apply rounded-full p-1;
 	}
 
     .submitted {
-        @apply bg-green-700;
+        @apply bg-[#35e000ff];
     }
 
     .uploaded {
-        @apply bg-yellow-700;
+        @apply bg-[#ff8530ff];
     }
 
     .missing {

frontend/src/lib/components/layout/FullLayout.svelte

@@ -6,10 +6,10 @@
 
 <div class="bg">
 	<div class="bgOverlay">
-		<!-- <img class="logo" src={logo} alt="SSPŠ logo" /> -->
+		<img class="logo" src={logo}  alt="SSPŠ logo" />
-		<!-- <div class="darkModeToggle">
+		<div class="darkModeToggle">
 			<DarkModeToggle backgroundColor="dark" />
-		</div> -->
+		</div>
 	</div>
 	<div style={`background-image: url(${backgroundImage});`} class="bgImage" />
 </div>
@@ -20,6 +20,9 @@
 </div>
 
 <style>
+	.logo {
+		@apply w-[200px] h-[200px]
+	}
 	.bgImage {
 		@apply -z-20;
 		@apply absolute min-w-screen min-w-full min-h-screen;
@@ -34,7 +37,7 @@
 	.bgOverlay .logo {
 		@apply absolute top-0 left-0;
 		@apply hidden md:inline-block;
-		@apply h-auto max-w-56;
+		@apply h-auto max-w-72;
 		@apply p-7;
 	}
 	.bgOverlay .darkModeToggle {

frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte

@@ -53,7 +53,7 @@
 
 <style>
 	.dashboardDesktop {
-		@apply w-[70vw] h-[70vh];
+		@apply w-[65vw] h-[65vh];
 		@apply hidden md:grid grid-cols-8 grid-rows-2 gap-10;
 	}