From 3cb2e8dbefde4cca8b0c36ca9c1e12ad4258015e Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Tue, 22 Nov 2022 20:06:47 +0100
Subject: [PATCH] refactor: move circles into seperate component

---
 .../src/lib/components/icon/Circles.svelte    | 14 +++++++++
 frontend/src/routes/dashboard/+page.svelte    | 29 +++++--------------
 2 files changed, 21 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/lib/components/icon/Circles.svelte

diff --git a/frontend/src/lib/components/icon/Circles.svelte b/frontend/src/lib/components/icon/Circles.svelte
new file mode 100644
index 0000000..347f30c
--- /dev/null
+++ b/frontend/src/lib/components/icon/Circles.svelte
@@ -0,0 +1,14 @@
+<div>
+	<span class="left-20 top-10 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100" />
+	<span class="left-14 -top-6 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50" />
+	<span class="w-28 h-28 bg-black bg-[#55b1bd] opacity-60" />
+</div>
+
+<style>
+	div {
+		@apply relative;
+	}
+	span {
+		@apply shadow-md absolute rounded-full p-1;
+	}
+</style>
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index 744209f..1b36155 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -3,22 +3,15 @@
 
 	import { Swiper, SwiperSlide } from 'swiper/svelte';
 	import 'swiper/css';
+	import Circles from '$lib/components/icon/Circles.svelte';
 </script>
 
 <FullLayout>
 	<div class="dashboard dashboardDesktop">
 		<div class="card name col-span-2 relative">
-			<div class="circles relative -left-16 -top-20">
-				<span
-					class="shadow-md left-20 top-10 absolute p-1 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100"
-				/>
-				<span
-					class="shadow-md left-14 -top-6 absolute p-1 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50"
-				/>
-				<span
-					class="shadow-md absolute p-1 w-28 h-28 rounded-full bg-black bg-[#55b1bd] opacity-60"
-				/>
-			</div>
+			<span class="absolute -left-8 -top-8">
+				<Circles />
+			</span>
 			<div class="mt-[50%] flex flex-col">
 				<h3>Damián</h3>
 				<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
@@ -70,17 +63,9 @@
 	</div>
 	<div class="dashboard dashboardMobile">
 		<div class="mt-10 card name relative mb-10">
-			<div class="circles relative -left-10 -top-13">
-				<span
-					class="shadow-md left-20 top-10 absolute p-1 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100"
-				/>
-				<span
-					class="shadow-md left-14 -top-6 absolute p-1 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50"
-				/>
-				<span
-					class="shadow-md absolute p-1 w-28 h-28 rounded-full bg-black bg-[#55b1bd] opacity-60"
-				/>
-			</div>
+			<span class="absolute -left-6 -top-6">
+				<Circles />
+			</span>
 			<div class="mt-24 flex flex-col">
 				<h3 class="!text-3xl">Damián</h3>
 				<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>