feat: style updates to prep for light theme

src/App.vue

@@ -60,6 +60,7 @@ export default class App extends Mixins(UtilsMixin) {
 
   mounted () {
     this.$vuetify.theme.dark = this.$store.state.darkMode
+
     EventBus.$on('flashMessage', (payload: FlashMessageType) => {
       this.flashMessage.text = (payload && payload.text) || undefined
       this.flashMessage.type = (payload && payload.type) || undefined

src/components/AppBar.vue

@@ -10,6 +10,10 @@
       Fluidd
     </v-toolbar-title>
     <v-spacer />
+    <!-- <v-switch
+      v-model="darkmode"
+      label="Darkmode"
+    ></v-switch> -->
     <v-toolbar-items>
       <v-btn text to="/"><v-icon small class="mr-2">mdi-home</v-icon> Dashboard</v-btn>
       <v-btn text to="/configuration"><v-icon small class="mr-2">mdi-tune</v-icon> Configuration</v-btn>
@@ -53,6 +57,15 @@ export default class AppBar extends Mixins(UtilsMixin) {
     return this.$store.state.socket.printer.print_stats.filename
   }
 
+  get darkmode () {
+    return this.$store.state.darkMode
+  }
+
+  set darkmode (val: boolean) {
+    this.$vuetify.theme.dark = val
+    this.$store.commit('setDarkMode', val)
+  }
+
   // Watch currentfile and refresh its metadata to ensure
   // our status has the correct data.
   @Watch('currentFile')

src/components/cards/StatusCard.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-card class="mb-4">
-    <v-card-title >
-      <v-icon large left>mdi-printer-3d</v-icon>
+  <v-card color="tertiary" class="mb-4">
+    <v-card-title class="quaternary">
+      <v-icon left>mdi-printer-3d</v-icon>
       <span class="font-weight-light">
         {{ printerState }}
         <span class="font-weight-light text-subtitle-2 ml-4">{{ printerMessage }}</span>
@@ -10,6 +10,7 @@
       <v-spacer />
       <img v-if="printerPrinting && thumbnail" :src="'data:image/gif;base64,'+thumbnail.data" height="36px" />
     </v-card-title>
+    <v-divider></v-divider>
 
     <print-status-widget></print-status-widget>
   </v-card>

src/components/cards/TemperatureCard.vue

@@ -1,9 +1,10 @@
 <template>
-  <v-card class="mb-4">
-    <v-card-title >
-      <v-icon large left>mdi-fire</v-icon>
+  <v-card color="tertiary" class="mb-4">
+    <v-card-title class="quaternary">
+      <v-icon left>mdi-fire</v-icon>
       <span class="font-weight-light">Temperatures</span>
     </v-card-title>
+    <v-divider></v-divider>
 
     <temperature-targets-widget></temperature-targets-widget>
 

src/components/cards/ToolheadCard.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-card class="mb-4">
-    <v-card-title >
-      <v-icon large left>mdi-printer-3d-nozzle-outline</v-icon>
+  <v-card color="tertiary" class="mb-4">
+    <v-card-title class="quaternary">
+      <v-icon left>mdi-printer-3d-nozzle-outline</v-icon>
       <span class="font-weight-light">Toolhead</span>
       <v-spacer />
       <v-btn
@@ -39,6 +39,8 @@
           <v-icon small class="mr-1">mdi-home</v-icon> All
       </v-btn>
     </v-card-title>
+    <v-divider></v-divider>
+
     <toolhead-widget></toolhead-widget>
   </v-card>
 </template>

src/components/cards/ToolsCard.vue

@@ -1,46 +1,46 @@
 <template>
-<!--
-    d-flex flex-column align-start
-    height="460"
--->
-  <v-card class="mb-4">
-    <v-tabs-items v-model="activeTab" class="mb-auto">
-      <v-tab-item :key="0">
-        <v-card-title>
-          <v-icon large left>mdi-file-code</v-icon>
+  <v-card color="tertiary" class="mb-4">
+
+    <v-tabs-items v-model="activeTab" class="mb-auto rounded">
+      <v-tab-item :key="0" class="tertiary rounded">
+        <v-card-title class="quaternary rounded">
+          <v-icon left>mdi-file-code</v-icon>
           <span class="font-weight-light">Macros</span>
         </v-card-title>
+        <v-divider></v-divider>
         <macros-widget></macros-widget>
       </v-tab-item>
-      <v-tab-item :key="1">
-        <v-card-title >
-          <v-icon large left>mdi-tools</v-icon>
+      <v-tab-item :key="1" class="tertiary rounded">
+        <v-card-title class="quaternary rounded">
+          <v-icon left>mdi-tools</v-icon>
           <span class="font-weight-light">Sys Commands</span>
         </v-card-title>
+        <v-divider></v-divider>
         <system-commands-widget></system-commands-widget>
       </v-tab-item>
-      <v-tab-item :key="2">
+      <v-tab-item :key="2" class="tertiary rounded">
         <file-system-widget
           root="gcodes"
           accept=".gcode"
           :show-meta-data="false"
         ></file-system-widget>
       </v-tab-item>
-      <v-tab-item :key="3">
-        <v-card-title >
-          <v-icon large left>mdi-console</v-icon>
+      <v-tab-item :key="3" class="tertiary rounded">
+        <v-card-title class="quaternary rounded">
+          <v-icon left>mdi-console</v-icon>
           <span class="font-weight-light">Console</span>
         </v-card-title>
-          <console-widget></console-widget>
+        <v-divider></v-divider>
+        <console-widget></console-widget>
       </v-tab-item>
     </v-tabs-items>
 
     <v-tabs
       v-model="activeTab"
       fixed-tabs
       icons-and-text
+      background-color="tertiary"
     >
-    <!-- class="flex-grow-0" -->
       <v-tab :key="0">
         Macros
         <v-icon>mdi-file-code</v-icon>
@@ -58,6 +58,7 @@
         <v-icon>mdi-console</v-icon>
       </v-tab>
     </v-tabs>
+
   </v-card>
 </template>
 

src/components/widgets/ConsoleWidget.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-      <v-card outlined color="#262626" class="console-container mb-3 pa-1" height="300">
+      <v-card outlined color="#1c1c1c" class="console-container mb-3 pa-1" height="300">
         <span v-for="(item, index) in consoleItems" :key="index" v-html="item"></span>
       </v-card>
       <v-text-field

src/components/widgets/MacrosWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card-text class="d-flex flex-wrap align-center justify-start">
+  <v-card-text class="d-flex flex-wrap align-center justify-start pt-5">
     <v-btn
       v-for="(macro, index) in macros"
       :key="index"

src/components/widgets/PrintStatusWidget.vue

@@ -1,116 +1,114 @@
 <template>
-  <v-sheet color="#262626" class="print-status">
-    <v-container class="py-0">
-      <v-row align="center">
-        <v-col sm="auto">
-          <v-progress-circular
-              :rotate="180"
-              :size="90"
-              :width="5"
-              :value="timeEstimates.progress"
-              color="primary"
-            >
-            <span class="percentComplete grey--text text-h5 font-weight-normal">{{ timeEstimates.progress }}%</span>
-          </v-progress-circular>
-        </v-col>
-        <v-col class="d-flex flex-column" style="overflow: hidden;" align="start">
-            <div class="mb-1 grey--text" v-if="printTimeEstimationsType !== 'totals'">
-              <v-tooltip left>
-                <template v-slot:activator="{ on, attrs }">
-                  <v-icon v-bind="attrs" v-on="on" color="grey darken-2">mdi-timer-sand</v-icon>
-                </template>
-                <span>estimated time left</span>
-              </v-tooltip>
-              {{ timeEstimates.timeLeft }}
-            </div>
-            <div class="mb-1 grey--text">
-              <v-tooltip left>
-                <template v-slot:activator="{ on, attrs }">
-                  <v-icon v-bind="attrs" v-on="on" color="grey darken-2" class="mr-1">mdi-clock-outline</v-icon>
-                </template>
-                {{ (printTimeEstimationsType !== 'totals') ? 'duration &amp; total' : 'duration' }}
-              </v-tooltip>
-              <span>{{ timeEstimates.duration }}</span>
-              <span class="grey--text text--darken-2" v-if="printTimeEstimationsType !== 'totals'"> / {{ timeEstimates.totalDuration }}</span>
-            </div>
-            <div class="mb-1 grey--text" v-if="filamentEstimates !== ''">
-              <v-tooltip left>
-                <template v-slot:activator="{ on, attrs }">
-                  <v-icon v-bind="attrs" v-on="on" color="grey darken-2" class="mr-1">mdi-format-line-spacing</v-icon>
-                </template>
-                used filament
-              </v-tooltip>
-              <span class="grey--text text--darken-2">{{ filamentEstimates }}</span>
-            </div>
-            <div class="d-flex grey--text text--darken-2">
-              <v-icon color="grey darken-2">mdi-file-document-outline</v-icon>
-              <div class="filename ml-1" v-if="filename">gcodes/{{ filename }}</div>
-            </div>
-        </v-col>
-        <v-col sm="auto" class="d-flex flex-column">
-          <v-btn
-            @click="pausePrint()"
-            :loading="hasWait(waits.onPrintPause)"
-            :width="buttonWidths"
-            v-if="!printerPaused && printerPrinting"
-            color="secondary"
-            class="mb-2">
-            <v-icon small>mdi-pause</v-icon>
-            <span>Pause</span>
-          </v-btn>
-
-          <v-btn
-            @click="confirmDialog.open = true"
-            :loading="hasWait(waits.onPrintCancel)"
-            :width="buttonWidths"
-            v-if="printerPrinting || printerPaused"
-            color="secondary"
-            class="mb-2">
-            <v-icon small>mdi-window-close</v-icon>
-            <span>Cancel</span>
-          </v-btn>
-          <v-btn
-            @click="resumePrint()"
-            :loading="hasWait(waits.onPrintResume)"
-            :width="buttonWidths"
-            v-if="printerPaused"
-            color="secondary"
-            class="mb-2">
-            <v-icon small class="mr-1">mdi-play-box-outline</v-icon>
-            <span>Resume</span>
-          </v-btn>
-          <v-btn
-            :width="buttonWidths"
-            v-if="!printerPrinting && !printerPaused && filename"
-            color="secondary"
-            class="mb-2">
-            <v-icon small class="mr-1">mdi-printer</v-icon>
-            <span>Reprint</span>
-          </v-btn>
-          <v-btn
-            @click="cameraVisible = !cameraVisible"
-            :width="buttonWidths"
-            color="secondary"
-            class="mb-2">
-            <v-icon small class="mr-1">mdi-camera</v-icon>
-            <span>Camera</span>
-          </v-btn>
-        </v-col>
-      </v-row>
+  <v-container class="py-0">
+    <v-row align="center">
+      <v-col sm="auto">
+        <v-progress-circular
+            :rotate="180"
+            :size="90"
+            :width="5"
+            :value="timeEstimates.progress"
+            color="primary"
+          >
+          <span class="percentComplete grey--text text-h5 font-weight-normal">{{ timeEstimates.progress }}%</span>
+        </v-progress-circular>
+      </v-col>
+      <v-col class="d-flex flex-column" style="overflow: hidden;" align="start">
+          <div class="mb-1 grey--text" v-if="printTimeEstimationsType !== 'totals'">
+            <v-tooltip left>
+              <template v-slot:activator="{ on, attrs }">
+                <v-icon v-bind="attrs" v-on="on" color="grey darken-2">mdi-timer-sand</v-icon>
+              </template>
+              <span>estimated time left</span>
+            </v-tooltip>
+            {{ timeEstimates.timeLeft }}
+          </div>
+          <div class="mb-1 grey--text">
+            <v-tooltip left>
+              <template v-slot:activator="{ on, attrs }">
+                <v-icon v-bind="attrs" v-on="on" color="grey darken-2" class="mr-1">mdi-clock-outline</v-icon>
+              </template>
+              {{ (printTimeEstimationsType !== 'totals') ? 'duration &amp; total' : 'duration' }}
+            </v-tooltip>
+            <span>{{ timeEstimates.duration }}</span>
+            <span class="grey--text text--darken-2" v-if="printTimeEstimationsType !== 'totals'"> / {{ timeEstimates.totalDuration }}</span>
+          </div>
+          <div class="mb-1 grey--text" v-if="filamentEstimates !== ''">
+            <v-tooltip left>
+              <template v-slot:activator="{ on, attrs }">
+                <v-icon v-bind="attrs" v-on="on" color="grey darken-2" class="mr-1">mdi-format-line-spacing</v-icon>
+              </template>
+              used filament
+            </v-tooltip>
+            <span class="grey--text text--darken-2">{{ filamentEstimates }}</span>
+          </div>
+          <div class="d-flex grey--text text--darken-2">
+            <v-icon color="grey darken-2">mdi-file-document-outline</v-icon>
+            <div class="filename ml-1" v-if="filename">gcodes/{{ filename }}</div>
+          </div>
+      </v-col>
+      <v-col sm="auto" class="d-flex flex-column">
+        <v-btn
+          @click="pausePrint()"
+          :loading="hasWait(waits.onPrintPause)"
+          :width="buttonWidths"
+          v-if="!printerPaused && printerPrinting"
+          color="secondary"
+          class="mb-2">
+          <v-icon small>mdi-pause</v-icon>
+          <span>Pause</span>
+        </v-btn>
+
+        <v-btn
+          @click="confirmDialog.open = true"
+          :loading="hasWait(waits.onPrintCancel)"
+          :width="buttonWidths"
+          v-if="printerPrinting || printerPaused"
+          color="secondary"
+          class="mb-2">
+          <v-icon small>mdi-window-close</v-icon>
+          <span>Cancel</span>
+        </v-btn>
+        <v-btn
+          @click="resumePrint()"
+          :loading="hasWait(waits.onPrintResume)"
+          :width="buttonWidths"
+          v-if="printerPaused"
+          color="secondary"
+          class="mb-2">
+          <v-icon small class="mr-1">mdi-play-box-outline</v-icon>
+          <span>Resume</span>
+        </v-btn>
+        <v-btn
+          :width="buttonWidths"
+          v-if="!printerPrinting && !printerPaused && filename"
+          color="secondary"
+          class="mb-2">
+          <v-icon small class="mr-1">mdi-printer</v-icon>
+          <span>Reprint</span>
+        </v-btn>
+        <v-btn
+          @click="cameraVisible = !cameraVisible"
+          :width="buttonWidths"
+          color="secondary"
+          class="mb-2">
+          <v-icon small class="mr-1">mdi-camera</v-icon>
+          <span>Camera</span>
+        </v-btn>
+      </v-col>
+    </v-row>
     <v-expand-transition>
       <v-row v-show="cameraVisible">
         <v-col>
         <img :src="cameraUrl" class="webcam" />
         </v-col>
       </v-row>
     </v-expand-transition>
-    </v-container>
     <dialog-confirm
       v-model="confirmDialog.open"
       @confirm="cancelPrint()">
       <p>Are you sure? This will cancel your print.</p>
     </dialog-confirm>
-  </v-sheet>
+  </v-container>
 </template>
 
 <script lang="ts">