From 95b1490f8493168a07e3db167ee8c9ac81730429 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Fri, 12 Mar 2021 18:23:53 +0100
Subject: [PATCH] Added fancier active states

ref #93
---
 .../scanstations/ScanStationsOverview.svelte       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/scanstations/ScanStationsOverview.svelte b/src/components/scanstations/ScanStationsOverview.svelte
index 95343442..72a64162 100644
--- a/src/components/scanstations/ScanStationsOverview.svelte
+++ b/src/components/scanstations/ScanStationsOverview.svelte
@@ -60,7 +60,7 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('enabled')}
+                {$_('status')}
               </th>
               <th scope="col" class="relative px-6 py-3">
                 <span class="sr-only">{$_('action')}</span>
@@ -97,12 +97,14 @@
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {s.enabled.toString()}
-                        </div>
+                      {#if s.enabled}
+                      <span
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('active')}</span>
+                    {:else}
+                      <span
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('inactive')}</span>
+                    {/if}
                       </div>
-                    </div>
                   </td>
                   {#if active_deletes[s.id] === true}
                     <td