ui tweaks to make it purty

ui/src/App.svelte

@@ -18,6 +18,11 @@
 </script>
 
 <style>
+main {
+  max-width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>
 
 <div class="mdc-typography">

ui/src/Client.svelte

@@ -28,19 +28,29 @@
       display: none;
     }
   }
+
+  img {
+    margin-right: 40px;
+    border: 1px solid #ccc;
+  }
+
+  .download {
+    margin-top: 1em;
+  }
 </style>
 
-<Paper elevation="4" style="background-color: {color}; margin-bottom: 2em;" class="card">
+<Paper elevation="8" style="background-color: {color}; margin-bottom: 2em;" class="card">
 
   <div class="float-right">
     <IconButton class="float-right material-icons" on:click={onEdit}>edit</IconButton>
   </div>
 
-  <i class="material-icons" aria-hidden="true">devices</i>
 
   <img src="/api/v1/users/{user}/clients/{clientId}?format=qrcode" class="qrcode float-right" alt="Mobile client config"/>
 
-  <h3 class="card-title">{dev.Name}</h3>
+  <i class="material-icons" aria-hidden="true">devices</i>
+  <h3 class="mdc-typography--headline5">
+  {dev.Name}</h3>
 
   <dl>
     <dt>IP</dt>
@@ -49,5 +59,7 @@
     <dd>{dev.PublicKey}</dd>
   </dl>
 
-  <Button href="/api/v1/users/{user}/clients/{clientId}?format=config" variant="raised"><Label>Download Config</Label></Button>
+  <div class="download">
+    <Button  href="/api/v1/users/{user}/clients/{clientId}?format=config" variant="raised"><Label>Download Config</Label></Button>
+  </div>
 </Paper>

ui/src/Clients.svelte

@@ -29,9 +29,15 @@
 .newClient {
   float: right;
 }
+
+h2 small {
+  display: block;
+  clear: left;
+  color: #ccc;
+}
 </style>
 
-<h2>My Clients <small class="text-muted">({user})</small></h2>
+<h2 class="mdc-typography--headline2">My Clients <small class="mdc-typography--headline5">({user})</small></h2>
 
 	{#each clients as dev}
     <Client user={user} client={dev}/>

ui/src/EditClient.svelte

@@ -1,9 +1,9 @@
 <script>
+  import Fab, {Label, Icon} from '@smui/fab';
   import Dialog, {Actions, InitialFocus} from '@smui/dialog';
   import Textfield, {Input, Textarea} from '@smui/textfield';
-  import Icon from '@smui/textfield/icon/index';
   import HelperText from '@smui/textfield/helper-text/index';
-  import Button, {Group, GroupItem, Label} from '@smui/button';
+  import Button, {Group, GroupItem} from '@smui/button';
   import Paper, {Title, Subtitle, Content} from '@smui/paper';
 
   import Cookie from "cookie-universal";
@@ -45,13 +45,8 @@
   }
 
 
-  async function handleDeleteClick(event) {
-    const res = await fetch(clientUrl, {
-      method: "DELETE",
-    });
-    await res;
+  function handleBackClick(event) {
     navigate("/", { replace: true });
-    console.log("Delete!");
   }
 
   async function deleteHandler(e) {
@@ -71,9 +66,23 @@
 	onMount(getClient);
 </script>
 
+<style>
+ .float-left {
+   float: left;
+   padding: 0;
+   margin: 0;
+   margin-right: 1em;
+ }
+</style>
+
+<div class="float-left">
+<Fab color="primary" on:click={handleBackClick}><Icon class="material-icons">arrow_back</Icon></Fab>
+</div>
+
+<h3 class="mdc-typography--headline3">Client Properties <small class="text-muted">({client.Name})</small></h3>
+
 <div class="container">
 
-  <h3 class="mdc-typography--headline3">Client Properties <small class="text-muted">({client.Name})</small></h3>
 
   <form on:submit|preventDefault={handleSubmit}>