From e0585d8bcf71b12f0d9c88777cbc6956b50ff5df Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Wed, 1 Jan 2025 17:19:05 +1300
Subject: [PATCH] ui adjustments

---
 .../interfaces/ImportInterfacesModal.vue      | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/frontend/components/interfaces/ImportInterfacesModal.vue b/src/frontend/components/interfaces/ImportInterfacesModal.vue
index 6e9cf4a..90edc2f 100644
--- a/src/frontend/components/interfaces/ImportInterfacesModal.vue
+++ b/src/frontend/components/interfaces/ImportInterfacesModal.vue
@@ -8,32 +8,34 @@
             </div>
 
             <!-- content -->
-            <div class="divide-y">
+            <div class="divide-y dark:divide-zinc-700">
 
                 <!-- file input -->
-                <div class="p-4">
-                    <label class="block text-sm font-medium text-gray-700 dark:text-zinc-200">Select Configuration File</label>
-                    <input ref="import-interfaces-file-input" type="file" @change="onFileSelected" accept="*"
-                           class="mt-1 block w-full text-sm text-gray-500 dark:text-zinc-400
+                <div class="p-2">
+                    <div class="text-sm font-medium text-gray-700 dark:text-zinc-200">Select a Configuration File</div>
+                    <div>
+                        <input ref="import-interfaces-file-input" type="file" @change="onFileSelected" accept="*"
+                               class="mt-1 block w-full text-sm text-gray-500 dark:text-zinc-400
                         file:mr-4 file:py-2 file:px-4
                         file:rounded-md file:border-0
                         file:text-sm file:font-semibold
                         file:bg-gray-500 file:text-white
                         hover:file:bg-gray-400
                         dark:file:bg-zinc-700 dark:hover:file:bg-zinc-600">
+                    </div>
                 </div>
 
                 <!-- select interfaces -->
-                <div v-if="importableInterfaces.length > 0" class="p-4">
-                    <div class="flex justify-between mb-2">
-                        <label class="block text-sm font-medium text-gray-700 dark:text-zinc-200">Select Interfaces to Import</label>
-                        <div class="space-x-2">
-                            <button @click="selectAllInterfaces" class="text-sm text-blue-500">Select All</button>
-                            <button @click="deselectAllInterfaces" class="text-sm text-blue-500">Deselect All</button>
+                <div v-if="importableInterfaces.length > 0" class="divide-y dark:divide-zinc-700">
+                    <div class="flex p-2">
+                        <div class="my-auto mr-auto text-sm font-medium text-gray-700 dark:text-zinc-200">Select Interfaces to Import</div>
+                        <div class="my-auto space-x-2">
+                            <button @click="selectAllInterfaces" class="text-sm text-blue-500 hover:underline">Select All</button>
+                            <button @click="deselectAllInterfaces" class="text-sm text-blue-500 hover:underline">Deselect All</button>
                         </div>
                     </div>
-                    <div class="space-y-2 max-h-60 overflow-y-auto">
-                        <div @click="toggleSelectedInterface(iface.name)" v-for="iface in importableInterfaces" :key="iface.name" class="cursor-pointer flex items-center p-2 border rounded dark:border-zinc-700">
+                    <div class="p-2 space-y-2 max-h-72 overflow-y-auto">
+                        <div @click="toggleSelectedInterface(iface.name)" v-for="iface in importableInterfaces" :key="iface.name" class="cursor-pointer flex items-center p-2 border rounded dark:border-zinc-700 shadow">
                             <div class="mr-auto text-sm text-gray-700 dark:text-zinc-200">
                                 <div class="font-semibold">{{ iface.name }}</div>
                                 <div class="text-sm text-gray-500">{{ iface.type }}</div>