change to toast style

wwwroot/css/site.css

@@ -35,30 +35,38 @@ textarea {
     border-width: 0;
 }
 
-    textarea.dark {
+    .dark textarea {
         background-color: #222;
         color: #ddd;
     }
 
 .toast {
     position: fixed;
-    bottom: -40px;
+    bottom: 0;
     right: 20px;
     font-size: 12px;
     padding: 10px;
-    border-radius: 10px 10px 0 0;
     color: #fff;
-    transition: bottom 0.2s;
+    transition: opacity 0.4s;
+    opacity: 0;
 }
 
     .toast.show {
-        bottom: 0;
+        opacity: 0.8;
+    }
+
+.dark #saved-indicator {
+    color: lawngreen;
 }
 
 #saved-indicator {
-    background-color: green;
+    color: green;
+}
+
+.dark #update-indicator {
+    color: orange;
 }
 
 #update-indicator {
-    background-color: orangered;
+    color: orangered;
 }

wwwroot/js/site.js

@@ -3,7 +3,7 @@
     .withUrl("/noteHub")
     .build();
 
-let start = function () {
+function start() {
 
     connection.start().then(function () {
         console.log('Started websocket listener');
@@ -13,7 +13,7 @@ let start = function () {
     });
 }
 
-let showToast = function (selector) {
+function showToast(selector) {
 
     const cssClass = 'show';
 
@@ -24,7 +24,7 @@ let showToast = function (selector) {
     });
 }
 
-let saveContent = function ($textarea) {
+function saveContent($textarea) {
     $textarea = $textarea || $('textarea');
 
     var content = $textarea.val();
@@ -42,7 +42,7 @@ start();
 
 $(function () {
 
-    let $textarea = $('textarea');
+    const $textarea = $('textarea');
 
     // update content upon sync save
     connection.on('updateNote', function (content) {
@@ -52,12 +52,12 @@ $(function () {
 
     // set dark mode
     if (window.location.hash == '#dark') {
-        $textarea.addClass('dark');
+        $('body').addClass('dark');
     }
 
-    var timer = null;
+    let timer = null;
 
-    let ignoredKeyCodes = [17, 18, 20, 27, 37, 38, 39, 40, 91];
+    const ignoredKeyCodes = [17, 18, 20, 27, 37, 38, 39, 40, 91];
 
     // save after a second delay after typing
     $textarea.keyup(function (e) {