From 8b3113bd92259d13ade6ec8f52519d3c20ee9ce2 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 10 May 2022 10:34:50 +0200
Subject: [PATCH] fix: UI

---
 src/routes/_Trend.svelte |  4 ++--
 src/routes/index.svelte  | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/routes/_Trend.svelte b/src/routes/_Trend.svelte
index 140ac6d6d..723ba2a39 100644
--- a/src/routes/_Trend.svelte
+++ b/src/routes/_Trend.svelte
@@ -3,7 +3,7 @@
 </script>
 
 {#if trend === 'up'}
-	<span class="px-2 text-green-500">
+	<span class="-mt-1 inline-flex px-2 text-green-500">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			class="h-8 w-8"
@@ -20,7 +20,7 @@
 		</svg></span
 	>
 {:else if trend === 'down'}
-	<span class="text-red-500 px-2">
+	<span class="text-red-500 px-2 inline-flex -mt-1">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			class="w-8 h-8"
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 43974835c..e0deae010 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -144,21 +144,21 @@
 				<div class="overflow-hidden rounded px-4 py-5 sm:p-6">
 					<dt class="truncate text-sm font-medium text-white">Total Memory</dt>
 					<dd class="mt-1 text-3xl font-semibold text-white">
-						{(usage?.memory.totalMemMb).toFixed(0)}
+						{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
 					</dd>
 				</div>
 
 				<div class="overflow-hidden rounded px-4 py-5 sm:p-6">
 					<dt class="truncate text-sm font-medium text-white">Used Memory</dt>
 					<dd class="mt-1 text-3xl font-semibold text-white ">
-						{(usage?.memory.usedMemMb).toFixed(0)}
+						{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
 					</dd>
 				</div>
 
 				<div class="overflow-hidden rounded px-4 py-5 sm:p-6" class:bg-red-500={memoryWarning}>
 					<dt class="truncate text-sm font-medium text-white">Free Memory</dt>
-					<dd class="mt-1 flex items-center text-3xl font-semibold text-white">
-						{usage?.memory.freeMemPercentage}%
+					<dd class="mt-1 text-3xl font-semibold text-white">
+						{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
 						{#if !memoryWarning}
 							<Trend trend={trends.memory} />
 						{/if}
@@ -180,8 +180,8 @@
 				</div>
 				<div class="overflow-hidden rounded px-4 py-5 sm:p-6" class:bg-red-500={cpuWarning}>
 					<dt class="truncate text-sm font-medium text-white">CPU Usage</dt>
-					<dd class="mt-1 flex items-center text-3xl  font-semibold text-white">
-						{usage?.cpu.usage}%
+					<dd class="mt-1 text-3xl font-semibold text-white">
+						{usage?.cpu.usage}<span class="text-sm">%</span>
 						{#if !cpuWarning}
 							<Trend trend={trends.cpu} />
 						{/if}
@@ -192,19 +192,19 @@
 				<div class="overflow-hidden rounded px-4 py-5 sm:p-6">
 					<dt class="truncate text-sm font-medium text-white">Total Disk</dt>
 					<dd class="mt-1 text-3xl font-semibold text-white">
-						{usage?.disk.totalGb}GB
+						{usage?.disk.totalGb}<span class="text-sm">GB</span>
 					</dd>
 				</div>
 				<div class="overflow-hidden rounded px-4 py-5 sm:p-6">
 					<dt class="truncate text-sm font-medium text-white">Used Disk</dt>
 					<dd class="mt-1 text-3xl font-semibold text-white">
-						{usage?.disk.usedGb}GB
+						{usage?.disk.usedGb}<span class="text-sm">GB</span>
 					</dd>
 				</div>
 				<div class="overflow-hidden rounded px-4 py-5 sm:p-6" class:bg-red-500={diskWarning}>
 					<dt class="truncate text-sm font-medium text-white">Free Disk</dt>
-					<dd class="mt-1 flex items-center text-3xl font-semibold text-white">
-						{usage?.disk.freePercentage}%
+					<dd class="mt-1 text-3xl font-semibold text-white">
+						{usage?.disk.freePercentage}<span class="text-sm">%</span>
 						{#if !diskWarning}
 							<Trend trend={trends.disk} />
 						{/if}