From 7ada0b0e2a33822f3a80a89811d3542017b21436 Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Mon, 24 Jul 2023 02:05:20 +0200
Subject: [PATCH] Share header css between components

---
 frontend/src/css/header.css                   | 14 ++++++++++++++
 frontend/src/lib/components/Header.svelte     | 13 +++----------
 frontend/src/lib/components/HomeHeader.svelte | 15 +++------------
 3 files changed, 20 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/css/header.css

diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
new file mode 100644
index 0000000..7df0ec7
--- /dev/null
+++ b/frontend/src/css/header.css
@@ -0,0 +1,14 @@
+.header {
+    position: fixed;
+    padding: 15px;
+    background-color: transparent;
+    color: black;
+    margin: 0 auto;
+    padding-left: 25px;
+    padding-right: 25px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 70px;
+}
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
index 361af02..f931f89 100644
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import '../../css/header.css';
+    
     export const title: string = 'Naturalistici';
 
     const goBack = () => {
@@ -6,7 +8,7 @@
     };
 </script>
 
-<div>
+<div class='header'>
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-missing-attribute -->
@@ -19,17 +21,8 @@
 
 <style>
     div {
-        position: fixed;
-        padding: 15px;
         background-color: transparent;
         color: black;
-        margin: 0 auto;
-        padding-left: 15px;
-        padding-right: 15px;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
     }
     div a {
         cursor: pointer;
diff --git a/frontend/src/lib/components/HomeHeader.svelte b/frontend/src/lib/components/HomeHeader.svelte
index 6487f91..1d3d08c 100644
--- a/frontend/src/lib/components/HomeHeader.svelte
+++ b/frontend/src/lib/components/HomeHeader.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import '../../css/header.css';
+
 	export const title: string = 'Naturalistici';
 
 	const goBack = () => {
@@ -6,7 +8,7 @@
 	};
 </script>
 
-<div>
+<div class='header'>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-missing-attribute -->
@@ -20,18 +22,7 @@
 <style>
 	div {
 		color: white;
-		margin: 0 auto;
-		padding: 15px;
-		padding-left: 25px;
-		padding-right: 25px;
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
 		background-color: #de0e1b;
-		
-		position: fixed;
-		font-size: 22px;
 	}
 	div p {
 		margin: 0;