From 9c8b939fc03d6b98e57a74bcc693ae64112bd90e Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Thu, 23 Feb 2023 10:29:45 +0100
Subject: [PATCH] CSS tweaks & modal escape

---
 gui/dashboard/app.css              |  7 ++++---
 gui/dashboard/modal.svelte         | 14 +++++---------
 gui/dashboard/tile-rawvalue.svelte |  3 +--
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/gui/dashboard/app.css b/gui/dashboard/app.css
index 3163516..f62e8c8 100644
--- a/gui/dashboard/app.css
+++ b/gui/dashboard/app.css
@@ -3,8 +3,8 @@ html, body {
   --body-fg: #fff;
   --tile-bg: #181818;
   --grey: grey;
-  --red: red;
-  --green: green;
+  --red: #f00;
+  --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 {
diff --git a/gui/dashboard/modal.svelte b/gui/dashboard/modal.svelte
index c2c5fe2..25ab89c 100644
--- a/gui/dashboard/modal.svelte
+++ b/gui/dashboard/modal.svelte
@@ -4,24 +4,21 @@
   export let title = '';
   export let open = false;
 
-  function close() {
-    open = false;
-  }
-
-  function keyup(event) {
+  function keydown(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;
diff --git a/gui/dashboard/tile-rawvalue.svelte b/gui/dashboard/tile-rawvalue.svelte
index 1894b3f..9a435f7 100644
--- a/gui/dashboard/tile-rawvalue.svelte
+++ b/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>