From 876c81fad8473243e704c66f2a952066fee248a0 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 29 Nov 2022 13:00:44 +0100
Subject: [PATCH] fix: ui

---
 apps/ui/src/lib/components/ContextMenu.svelte |  6 +--
 .../ui/src/lib/components/LocalePicker.svelte | 16 ++++----
 .../components/badges/DestinationBadge.svelte | 23 ++++++------
 .../lib/components/badges/PublicBadge.svelte  | 36 +++++++++---------
 .../lib/components/badges/StatusBadge.svelte  | 37 ++++++++++---------
 .../lib/components/badges/TeamsBadge.svelte   | 25 ++++++-------
 apps/ui/src/lib/components/grids/Grid3.svelte |  8 ++--
 apps/ui/src/lib/container/status.ts           | 20 +++++-----
 apps/ui/src/routes/servers/index.svelte       |  7 ++--
 9 files changed, 89 insertions(+), 89 deletions(-)

diff --git a/apps/ui/src/lib/components/ContextMenu.svelte b/apps/ui/src/lib/components/ContextMenu.svelte
index 8698e78bb..fe4a2ce51 100644
--- a/apps/ui/src/lib/components/ContextMenu.svelte
+++ b/apps/ui/src/lib/components/ContextMenu.svelte
@@ -1,4 +1,4 @@
-<nav class="header justify-between px-0 mb-5" style="border-bottom: 2px solid #666;">
-  <slot />
-  <slot name="actions"></slot>
+<nav class="header justify-between px-2 mb-5 lg:px-10">
+	<slot />
+	<slot name="actions" />
 </nav>
diff --git a/apps/ui/src/lib/components/LocalePicker.svelte b/apps/ui/src/lib/components/LocalePicker.svelte
index dfd004165..6efdd176c 100644
--- a/apps/ui/src/lib/components/LocalePicker.svelte
+++ b/apps/ui/src/lib/components/LocalePicker.svelte
@@ -1,11 +1,11 @@
 <script>
-  import { locale, locales } from '$lib/translations';
+	import { locale, locales } from '$lib/translations';
 </script>
 
