fix: ui

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;">
+<nav class="header justify-between px-2 mb-5 lg:px-10">
 	<slot />
-  <slot name="actions"></slot>
+	<slot name="actions" />
 </nav>

apps/ui/src/lib/components/LocalePicker.svelte

@@ -2,7 +2,7 @@
 	import { locale, locales } from '$lib/translations';
 </script>
 
-<div >
+<div>
 	<select bind:value={$locale} class="w-14">
 		{#each $locales as l}
 			<option value={l}>{l}</option>

apps/ui/src/lib/components/badges/DestinationBadge.svelte

@@ -1,14 +1,13 @@
 <script>
-	import Tooltip from "../Tooltip.svelte";
-  import {initials} from '$lib/common';
+	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}>
+{#if (name || '').length > 0}
+	<span class="badge rounded uppercase text-xs	" {id}>
 		{initials(name)}
 	</span>
 	<Tooltip triggeredBy="#{id}" placement="right">{name}</Tooltip>

apps/ui/src/lib/components/badges/StatusBadge.svelte

@@ -1,21 +1,22 @@
 <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;
+	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( () =>{
+	onMount(() => {
+		refreshing = setInterval(() => {
+			getStatus(thing).then((r) => (status = r));
+		}, 5000);
+	});
+	onDestroy(() => {
 		clearInterval(refreshing);
-  })
+	});
 </script>
+
 {#await getting}
 	<span class="badge badge-lg rounded uppercase">...</span>
 {:then status}

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;
+	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 href={`/iam/teams/${team.id}`} {id} class="no-underline">
+			Team: {initials(team.name)}
 		</a>
-    <Tooltip triggeredBy="#{id}" placement="right" color="bg-sky-500/50">{team.name}</Tooltip>
+		<Tooltip triggeredBy="#{id}" placement="right" color="bg-destinations">{team.name}</Tooltip>
 	{/each}
 </span>

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
+	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>

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';
 }

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">