Made device columns and rows prettier

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>

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;
+  }
 }