Added a nice welcome screen for first-time users

frontend/src/components/blankstate.svelte

@@ -1,12 +1,15 @@
 <script>
   export let label = 'No items';
   export let image = '/empty.svg';
+  export let pale = true;
+  export let big = false;
 </script>
 
-<div class="blankstate">
+<div class="blankstate" class:pale class:big>
   <div class="content">
-    <img src={image} alt="">
+    <img src={image} alt="" />
     <p>{label}</p>
+    <slot />
   </div>
 </div>
 
@@ -14,20 +17,38 @@
   .blankstate {
     display: flex;
   }
+
   .content {
     margin: auto;
     text-align: center;
   }
 
   img {
-    height: 100px;
+    height: 150px;
     width: auto;
-    filter: grayscale(1);
-    opacity: 0.4;
   }
 
   p {
-    margin-top: 2rem;
+    margin: 2.85rem 0;
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+  }
+
+  .blankstate :global(.btn) {
+    font-size: 1.35rem;
+    padding: 1rem;
+  }
+
+  .big p {
+    font-size: 1.9rem;
+    line-height: 1.9rem;
+  }
+
+  .pale img {
+    filter: grayscale(1);
+    opacity: 0.4;
+  }
+  .pale p {
     color: #777;
   }
 </style>

frontend/src/components/modal.svelte

@@ -85,6 +85,7 @@
     display: flex;
     flex-flow: column;
     cursor: auto;
+    overflow: hidden;
   }
   .inner > :global(*:first-child) {
     margin-top: 0;
@@ -98,6 +99,7 @@
     display: flex;
     align-items: center;
     padding: 0.75rem;
+    background-color: #eee;
   }
   header .title {
     font-size: 1.5rem;