fix(fe): colors for dark mode

web2/src/assets/scss/main.scss

@@ -58,3 +58,11 @@ $mdi-font-path: "~@mdi/font/fonts";
 }
 
 @import '~vuetify/src/styles/main';
+
+.v-application.theme--dark .v-overlay__scrim {
+  background: white !important;
+}
+
+.v-bottom-sheet > .v-sheet.theme--dark {
+  background: #212121;
+}

web2/src/components/ProjectForm.vue

@@ -35,7 +35,7 @@
       label="Max number of parallel tasks (Optional)"
       :disabled="formSaving"
       :rules="[
-        v => Math.floor(v) == v || 'Must be integer',
+        v => (v == null || v === '' || Math.floor(v) === v) || 'Must be integer',
         v => (v == null || v === '' || v >= 0) || 'Must be 0 or greater',
       ]"
       hint="Should be 0 or greater, 0 - unlimited."

web2/src/components/SurveyVars.vue

@@ -5,7 +5,7 @@
       hide-overlay
       width="300"
     >
-      <v-card>
+      <v-card :color="$vuetify.theme.dark ? '#212121' : 'white'">
         <v-card-title></v-card-title>
         <v-card-text class="pb-0">
           <v-form v-if="editedVar != null">
@@ -59,7 +59,12 @@
     <fieldset style="padding: 0 10px 5px 10px;
                      border: 1px solid rgba(0, 0, 0, 0.38);
                      border-radius: 4px;
-                     font-size: 12px;">
+                     font-size: 12px;"
+              :style="{
+                       'border-color': $vuetify.theme.dark ?
+                         'rgba(200, 200, 200, 0.38)' :
+                         'rgba(0, 0, 0, 0.38)'
+                     }">
       <legend style="padding: 0 3px;">Survey Variables</legend>
       <v-chip-group column>
         <v-chip

web2/src/components/TemplateForm.vue

@@ -61,7 +61,7 @@
 
     <v-row>
       <v-col cols="12" md="6" class="pb-0">
-        <v-card class="mb-6">
+        <v-card class="mb-6" :color="$vuetify.theme.dark ? '#212121' : 'white'">
           <v-tabs
             fixed-tabs
             v-model="itemTypeIndex"
@@ -261,10 +261,10 @@ Example:
 <script>
 /* eslint-disable import/no-extraneous-dependencies,import/extensions */
 
-import ItemFormBase from '@/components/ItemFormBase';
 import axios from 'axios';
 
 import { codemirror } from 'vue-codemirror';
+import ItemFormBase from '@/components/ItemFormBase';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/vue/vue.js';
 import 'codemirror/addon/lint/json-lint.js';

web2/src/scss/variables.scss

@@ -0,0 +1,12 @@
+$material-dark: (
+        'background': #1E1E1E,
+        'app-bar': transparent,
+        'toolbar': transparent,
+);
+
+$material-light: (
+        'app-bar': transparent,
+        'toolbar': transparent,
+);
+
+$tabs-bar-background-color: 'toolbar';

web2/vue.config.js

@@ -1,4 +1,9 @@
 module.exports = {
+  configureWebpack: {
+    devServer: {
+      historyApiFallback: true,
+    },
+  },
   chainWebpack: (config) => {
     config.plugin('html')
       .tap((args) => {