-<div >
-  <select bind:value={$locale} class="w-14">
-    {#each $locales as l}
-      <option value={l}>{l}</option>
-    {/each}
-  </select>
-</div>
\ No newline at end of file
+<div>
+	<select bind:value={$locale} class="w-14">
+		{#each $locales as l}
+			<option value={l}>{l}</option>
+		{/each}
+	</select>
+</div>
diff --git a/apps/ui/src/lib/components/badges/DestinationBadge.svelte b/apps/ui/src/lib/components/badges/DestinationBadge.svelte
index e9f3fe7ed..b566ef7bd 100644
--- a/apps/ui/src/lib/components/badges/DestinationBadge.svelte
+++ b/apps/ui/src/lib/components/badges/DestinationBadge.svelte
@@ -1,15 +1,14 @@
 <script>
-	import Tooltip from "../Tooltip.svelte";
-  import {initials} from '$lib/common';
-  export let name;
-  export let thingId;
-  let id = 'destination' + thingId;
-  
+	import Tooltip from '../Tooltip.svelte';
+	import { initials } from '$lib/common';
+	export let name;
+	export let thingId;
+	let id = 'destination' + thingId;
 </script>
 
-{#if (name||'').length > 0}
-  <span class="badge rounded uppercase text-xs	" id={id}>
-    {initials(name)}
-  </span>
-  <Tooltip triggeredBy="#{id}" placement="right">{name}</Tooltip>
-{/if}
\ No newline at end of file
+{#if (name || '').length > 0}
+	<span class="badge rounded uppercase text-xs	" {id}>
+		{initials(name)}
+	</span>
+	<Tooltip triggeredBy="#{id}" placement="right">{name}</Tooltip>
+{/if}
diff --git a/apps/ui/src/lib/components/badges/PublicBadge.svelte b/apps/ui/src/lib/components/badges/PublicBadge.svelte
index 7ce01a074..6784c97e9 100644
--- a/apps/ui/src/lib/components/badges/PublicBadge.svelte
+++ b/apps/ui/src/lib/components/badges/PublicBadge.svelte
@@ -1,19 +1,19 @@
 <div title="Public">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="h-6 w-6 "
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <circle cx="12" cy="12" r="9" />
-    <line x1="3.6" y1="9" x2="20.4" y2="9" />
-    <line x1="3.6" y1="15" x2="20.4" y2="15" />
-    <path d="M11.5 3a17 17 0 0 0 0 18" />
-    <path d="M12.5 3a17 17 0 0 1 0 18" />
-  </svg>
-</div>
\ No newline at end of file
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="h-6 w-6 "
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		fill="none"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<circle cx="12" cy="12" r="9" />
+		<line x1="3.6" y1="9" x2="20.4" y2="9" />
+		<line x1="3.6" y1="15" x2="20.4" y2="15" />
+		<path d="M11.5 3a17 17 0 0 0 0 18" />
+		<path d="M12.5 3a17 17 0 0 1 0 18" />
+	</svg>
+</div>
diff --git a/apps/ui/src/lib/components/badges/StatusBadge.svelte b/apps/ui/src/lib/components/badges/StatusBadge.svelte
index 9b386a859..01badcee2 100644
--- a/apps/ui/src/lib/components/badges/StatusBadge.svelte
+++ b/apps/ui/src/lib/components/badges/StatusBadge.svelte
@@ -1,25 +1,26 @@
 <script lang="ts">
-  import {getStatus} from '$lib/container/status'
+	import { getStatus } from '$lib/container/status';
 
 	import { onDestroy, onMount } from 'svelte';
-  export let thing:any;
-  let getting = getStatus(thing)
-  let refreshing:any;
-  let status:any;
-  // AutoUpdates Status every 5 seconds
-  onMount( ()=>{
-    refreshing = setInterval( () =>{
-      getStatus(thing).then( (r) => status = r )
-    }, 5000)
-  })
-  onDestroy( () =>{
-    clearInterval(refreshing);
-  })
+	export let thing: any;
+	let getting = getStatus(thing);
+	let refreshing: any;
+	let status: any;
+	// AutoUpdates Status every 5 seconds
+	onMount(() => {
+		refreshing = setInterval(() => {
+			getStatus(thing).then((r) => (status = r));
+		}, 5000);
+	});
+	onDestroy(() => {
+		clearInterval(refreshing);
+	});
 </script>
+
 {#await getting}
-  <span class="badge badge-lg rounded uppercase">...</span>
+	<span class="badge badge-lg rounded uppercase">...</span>
 {:then status}
-  <span class="badge badge-lg rounded uppercase badge-status-{status}">
-    {status}
-  </span>
+	<span class="badge badge-lg rounded uppercase badge-status-{status}">
+		{status}
+	</span>
 {/await}
diff --git a/apps/ui/src/lib/components/badges/TeamsBadge.svelte b/apps/ui/src/lib/components/badges/TeamsBadge.svelte
index a02078f3e..eab9d80d8 100644
--- a/apps/ui/src/lib/components/badges/TeamsBadge.svelte
+++ b/apps/ui/src/lib/components/badges/TeamsBadge.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
-  import Tooltip from "../Tooltip.svelte";
-  import {initials} from '$lib/common';
-  export let teams:any;
-  export let thing:any;
-  let id = 'teams' + thing.id;
+	import Tooltip from '../Tooltip.svelte';
+	import { initials } from '$lib/common';
+	export let teams: any;
+	export let thing: any;
+	let id = 'teams' + thing.id;
 </script>
 
 <span>
-  🏢
-  {#each teams as team}
-    <a href={`/iam/teams/${team.id}`} {id} style="color: #99f8; text-decoration: none;">
-			{initials(team.name)}
-    </a>
-    <Tooltip triggeredBy="#{id}" placement="right" color="bg-sky-500/50">{team.name}</Tooltip>
-  {/each}
-</span>
\ No newline at end of file
+	{#each teams as team}
+		<a href={`/iam/teams/${team.id}`} {id} class="no-underline">
+			Team: {initials(team.name)}
+		</a>
+		<Tooltip triggeredBy="#{id}" placement="right" color="bg-destinations">{team.name}</Tooltip>
+	{/each}
+</span>
diff --git a/apps/ui/src/lib/components/grids/Grid3.svelte b/apps/ui/src/lib/components/grids/Grid3.svelte
index 70e50bc6a..905655e04 100644
--- a/apps/ui/src/lib/components/grids/Grid3.svelte
+++ b/apps/ui/src/lib/components/grids/Grid3.svelte
@@ -1,3 +1,5 @@
-<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4" >
-  <slot/>
-</div>
\ No newline at end of file
+<div
+	class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4 lg:px-10"
+>
+	<slot />
+</div>
diff --git a/apps/ui/src/lib/container/status.ts b/apps/ui/src/lib/container/status.ts
index f520554a0..466d3569f 100644
--- a/apps/ui/src/lib/container/status.ts
+++ b/apps/ui/src/lib/container/status.ts
@@ -11,7 +11,7 @@ export let containerStatus = writable({});
 let PERMITED_STATUS = ['loading', 'running', 'healthy', 'building', 'degraded', 'stopped', 'error'];
 
 // refreshStatus([{id}])
-export async function refreshStatus(list:Array<any>) {
+export async function refreshStatus(list: Array<any>) {
   for (const item of list) {
     setStatus(item.id, 'loading');
     getStatus(item, true);
@@ -32,7 +32,7 @@ export async function getStatus(resource: any, force: boolean = false) {
     } else if (typeof dualCerts !== 'undefined') { // Service
       const response = await get(`/services/${id}/status`);
       newStatus = parseServiceResponse(response);
-    } else if (typeof engine !== 'undefined'){ // Destination/Server
+    } else if (typeof engine !== 'undefined') { // Destination/Server
       const response = await get(`/destinations/${id}/status`);
       newStatus = response.isRunning ? 'running' : 'stopped';
     } else { // Database
@@ -49,25 +49,25 @@ export async function getStatus(resource: any, force: boolean = false) {
 }
 
 const setStatus = (thingId, newStatus) => {
-  if(!PERMITED_STATUS.includes(newStatus))
-    throw(`Change to ${newStatus} is not permitted. Try: ${PERMITED_STATUS.join(', ')}`);
-  containerStatus.update(n => Object.assign(n, {thingId: newStatus}));
+  if (!PERMITED_STATUS.includes(newStatus))
+    throw (`Change to ${newStatus} is not permitted. Try: ${PERMITED_STATUS.join(', ')}`);
+  containerStatus.update(n => Object.assign(n, { thingId: newStatus }));
 };
 
 // -- Response Parsing
 
-function parseApplicationsResponse(list:Array<any>){
+function parseApplicationsResponse(list: Array<any>) {
   if (list.length === 0) return 'stopped';
   if (list.length === 1) return list[0].status.isRunning ? 'running' : 'stopped';
-  return allWorking(list.map( (el:any) => el.status.isRunning ))
+  return allWorking(list.map((el: any) => el.status.isRunning))
 }
 
-function parseServiceResponse(response:any){
+function parseServiceResponse(response: any) {
   if (Object.keys(response).length === 0) return 'stopped';
   let list = Object.keys(response).map((el) => el.status.isRunning)
   return allWorking(list) ? 'running' : 'degraded'
 }
 
-function allWorking(list:Array<any>){
-  return list.reduce((acum:boolean,res:boolean) => acum && res) ? 'running' : 'degraded';
+function allWorking(list: Array<any>) {
+  return list.reduce((acum: boolean, res: boolean) => acum && res) ? 'running' : 'degraded';
 }
diff --git a/apps/ui/src/routes/servers/index.svelte b/apps/ui/src/routes/servers/index.svelte
index 261ad18ff..236c4524b 100644
--- a/apps/ui/src/routes/servers/index.svelte
+++ b/apps/ui/src/routes/servers/index.svelte
@@ -58,18 +58,17 @@
 	{/if}
 </div>
 
-<div class="flex items-center mt-10">
+<ContextMenu>
 	<h1 class="title lg:text-3xl">Destinations</h1>
-</div>
+</ContextMenu>
 
 {#if destinations.length > 0}
-	<div class="divider" />
 	<Grid3>
 		{#if destinations.length > 0}
 			{#each destinations as destination}
 				<a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
 					<div
-						class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator duration-150"
+						class="w-full rounded p-5 bg-coolgray-200 indicator duration-150"
 					>
 						<div class="w-full flex flex-row">
 							<div class="absolute top-0 left-0 -m-5 h-10 w-10">