Use floating action button to add client

ui/package-lock.json

@@ -1094,6 +1094,22 @@
                 "@material/theme": "^3.1.0"
             }
         },
+        "@material/fab": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@material/fab/-/fab-3.2.0.tgz",
+            "integrity": "sha512-a/uPYDgIFZi2PpAV4Rqqnu9AKK2fA6ydSAVJE64Hs6isJ+UQUzGBvimOHy/DHtFmLxZJKuyakJd1Cq2jDlgXtg==",
+            "dev": true,
+            "requires": {
+                "@material/animation": "^3.1.0",
+                "@material/elevation": "^3.1.0",
+                "@material/feature-targeting": "^3.1.0",
+                "@material/ripple": "^3.2.0",
+                "@material/rtl": "^3.2.0",
+                "@material/shape": "^3.1.0",
+                "@material/theme": "^3.1.0",
+                "@material/typography": "^3.1.0"
+            }
+        },
         "@material/feature-targeting": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-3.1.0.tgz",
@@ -1235,6 +1251,18 @@
                 "svelte": "^3.0"
             }
         },
+        "@smui/fab": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/fab/-/fab-1.0.0-beta.16.tgz",
+            "integrity": "sha512-XLSSpR9ZHK0LMpWuMvI0P93G69xaGb83RpKPl+HRXkp1BD9lj8eOajr6o8oBUoEPP9qFgQtZhEPoLuemV1d3qg==",
+            "dev": true,
+            "requires": {
+                "@material/fab": "^3.1.0",
+                "@material/feature-targeting": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15",
+                "@smui/ripple": "^1.0.0-beta.16"
+            }
+        },
         "@smui/ripple": {
             "version": "1.0.0-beta.16",
             "resolved": "https://registry.npmjs.org/@smui/ripple/-/ripple-1.0.0-beta.16.tgz",

ui/package.json

@@ -20,6 +20,7 @@
         "@babel/preset-env": "^7.6.2",
         "@material/typography": "^3.1.0",
         "@smui/button": "^1.0.0-beta.16",
+        "@smui/fab": "^1.0.0-beta.16",
         "@smui/top-app-bar": "^1.0.0-beta.16",
         "babel-jest": "^24.9.0",
         "babel-loader": "^8.0.6",

ui/src/App.svelte

@@ -17,15 +17,23 @@
   export let url = "";
 </script>
 
+<style>
+</style>
+
 <div class="mdc-typography">
-<Router url="{url}">
-  <Nav user="{user}" />
-  <main role="main" class="container">
-    <div>
-      <Route path="client/:clientId" component="{EditClient}" />
-      <Route path="about" component="{About}" />
-      <Route path="/"><Clients user="{user}" /></Route>
-    </div>
-  </main>
-</Router>
+
+  <Router url="{url}">
+
+    <Nav user="{user}" />
+
+    <main role="main" class="container">
+      <div>
+        <Route path="client/:clientId" component="{EditClient}" />
+        <Route path="about" component="{About}" />
+        <Route path="/"><Clients user="{user}" /></Route>
+      </div>
+    </main>
+
+  </Router>
+
 </div>

ui/src/Clients.svelte

@@ -1,4 +1,5 @@
 <script>
+  import Fab, {Label, Icon} from '@smui/fab';
   import { onMount } from 'svelte';
 	import Client from './Client.svelte';
 
@@ -24,14 +25,18 @@
 	onMount(getClients);
 </script>
 
+<style>
+.newClient {
+  float: right;
+}
+</style>
+
 <h2>My Clients <small class="text-muted">({user})</small></h2>
 
-<ul class="list-unstyled">
 	{#each clients as dev}
-    <li><Client user={user} client={dev}/></li>
+    <Client user={user} client={dev}/>
   {/each}
-</ul>
 
-<button on:click={handleNewClick} type="button" class="btn btn-primary bmd-btn-fab float-right">
-  <i class="material-icons">add</i>
-</button>
+<div class="newClient">
+<Fab color="primary" on:click={handleNewClick}><Icon class="material-icons">add</Icon></Fab>
+</div>

ui/src/style.scss

@@ -5,4 +5,6 @@
 }
 
 body {
+  margin: 0;
+  padding: 0;
 }