From 44c98b72b8053abbfcce6bf9eaf404349d2c5e01 Mon Sep 17 00:00:00 2001
From: Daniel Lundin <dln@eintr.org>
Date: Sat, 20 Jul 2019 12:57:11 +0200
Subject: [PATCH] Begun styling the clients list

---
 ui/src/Client.svelte  | 30 ++++++++++++++++++++----------
 ui/src/Clients.svelte |  2 +-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/ui/src/Client.svelte b/ui/src/Client.svelte
index a23b4b4..f446b5c 100644
--- a/ui/src/Client.svelte
+++ b/ui/src/Client.svelte
@@ -7,14 +7,24 @@
   let dev = client[1];
 </script>
 
-<div>
-  <h4>{client.Name}</h4>
-  <dl>
-    <dt>IP</dt><dd>{dev.IP}</dd>
-    <dt>PrivateKey</dt><dd>{dev.PrivateKey}</dd>
-    <dt>PublicKey</dt><dd>{dev.PublicKey}</dd>
-  </dl>
-<a href="/client/{clientId}" use:link role="button" class="btn btn-primary material-icons">
-    edit
-</a>
+<style>
+.card {
+  margin: 1em 0;
+}
+</style>
+
+<div class="card">
+  <div class="card-body">
+    <h4 class="card-title">{client.Name}</h4>
+    <dl class="row">
+      <dt class="col-sm-2">IP</dt>
+      <dd class="col-sm-10">{dev.IP}</dd>
+      <dt class="col-sm-2">Public Key</dt>
+      <dd class="col-sm-10">{dev.PublicKey}</dd>
+    </dl>
+
+  <a href="/client/{clientId}/config" role="button" class="btn btn-primary">Download Config</a>
+  <a href="/client/{clientId}" use:link role="button" class="btn btn-primary material-icons float-right">edit</a>
+  </div>
+
 </div>
diff --git a/ui/src/Clients.svelte b/ui/src/Clients.svelte
index bf38154..8ddca4d 100644
--- a/ui/src/Clients.svelte
+++ b/ui/src/Clients.svelte
@@ -15,7 +15,7 @@
 
 <h2>My Clients</h2>
 
-<ul>
+<ul class="list-unstyled">
 	{#each clients as dev}
     <li><Client client={dev}/></li>
   {/each}