From 9e3c14841a3f53e45977d354d1f95ac653fd0b6a Mon Sep 17 00:00:00 2001
From: Kaname <56084970+kaname-png@users.noreply.github.com>
Date: Sat, 10 Sep 2022 17:23:55 +0000
Subject: [PATCH] fix: ui with headers

---
 apps/ui/src/routes/__layout.svelte                   | 4 +++-
 apps/ui/src/routes/applications/[id]/__layout.svelte | 8 ++++----
 apps/ui/src/routes/applications/_index.svelte        | 2 +-
 apps/ui/src/routes/databases/[id]/__layout.svelte    | 2 +-
 apps/ui/src/routes/databases/_index.svelte           | 2 +-
 apps/ui/src/routes/destinations/_index.svelte        | 2 +-
 apps/ui/src/routes/iam/index.svelte                  | 2 +-
 apps/ui/src/routes/index.svelte                      | 2 +-
 apps/ui/src/routes/servers/index.svelte              | 2 +-
 apps/ui/src/routes/services/[id]/__layout.svelte     | 2 +-
 apps/ui/src/routes/services/_index.svelte            | 2 +-
 apps/ui/src/routes/sources/_index.svelte             | 2 +-
 apps/ui/src/tailwind.css                             | 5 +----
 13 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index 6a3b95300..9ba0b1f8a 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -307,7 +307,9 @@
 			</div>
 		</div>
 		<main>
-			<slot />
+			<div class={$appSession.userId ? 'lg:pl-16' : null}>
+				<slot />
+			</div>
 		</main>
 	</div>
 	<div class="drawer-side">
diff --git a/apps/ui/src/routes/applications/[id]/__layout.svelte b/apps/ui/src/routes/applications/[id]/__layout.svelte
index c62c6362c..0eed8875f 100644
--- a/apps/ui/src/routes/applications/[id]/__layout.svelte
+++ b/apps/ui/src/routes/applications/[id]/__layout.svelte
@@ -190,9 +190,7 @@
 	});
 </script>
 
-<nav
-	class="header p-5 pl-0 lg:p-0 lg:pl-20"
->
+<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">
@@ -246,7 +244,9 @@
 			<Tooltip triggeredBy="#git">Open on Git</Tooltip>
 		{/if}
 	</div>
-	<div class="flex flex-row flex-wrap space-x-4 space-y-3 justify-center lg:justify-start py-2 lg:py-0">
+	<div
+		class="flex flex-row flex-wrap space-x-4 space-y-3 justify-center lg:justify-start py-2 lg:py-0"
+	>
 		{#if $location}
 			<a
 				id="open"
diff --git a/apps/ui/src/routes/applications/_index.svelte b/apps/ui/src/routes/applications/_index.svelte
index c97a3a0d1..4d30ed835 100644
--- a/apps/ui/src/routes/applications/_index.svelte
+++ b/apps/ui/src/routes/applications/_index.svelte
@@ -44,7 +44,7 @@
 	}
 </script>
 
-<nav class="header p-5 pl-0 lg:p-0 lg:pl-20">
+<nav class="header">
 	<h1 class="mr-4 text-2xl font-bold">{$t('index.applications')}</h1>
 	{#if $appSession.isAdmin}
 		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
diff --git a/apps/ui/src/routes/databases/[id]/__layout.svelte b/apps/ui/src/routes/databases/[id]/__layout.svelte
index 87d2f219e..6eb00cbd5 100644
--- a/apps/ui/src/routes/databases/[id]/__layout.svelte
+++ b/apps/ui/src/routes/databases/[id]/__layout.svelte
@@ -150,7 +150,7 @@
 </script>
 
 {#if id !== 'new'}
-	<nav class="header p-5 pl-0 lg:p-0 lg:pl-20 justify-center lg:justify-between">
+	<nav class="header justify-center lg:justify-between">
 		<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/databases/_index.svelte b/apps/ui/src/routes/databases/_index.svelte
index 6902f8bb2..44d9d8b30 100644
--- a/apps/ui/src/routes/databases/_index.svelte
+++ b/apps/ui/src/routes/databases/_index.svelte
@@ -42,7 +42,7 @@
 	});
 </script>
 
-<nav class="header p-5 pl-0 lg:p-0 lg:pl-20">
+<nav class="header">
 	<h1 class="mr-4 text-2xl font-bold">{$t('index.databases')}</h1>
 	{#if $appSession.isAdmin}
 		<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
diff --git a/apps/ui/src/routes/destinations/_index.svelte b/apps/ui/src/routes/destinations/_index.svelte
index 8f826eec9..8885787c8 100644
--- a/apps/ui/src/routes/destinations/_index.svelte
+++ b/apps/ui/src/routes/destinations/_index.svelte
@@ -36,7 +36,7 @@
 	});
 </script>
 
