Dark theme Toast notifications

Fixes #59

backend/static/css/style.css

@@ -24,6 +24,10 @@
 
   /* Misc */
   --copy-highlight-color: rgba(251, 255, 0, 0.6);
+
+  /* Toasts */
+  --toast-background-color: #ffffff;
+  --toast-text-color: #212529;
 }
 
 
@@ -188,6 +192,16 @@ pre {
 );
 }
 
+.toast {
+  background-color: var(--toast-background-color);
+  color: var(--toast-text-color);
+}
+
+.toast-header {
+  background-color: var(--toast-background-color);
+  color: var(--toast-text-color);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     /* Navbar */
@@ -212,5 +226,9 @@ pre {
 
     /* Input */
     --input-background-color: #343434;
+
+    /* Toasts */
+    --toast-background-color: #232323;
+    --toast-text-color: #f5f5f5;
   }
 }

backend/templates/main.html

@@ -1,5 +1,3 @@
-
-
 {% extends 'base.html' %}
 {% block title %}Warteliste{% endblock %}
 {% block content %}
@@ -25,27 +23,27 @@
 {% endblock %}
 {% block extrajs %}
 <script>
-$.getJSON("/api/entries/accept", (data) => {
+    $.getJSON("/api/entries/accept", (data) => {
-    if (data["value"]==0) {
+        if (data["value"] == 0) {
             $("#bfb").addClass("disabled")
-        $("#bfb").prop("aria-disabled",true);
+            $("#bfb").prop("aria-disabled", true);
-        $("#bfb").prop("tabindex","-1");
+            $("#bfb").prop("tabindex", "-1");
             $("#bfb").wrap("<span class='tooltip-span' tabindex='0' data-toggle='tooltip' data-placement='bottom'></span>");
             $(".tooltip-span").prop("title", "Eintragungen sind leider momentan nicht möglich.")
             $('[data-toggle="tooltip"]').tooltip()
         }
-})
+    })
 
-function TableActionsFormatter(value,row,index) {
+    function TableActionsFormatter(value, row, index) {
         console.log("Value: " + value + ", Row: " + row + ", Index: " + index)
         console.log(row)
         if (getOwnedEntries().includes(row.entry_ID)) {
-      return "<button type='button' class='btn btn-danger' data-toggle='tooltip' data-placement='top' title='Eintrag zurückziehen' onclick=\"event.stopPropagation();$(this).tooltip('dispose');requestDeletionAsUser("+row["entry_ID"]+")\"><i class='fas fa-trash'></i></button>"
+            return "<button type='button' class='btn btn-danger' data-toggle='tooltip' data-placement='top' title='Eintrag zurückziehen' onclick=\"event.stopPropagation();$(this).tooltip('dispose');requestDeletionAsUser(" + row["entry_ID"] + ")\"><i class='fas fa-trash'></i></button>"
         }
         return ""
-}
+    }
 
-function requestDeletionAsUser(id) {
+    function requestDeletionAsUser(id) {
         bootbox.confirm("Wirklich den Eintrag zurückziehen? Das könnte zu einer langen Wartezeit führen!", function (result) {
             if (result) {
                 payload = {
@@ -53,12 +51,12 @@ function requestDeletionAsUser(id) {
                     "entry_id": id
                 }
                 $.ajax({
-            url: "/api/entries/delete/"+id,
+                    url: "/api/entries/delete/" + id,
                     type: "POST",
                     data: JSON.stringify(payload),
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
-            success: function(result) {
+                    success: function (result) {
                         toast = {
                             title: "Erfolgreich zurückgezogen",
                             message: "Eintrag wurde gelöscht",
@@ -71,7 +69,7 @@ function requestDeletionAsUser(id) {
                 })
             }
         })
-}
+    }
 
 </script>
 {% endblock %}

backend/templates/main_admin.html

@@ -27,8 +27,8 @@
             <tr>
                 <th data-field="state" data-checkbox="true"></th>
                 <th scope="col" data-field="Name" data-formatter="CopyFormatter">Name</th>
-                <th scope="col" data-field="Title"data-formatter="CopyFormatter">Song</th>
+                <th scope="col" data-field="Title" data-formatter="CopyFormatter">Song</th>
-                <th scope="col" data-field="Artist"data-formatter="CopyFormatter">Künstler</th>
+                <th scope="col" data-field="Artist" data-formatter="CopyFormatter">Künstler</th>
                 <th scope="col" data-formatter="TableActions">Aktionen</th>
             </tr>
         </thead>
@@ -195,8 +195,8 @@
     }
 
     function CopyFormatter(value, row, index) {
-        let escapedString = value.replace("\"","\\\"").replace("\'", "\\\'")
+        let escapedString = value.replace("\"", "\\\"").replace("\'", "\\\'")
-        return "<span onclick='copyAndNotify(this.innerText)'>"+value+"</span>";
+        return "<span onclick='copyAndNotify(this.innerText)'>" + value + "</span>";
     }
 
     function getIdSelections() {