From 47445ba3814f1081f3fa03c9ffff94dfddb18640 Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Sun, 4 Dec 2022 20:10:42 +0100
Subject: [PATCH] feat: general styling improvements

---
 .../dashboard/DashboardInfoCard.svelte        | 33 +++----------------
 .../dashboard/StatusNotificationBig.svelte    |  9 ++---
 .../lib/components/layout/FullLayout.svelte   | 14 +++++---
 3 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index 7e9064c..a7f129f 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -10,53 +10,28 @@
 	const submit = async () => {
 		const res = await apiSubmitPortfolio();
 		await fetchSubmProgress();
-	}
+	};
 </script>
 
 <div class="card flex flex-col">
 	<div class="infoBar flex flex-row-reverse">
 		<StatusNotificationBig {status} />
 	</div>
-	<div class="flex flex-row justify-between relative">
+	<div class="relative flex flex-row justify-between">
 		<div>
 			<span class="absolute -left-16 -top-36">
 				<Circles />
 			</span>
-			<div class="mt-20 flex flex-col">
+			<div class="mt-8 flex flex-col lg:mt-12">
 				<h3>{title}</h3>
 				<slot />
 			</div>
 		</div>
-		<div class="flex flex-col justify-evenly w-[50%]">
-			{#if status === 'uploaded'}
-				<button on:click={submit} class="bg-green-600">
-					Odevzdat
-					<svg class="w-8 h-8 inline-block align-middle" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
-				</button>
-			{:else if status === 'submitted'}
-				<button class="bg-gray-500 hover:bg-gray-800">
-					Smazat portfolio
-					<svg class="w-8 h-8 inline-block align-middle" 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
-				</button>
-			{:else}
-				<button class="bg-gray-500 hover:bg-gray-500 hover:cursor-not-allowed">Odevzdat</button>
-			{/if}
-			<button>
-				Zobrazit údaje
-				<svg class="w-8 h-8 inline-block align-middle" 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>
-			</button>
-		</div>
 	</div>
 </div>
 
 <style>
-	button {
-		@apply bg-sspsBlue text-white font-bold;
-		@apply hover:bg-sspsBlueDark transition-colors duration-300;
-		@apply text-xl;
-		@apply rounded-xl shadow-lg;
-		@apply py-3 px-2;
-	}
+
 	.card {
 		@apply m-3;
 		@apply h-full;
diff --git a/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
index d4a4b56..e311194 100644
--- a/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
+++ b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
@@ -12,7 +12,7 @@
 			break;
 		case 'uploaded':
 			title = 'Soubory nebyly odevzdány!';
-			description = 'Odevzdejte soubory prosím';
+			description = 'Odevzdejte soubory kliknutím zde';
 			break;
 		case 'missing':
 			title = 'Soubory nebyly nahrány!';
@@ -23,7 +23,7 @@
 
 <div class="flex flex-col">
 	<div class="info flex flex-col {status}">
-		<span class="text-white text-2xl font-bold">{title}</span>
+		<span class="text-white text-xl font-bold">{title}</span>
 		<span class="text-white text-md italic">{description}</span>
 	</div>
 </div>
@@ -31,7 +31,7 @@
 <style>
 	.info {
 		@apply flex items-center justify-between;
-		@apply py-3 px-8;
+		@apply py-3 px-6;
 		@apply rounded-xl bg-red-700 shadow-md border-red-700;
 
 		@apply hover:cursor-help;
@@ -43,9 +43,10 @@
 
 	.uploaded {
 		@apply bg-yellow-600;
+		@apply !cursor-pointer;
 	}
 
 	.missing {
-		@apply bg-[#ff3030ff];
+		@apply bg-orange-700;
 	}
 </style>
diff --git a/frontend/src/lib/components/layout/FullLayout.svelte b/frontend/src/lib/components/layout/FullLayout.svelte
index 9f29e47..4b57523 100644
--- a/frontend/src/lib/components/layout/FullLayout.svelte
+++ b/frontend/src/lib/components/layout/FullLayout.svelte
@@ -2,14 +2,18 @@
 	import backgroundImage from '$lib/assets/background.jpg';
 	import logo from '$lib/assets/logo/ssps.svg';
 	import DarkModeToggle from '../DarkModeToggle.svelte';
+
+	export let hideHeader: boolean = false;
 </script>
 
 <div class="bg">
 	<div class="bgOverlay">
-		<img class="logo" src={logo} alt="SSPŠ logo" />
-		<div class="darkModeToggle">
-			<DarkModeToggle backgroundColor="dark" />
-		</div>
+		{#if !hideHeader}
+			<img class="logo" src={logo} alt="SSPŠ logo" />
+			<div class="darkModeToggle">
+				<DarkModeToggle backgroundColor="dark" />
+			</div>
+		{/if}
 	</div>
 	<div style={`background-image: url(${backgroundImage});`} class="bgImage" />
 </div>
@@ -26,7 +30,7 @@
 	.bgImage {
 		@apply -z-20;
 		@apply min-w-screen absolute min-h-screen min-w-full;
-		@apply bg-no-repeat bg-cover;
+		@apply bg-cover bg-no-repeat;
 		background-position: 55%;
 	}
 	.bgOverlay {