From c115dbc8650e3e7ff7a10009d8fd13491308ce55 Mon Sep 17 00:00:00 2001
From: Patrick Hatsune <hatsunepatrick@gmail.com>
Date: Mon, 30 Sep 2024 10:28:17 -0700
Subject: [PATCH] Made device columns and rows prettier

---
 src/components/dashboard/DeviceList.vue |  8 +++++++-
 src/styles/basicDashboard.css           | 13 +++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/dashboard/DeviceList.vue b/src/components/dashboard/DeviceList.vue
index 91fc08a..1375e2b 100755
--- a/src/components/dashboard/DeviceList.vue
+++ b/src/components/dashboard/DeviceList.vue
@@ -26,6 +26,12 @@
         <component :is="section.icon"/>
         <h3>{{ section.title }}</h3>
       </header>
+      <div id="deviceKey">
+        <p>Device Name</p>
+        <p>IP Address</p>
+        <p>MAC Address</p>
+      </div>
+      <div class="seperator"></div>
       <form v-if="section.devices" v-for="device in section.devices">
         <div id="device">
           <p>{{ device.name }}</p>
@@ -33,7 +39,7 @@
           <p>{{ device.mac }}</p>
         </div>
       </form>
-      <p v-else>No devices connected!</p>
+      <p id="noDevicesFound" v-else>No devices found!</p>
     </section>
   </div>
 </template>
diff --git a/src/styles/basicDashboard.css b/src/styles/basicDashboard.css
index 3c7ba6e..bfa30bc 100644
--- a/src/styles/basicDashboard.css
+++ b/src/styles/basicDashboard.css
@@ -219,4 +219,17 @@
     flex-direction: column;
     gap: 10px;
   }
+  #deviceKey, #device {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 5px;
+    p {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  #noDevicesFound {
+    text-align: center;
+  }
 }
\ No newline at end of file