From 56f24fe317b16f03959f83a80cf0883b26e03bdd Mon Sep 17 00:00:00 2001
From: Kaname <56084970+kaname-png@users.noreply.github.com>
Date: Sat, 10 Sep 2022 01:13:44 +0000
Subject: [PATCH] feat(styles): make header css component

---
 apps/ui/src/routes/applications/[id]/__layout.svelte | 2 +-
 apps/ui/src/routes/databases/[id]/__layout.svelte    | 4 +---
 apps/ui/src/routes/index.svelte                      | 2 +-
 apps/ui/src/routes/services/[id]/__layout.svelte     | 6 ++----
 apps/ui/src/tailwind.css                             | 3 ++-
 5 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/ui/src/routes/applications/[id]/__layout.svelte b/apps/ui/src/routes/applications/[id]/__layout.svelte
index e89797b9e..1d14ecf2a 100644
--- a/apps/ui/src/routes/applications/[id]/__layout.svelte
+++ b/apps/ui/src/routes/applications/[id]/__layout.svelte
@@ -191,7 +191,7 @@
 </script>
 
 <nav
-	class="flex flex-row px-3 justify-center lg:justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-16"
+	class="header"
 >
 	<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
 		<div class="flex flex-col">
diff --git a/apps/ui/src/routes/databases/[id]/__layout.svelte b/apps/ui/src/routes/databases/[id]/__layout.svelte
index 2488ca970..426e0cd0c 100644
--- a/apps/ui/src/routes/databases/[id]/__layout.svelte
+++ b/apps/ui/src/routes/databases/[id]/__layout.svelte
@@ -150,9 +150,7 @@
 </script>
 
 {#if id !== 'new'}
-	<nav
-		class="flex flex-row px-3 justify-center lg:justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-16"
-	>
+	<nav class="header">
 		<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
 			<div class="flex flex-col">
 				<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
diff --git a/apps/ui/src/routes/index.svelte b/apps/ui/src/routes/index.svelte
index 78e3d13c5..0834a74a6 100644
--- a/apps/ui/src/routes/index.svelte
+++ b/apps/ui/src/routes/index.svelte
@@ -276,7 +276,7 @@
 </script>
 
 <nav
-	class="header" style="backdrop-filter: blur(20px);"
+	class="header p-5"
 >
 	<h1 class="mr-4 text-2xl font-bold">{$t('index.dashboard')}</h1>
 	{#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)}
diff --git a/apps/ui/src/routes/services/[id]/__layout.svelte b/apps/ui/src/routes/services/[id]/__layout.svelte
index 969a91a78..460412447 100644
--- a/apps/ui/src/routes/services/[id]/__layout.svelte
+++ b/apps/ui/src/routes/services/[id]/__layout.svelte
@@ -69,7 +69,7 @@
 	} from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
-import ServiceLinks from './_ServiceLinks.svelte';
+	import ServiceLinks from './_ServiceLinks.svelte';
 	const { id } = $page.params;
 
 	export let service: any;
@@ -156,9 +156,7 @@ import ServiceLinks from './_ServiceLinks.svelte';
 	});
 </script>
 
-<nav
-	class="flex flex-row px-3 justify-center lg:justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-16"
->
+<nav class="header">
 	<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
 		<div class="flex flex-col">
 			<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css
index 01ef217c3..30c75fbe7 100644
--- a/apps/ui/src/tailwind.css
+++ b/apps/ui/src/tailwind.css
@@ -202,6 +202,7 @@ input {
 }
 
 .header {
-	@apply flex flex-row px-4 justify-between items-center lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5;
+	@apply flex flex-row px-4 justify-between items-center lg:fixed w-full z-10;
 	background-color: rgba(31, 30, 30, 0.6);
+	backdrop-filter: blur(20px);
 }
\ No newline at end of file