From da5cae8405f02111915ce8b4ebf4693383f318df Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 16 Jul 2024 13:10:23 +1200
Subject: [PATCH] ui improvements

---
 index.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
index d65e543..f0e0232 100644
--- a/index.html
+++ b/index.html
@@ -21,16 +21,16 @@
 </head>
 <body>
 
-<div id="app" class="space-y-2">
+<div id="app" class="space-y-2 p-3">
 
-    <div>
+    <div class="border bg-gray-50 p-3 rounded">
         <div>1. Put device into DFU Mode</div>
         <button @click="enterDfuMode" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
             Enter DFU Mode
         </button>
     </div>
 
-    <div>
+    <div class="border bg-gray-50 p-3 rounded">
 
         <div>2. Select firmware.zip to flash</div>
         <div class="mb-1">
@@ -53,28 +53,28 @@
 
     </div>
 
-    <div>
+    <div class="border bg-gray-50 p-3 rounded">
         <div>3. After flashing, Detect RNode version</div>
         <button @click="detect" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
             Detect
         </button>
     </div>
 
-    <div>
+    <div class="border bg-gray-50 p-3 rounded">
         <div>4. Provision eeprom with device info, checksum and signature.</div>
         <button @click="provision" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
             Provision
         </button>
     </div>
 
-    <div>
+    <div class="border bg-gray-50 p-3 rounded">
         <div>5. Set Firmware Hash, for now it uses what the board knows, will fix later.</div>
         <button @click="setFirmwareHash" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
             Set Firmware Hash
         </button>
     </div>
 
-    <div>
+    <div class="border bg-gray-50 p-3 rounded">
         <div>6. Configure TNC mode: frequency, bandwidth, tx power, spreading factor, coding rate</div>
         <div class="space-x-1">
             <button @click="enableTncMode" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
@@ -86,9 +86,9 @@
         </div>
     </div>
 
-    <div>
-        <div>0. Extra Tools</div>
-        <button @click="wipe" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
+    <div class="border bg-gray-50 p-3 rounded">
+        <div>Extra Tools</div>
+        <button @click="wipe" class="border border-gray-500 px-2 bg-red-100 hover:bg-red-200 rounded">
             Wipe EEPROM
         </button>
     </div>
