CSS tweaks & modal escape

gui/dashboard/app.css

@@ -3,8 +3,8 @@ html, body {
   --body-fg: #fff;
   --tile-bg: #181818;
   --grey: grey;
-  --red: red;
+  --red: #f00;
-  --green: green;
+  --green: #1d641d;
   --dark: #0a0a0a;
   --radius: 10px;
   --cols: 4;
@@ -17,10 +17,11 @@ html, body {
 }
 
 .theme-light {
-  --body-bg: #fff;
+  --body-bg: #d6d6d6;
   --body-fg: #000;
   --tile-bg: #dedede;
   --dark: #c2c2c2;
+  --green: #377137;
 }
 
 .mb {

gui/dashboard/modal.svelte

@@ -4,24 +4,21 @@
   export let title = '';
   export let open = false;
 
-  function close() {
+  function keydown(event) {
-    open = false;
-  }
-
-  function keyup(event) {
     if (event.key === 'Escape') {
-      close();
+      event.preventDefault();
+      open = false;
     }
   }
 </script>
 
-<svelte:window on:keyup={keyup} />
+<svelte:window on:keydown={keydown} />
 
 <div class="modal-bg theme-{$settings.theme}" class:open>
   <div class="modal">
     <div class="header">
       <div class="title">{title}</div>
-      <button class="close" on:click={close}>&times;</button>
+      <button class="close" on:click={() => open = false}>&times;</button>
     </div>
 
     <div class="body">
@@ -38,7 +35,6 @@
     right: 0;
     bottom: 0;
     padding-top: 3rem;
-    background-color: rgba(0, 0, 0, 0.4);
     align-items: center;
     justify-content: center;
     display: none;

gui/dashboard/tile-rawvalue.svelte

@@ -7,11 +7,10 @@
   export let value;
   export let date;
   export let since;
-  export let weight = 600;
 </script>
 
 <Tile {title} {subtitle} {color} {date} {since}>
-  <div class="value {color}" style:font-weight={weight}>
+  <div class="value {color}">
     {value}
   </div>
 </Tile>