From 87b73daf64e51cccddc599ef57249393205e9d8b Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Sun, 4 Dec 2022 00:12:34 +0100
Subject: [PATCH] feat: apple card header design, hover animation

---
 .../dashboard/DashboardInfoCard.svelte        |  9 ++++-
 .../dashboard/DashboardUploadCard.svelte      | 36 +++++++++++++++----
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index f98f76b..e7b65e8 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Circles from "$lib/components/icons/Circles.svelte";
+	import Circles from '$lib/components/icons/Circles.svelte';
 
 	export let title: string;
 </script>
@@ -16,12 +16,19 @@
 
 <style>
 	.card {
+		@apply m-3;
 		@apply h-full;
 		@apply flex flex-col justify-between;
 
 		@apply bg-[#f8fbfc];
 		@apply rounded-3xl;
 		@apply px-7 py-10;
+
+		@apply transition-all duration-300;
+	}
+	.card:hover {
+		@apply shadow-2xl;
+		@apply m-0;
 	}
 	.card h3 {
 		@apply text-sspsBlue text-4xl md:text-2xl xl:text-4xl font-semibold;
diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
index 0c38d35..091471b 100644
--- a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -88,19 +88,23 @@
 </script>
 
 <div class="relative card uploadCard">
-	<div class="flex flex-col sm:flex-row justify-between sm:items-center">
+	<div class="header">
 		<h3 class="mb-4 sm:mb-0">{title}</h3>
 		<div class="mb-4 sm:mb-0 mt-1 sm:mt-0">
-			<FileType {filetype} filesize={filesize + " MB"} />
+			<FileType {filetype} filesize={filesize + ' MB'} />
 		</div>
 		<div class="absolute px-7 right-0 top-4">
 			<StatusNotificationDot {status} />
 		</div>
 	</div>
 	{#if fileDropped}
-		<div class="flex content-around justify-between items-center mb-5 sm:mx-5">
+		<div class="body flex content-around justify-between items-center">
 			<div class="w-24">
-				<img class="w-full" src={filetype == 'PDF' ? documentIcon : archiveIcon} alt="Icon" />
+				<img
+					class="w-full object-scale-down"
+					src={filetype == 'PDF' ? documentIcon : archiveIcon}
+					alt="Icon"
+				/>
 			</div>
 			<svg class="hidden xl:block h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
 				><line
@@ -138,7 +142,7 @@
 			</div>
 		</div>
 	{:else}
-		<div class="flex-1 mt-6">
+		<div class="body">
 			<FileDrop
 				multiple={false}
 				maxSize={filesize * 1_000_000}
@@ -166,12 +170,32 @@
 		@apply hidden;
 	}
 	.card {
+		@apply m-3 bg-transparent;
 		@apply h-full;
 		@apply flex flex-col justify-between;
 
-		@apply bg-[#f8fbfc];
 		@apply rounded-3xl;
+
+		@apply transition-all duration-300;
+	}
+	.card:hover {
+		@apply shadow-2xl;
+		@apply m-0;
+	}
+	.header {
+		@apply rounded-t-3xl;
 		@apply px-7 pb-7 pt-14;
+		background-color: rgb(220, 238, 253);
+		backdrop-filter: blur(15px) saturate(0.86);
+		-webkit-backdrop-filter: blur(15px) saturate(0.86);
+
+		@apply flex flex-col sm:flex-row justify-between sm:items-center;
+	}
+	.body {
+		@apply bg-[#f8fbfc];
+		@apply rounded-b-3xl;
+		@apply flex-1;
+		@apply p-7;
 	}
 	.card h3 {
 		@apply text-sspsBlue text-2xl xl:text-4xl font-semibold;