From 33bb8d434dc00930579521a321c386d2141a66ae Mon Sep 17 00:00:00 2001
From: Kaname <56084970+kaname-png@users.noreply.github.com>
Date: Sat, 10 Sep 2022 00:16:49 +0000
Subject: [PATCH] feat(ui): improve header of pages

---
 apps/ui/src/routes/_NewResource.svelte        |  2 +-
 apps/ui/src/routes/applications/_index.svelte |  4 +--
 apps/ui/src/routes/databases/_index.svelte    | 34 +++++++++----------
 apps/ui/src/routes/destinations/_index.svelte | 34 +++++++++----------
 apps/ui/src/routes/iam/index.svelte           |  4 +--
 apps/ui/src/routes/index.svelte               |  6 ++--
 apps/ui/src/routes/services/_index.svelte     |  4 +--
 apps/ui/src/routes/sources/_index.svelte      |  5 +--
 apps/ui/src/tailwind.css                      |  5 +++
 9 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/apps/ui/src/routes/_NewResource.svelte b/apps/ui/src/routes/_NewResource.svelte
index 5729ae81c..688f68b00 100644
--- a/apps/ui/src/routes/_NewResource.svelte
+++ b/apps/ui/src/routes/_NewResource.svelte
@@ -16,7 +16,7 @@
 	}
 </script>
 
-<div class="dropdown dropdown-hover">
+<div class="dropdown dropdown-left">
 	<slot>
 		<label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs">
 			<svg
diff --git a/apps/ui/src/routes/applications/_index.svelte b/apps/ui/src/routes/applications/_index.svelte
index 51d2fd74e..4d30ed835 100644
--- a/apps/ui/src/routes/applications/_index.svelte
+++ b/apps/ui/src/routes/applications/_index.svelte
@@ -44,9 +44,7 @@
 	}
 </script>
 
-<nav
-	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
->
+<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/_index.svelte b/apps/ui/src/routes/databases/_index.svelte
index f73281c12..44d9d8b30 100644
--- a/apps/ui/src/routes/databases/_index.svelte
+++ b/apps/ui/src/routes/databases/_index.svelte
@@ -42,26 +42,24 @@
 	});
 </script>
 
-<nav
-	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
->
+<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">
-		<svg
-			class="h-6 w-6"
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-			/></svg
-		>
-	</button>
+		<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</button>
 	{/if}
 </nav>
 <br />
diff --git a/apps/ui/src/routes/destinations/_index.svelte b/apps/ui/src/routes/destinations/_index.svelte
index 25b738c55..8885787c8 100644
--- a/apps/ui/src/routes/destinations/_index.svelte
+++ b/apps/ui/src/routes/destinations/_index.svelte
@@ -36,26 +36,24 @@
 	});
 </script>
 
-<nav
-	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
->
+<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">
-		<svg
-			class="h-6 w-6"
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-			/></svg
-		>
-	</a>
+		<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</a>
 	{/if}
 </nav>
 <br />
diff --git a/apps/ui/src/routes/iam/index.svelte b/apps/ui/src/routes/iam/index.svelte
index f413e5769..3d9eb8d6a 100644
--- a/apps/ui/src/routes/iam/index.svelte
+++ b/apps/ui/src/routes/iam/index.svelte
@@ -106,9 +106,7 @@
 	}
 </script>
 
-<nav
-	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
->
+<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 02731950e..a71d2d329 100644
--- a/apps/ui/src/routes/index.svelte
+++ b/apps/ui/src/routes/index.svelte
@@ -275,7 +275,7 @@
 </script>
 
 <nav
-	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
+	class="header" style="backdrop-filter: blur(20px);"
 >
 	<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)}
@@ -319,8 +319,8 @@
 					on:input={() => doSearch()}
 				/>
 			</div>
-			<label for="search" class="label w-full">
-				<span class="label-text text-xs flex flex-wrap gap-2  items-center">
+			<label for="search" class="label w-full mt-3">
+				<span class="label-text text-xs flex flex-wrap gap-2 items-center">
 					<button
 						class:bg-coollabs={$search === '!notmine'}
 						class="badge badge-lg text-white text-xs rounded"
diff --git a/apps/ui/src/routes/services/_index.svelte b/apps/ui/src/routes/services/_index.svelte
index 5772102db..a788fde9a 100644
--- a/apps/ui/src/routes/services/_index.svelte
+++ b/apps/ui/src/routes/services/_index.svelte
@@ -43,9 +43,7 @@
 	});
 </script>
 
-<nav
-	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
->
+<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 f7dfceae7..5a5897d60 100644
--- a/apps/ui/src/routes/sources/_index.svelte
+++ b/apps/ui/src/routes/sources/_index.svelte
@@ -36,9 +36,7 @@
 	});
 </script>
 
-<nav
-	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
->
+<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">
@@ -160,4 +158,3 @@
 		</div>
 	{/if}
 </div>
-
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css
index 9c61d53f0..01ef217c3 100644
--- a/apps/ui/src/tailwind.css
+++ b/apps/ui/src/tailwind.css
@@ -199,4 +199,9 @@ a {
 
 input {
 	@apply w-48 lg:w-96;
+}
+
+.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;
+	background-color: rgba(31, 30, 30, 0.6);
 }
\ No newline at end of file