Add Card component and various darkmode fixes

dashboard/src/components/Card.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="card">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Card'
+};
+
+</script>
+
+<style scoped>
+
+.card {
+  position: relative;
+  background-color: var(--card-background);
+  margin-bottom: 15px;
+  padding: 10px 15px;
+  border-radius: 10px;
+}
+
+
+</style>

dashboard/src/components/SupportView.vue

@@ -3,18 +3,22 @@
     <h1 class="section-header">{{ $t('support.title') }}</h1>
 
     <h3 class="section-header">{{ $t('support.help.title') }}</h3>
-    <div v-html="description"></div>
+    <Card>
+      <div v-html="description"></div>
+    </Card>
 
     <h3 class="section-header">{{ $t('support.remoteSupport.title') }}</h3>
-    <h2 class="text-center" v-show="!ready"><i class="fa fa-circle-notch fa-spin"></i></h2>
-    <div v-show="ready">
-      <p>{{ $t('support.remoteSupport.description') }}</p>
-      <b>{{ $t('support.remoteSupport.warning') }}</b>
-      <br/>
-      <br/>
-      <b class="pull-left text-danger text-bold" v-show="toggleSshSupportError">{{ toggleSshSupportError }}</b>
-      <Button :danger="sshSupportEnabled ? true : null" @click="toggleSshSupport()">{{ sshSupportEnabled ? $t('support.remoteSupport.disableAction') : $t('support.remoteSupport.enableAction') }}</Button>
-    </div>
+    <Card>
+      <h2 class="text-center" v-show="!ready"><i class="fa fa-circle-notch fa-spin"></i></h2>
+      <div v-show="ready">
+        <p>{{ $t('support.remoteSupport.description') }}</p>
+        <b>{{ $t('support.remoteSupport.warning') }}</b>
+        <br/>
+        <br/>
+        <b class="pull-left text-danger text-bold" v-show="toggleSshSupportError">{{ toggleSshSupportError }}</b>
+        <Button :danger="sshSupportEnabled ? true : null" @click="toggleSshSupport()">{{ sshSupportEnabled ? $t('support.remoteSupport.disableAction') : $t('support.remoteSupport.enableAction') }}</Button>
+      </div>
+    </Card>
   </div>
 </template>
 
@@ -23,13 +27,16 @@
 import { fetcher, Button } from 'pankow';
 import { marked } from 'marked';
 
+import Card from  './Card.vue';
+
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
 const accessToken = localStorage.token;
 
 export default {
   name: 'SupportView',
   components: {
-    Button
+    Button,
+    Card
   },
   data() {
     return {

dashboard/src/theme.scss

@@ -58,6 +58,17 @@ $state-danger-border:                       $brand-danger;
 html {
     // --accent-color: $brand-primary;
     --accent-color: #9141ac;
+    --card-background: #f0f2f5;
+    --navbar-background: #f8f8f8;
+    --body-background: white;
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        --card-background: #181e2a;
+        --navbar-background: #11161f;
+        --body-background: #0b0e14;
+    }
 }
 
 // ----------------------------
@@ -196,7 +207,7 @@ html, body {
     height: 100%;
     width: 100%;
     padding: 0;
-    background-color: white;
+    background-color: var(--body-background);
 }
 
 .view-header-filter-bar {
@@ -341,7 +352,7 @@ html, body {
     display: block;
     width: 100%;
     flex-grow: 0;
-    background-color: #f8f8f8;
+    background-color: var(--navbar-background);
     border-color: white;
 
     @media(min-width:768px) {
@@ -1273,7 +1284,7 @@ multiselect {
 
 .card {
     position: relative;
-    background-color: #f8f8f8;
+    background-color: var(--card-background);
     // background-color: #ebebeb;
     // max-width: 720px;
     // margin: 0 auto;
@@ -2394,7 +2405,7 @@ tag-input {
 
     body, .modal-content, .setup {
         color: $textColor;
-        background-color: $backgroundLight;
+        // background-color: $backgroundLight;
     }
 
     .view-header-filter-bar {
@@ -2410,8 +2421,8 @@ tag-input {
     }
 
     .navbar-default {
-        background-color: $backgroundDark;
-        border-color: $backgroundDark;
+        // background-color: $backgroundDark;
+        border-color: var(--navbar-background);
     }
 
     .navbar-collapse.collapse.in {