-<nav class="header p-5 pl-0 lg:p-0 lg:pl-20">
+<nav class="header">
 	<h1 class="mr-4 text-2xl font-bold">{$t('index.destinations')}</h1>
 	{#if $appSession.isAdmin}
 		<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
diff --git a/apps/ui/src/routes/iam/index.svelte b/apps/ui/src/routes/iam/index.svelte
index 1bd84d5a0..3d9eb8d6a 100644
--- a/apps/ui/src/routes/iam/index.svelte
+++ b/apps/ui/src/routes/iam/index.svelte
@@ -106,7 +106,7 @@
 	}
 </script>
 
-<nav class="header p-5 pl-0 lg:p-0 lg:pl-20">
+<nav class="header">
 	<h1 class="mr-4 text-2xl tracking-tight font-bold">Identity and Access Management</h1>
 	<button on:click={newTeam} class="btn btn-square btn-sm bg-iam">
 		<svg
diff --git a/apps/ui/src/routes/index.svelte b/apps/ui/src/routes/index.svelte
index 51f5f86c4..b7bfa23b6 100644
--- a/apps/ui/src/routes/index.svelte
+++ b/apps/ui/src/routes/index.svelte
@@ -275,7 +275,7 @@
 	}
 </script>
 
-<nav class="header">
+<nav class="header p-7">
 	<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)}
 		<NewResource />
diff --git a/apps/ui/src/routes/servers/index.svelte b/apps/ui/src/routes/servers/index.svelte
index 326270ca0..5ac35bf2e 100644
--- a/apps/ui/src/routes/servers/index.svelte
+++ b/apps/ui/src/routes/servers/index.svelte
@@ -29,7 +29,7 @@
 	}
 </script>
 
-<div class="header p-5 pl-0 lg:p-0 lg:pl-20">
+<div class="header">
 	<h1 class="text-2xl font-bold">Servers</h1>
 </div>
 <div class="container lg:mx-auto lg:p-0 px-8 p-5 lg:pt-20">
diff --git a/apps/ui/src/routes/services/[id]/__layout.svelte b/apps/ui/src/routes/services/[id]/__layout.svelte
index 0ababff03..b1b23867b 100644
--- a/apps/ui/src/routes/services/[id]/__layout.svelte
+++ b/apps/ui/src/routes/services/[id]/__layout.svelte
@@ -156,7 +156,7 @@
 	});
 </script>
 
-<nav class="header p-5 pl-0 lg:p-0 lg:pl-20">
+<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/services/_index.svelte b/apps/ui/src/routes/services/_index.svelte
index 96de36817..a788fde9a 100644
--- a/apps/ui/src/routes/services/_index.svelte
+++ b/apps/ui/src/routes/services/_index.svelte
@@ -43,7 +43,7 @@
 	});
 </script>
 
-<nav class="header p-5 pl-0 lg:p-0 lg:pl-20">
+<nav class="header">
 	<h1 class="mr-4 text-2xl font-bold">{$t('index.services')}</h1>
 	<button on:click={newService} class="btn btn-square btn-sm bg-services">
 		<svg
diff --git a/apps/ui/src/routes/sources/_index.svelte b/apps/ui/src/routes/sources/_index.svelte
index fdd8fba54..5a5897d60 100644
--- a/apps/ui/src/routes/sources/_index.svelte
+++ b/apps/ui/src/routes/sources/_index.svelte
@@ -36,7 +36,7 @@
 	});
 </script>
 
-<nav class="header p-5 pl-0 lg:p-0 lg:pl-20">
+<nav class="header">
 	<h1 class="mr-4 text-2xl font-bold">{$t('index.git_sources')}</h1>
 	{#if $appSession.isAdmin}
 		<a href="/sources/new" class="btn btn-square btn-sm bg-sources">
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css
index 73100ab16..3954d8568 100644
--- a/apps/ui/src/tailwind.css
+++ b/apps/ui/src/tailwind.css
@@ -202,8 +202,5 @@ input {
 }
 
 .header {
-	@apply flex flex-row px-4 justify-between items-center lg:fixed p-5 pl-20 z-10;
-	background-color: rgba(31, 30, 30, 0.6);
-	backdrop-filter: blur(20px);
-	width: 100%;
+	@apply flex flex-row px-4 justify-between items-center bg-neutral-focus z-10 w-full;
 }
\ No newline at end of file