WIP Vue 2 => Vue 3 - Fixing comments and header darkmode

frontend/src/components/breadcrumb.vue

@@ -1,12 +1,29 @@
 <template>
-    <q-bar class="card-breadcrumb bg-white">
+    <q-bar class="card-breadcrumb" :class="$q.dark.isActive ? 'bg-dark text-white' : 'bg-white text-dark'">
         <template v-if="path">
-            <q-btn :to="path" :label="pathName" no-caps dense flat color="secondary" icon="arrow_back" />
-            <q-separator class="q-mr-sm" vertical inset />
+            <q-btn 
+                :to="path" 
+                :label="pathName" 
+                no-caps 
+                dense 
+                flat 
+                :color="$q.dark.isActive ? 'secondary' : 'primary'" 
+                icon="arrow_back" 
+            />
+            <q-separator 
+                class="q-mr-sm" 
+                vertical 
+                inset 
+                :color="$q.dark.isActive ? 'grey-6' : 'grey-4'"
+            />
         </template>
         <span class="text-bold">{{title}}</span>
         <div v-if="this.$settings?.reviews.enabled && state !== 'EDIT'">
-            <audit-state-icon class="q-mx-sm" :approvals="approvals" :state="state"/>
+            <audit-state-icon 
+                class="q-mx-sm" 
+                :approvals="approvals" 
+                :state="state"
+            />
         </div>
         <q-space />
         <slot name="buttons"></slot>
@@ -22,29 +39,16 @@ export default {
 
     components: {
         AuditStateIcon
-    },
-
-    data: function() {
-        return {
-            
-        }
-    },
-
-    created: function() {
-    },
-
-    methods: {
-        
     }
 }
-
 </script>
 
 <style lang="stylus">
 .card-breadcrumb {
     height: 50px
     padding-right: 20px
     font-size: 14px
+    transition: background-color 0.3s, color 0.3s
 }
 
 .card-breadcrumb .q-btn {

frontend/src/pages/audits/edit/findings/edit/edit.html

@@ -44,17 +44,34 @@
     </breadcrumb>
 
     <div class="row" v-if="audit.type === 'default'" >
-      <q-tabs v-model="selectedTab" align="left" indicator-color="primary" active-bg-color="grey-3"
-        class="bg-white full-width">
+        <q-tabs 
+        v-model="selectedTab" 
+        align="left" 
+        indicator-color="primary" 
+        :class="$q.dark.isActive ? 'bg-dark text-white' : 'bg-white text-dark'"
+        :active-bg-color="$q.dark.isActive ? 'grey-8' : 'grey-3'"
+        class="full-width"
+    >
         <q-tab name="definition" default :label="t('definition')" />
         <q-tab name="details" :label="t('details')" />
         <q-tab name="proofs" :label="t('proofs')" /> 
         <template v-if="frontEndAuditState === AUDIT_VIEW_STATE.EDIT">
-          <q-separator vertical />
-          <q-toggle :label="t('completed')" v-model="finding.status" :true-value=0 :false-value=1 checked-icon="check" unchecked-icon="clear" color="green" />
+            <q-separator 
+                vertical 
+                :color="$q.dark.isActive ? 'grey-6' : 'grey-4'"
+            />
+            <q-toggle 
+                :label="t('completed')" 
+                v-model="finding.status" 
+                :true-value=0 
+                :false-value=1 
+                checked-icon="check" 
+                unchecked-icon="clear" 
+                :color="$q.dark.isActive ? 'green-4' : 'green'"
+            />
         </template>
         <q-space />
-      </q-tabs>
+    </q-tabs>
 
       <div class="row full-width q-mt-md q-pr-md">
         <q-tab-panels v-model="selectedTab" animated class="bg-transparent" :class="($parent.$parent.commentMode)?'col-md-8 col-12':'col-md-8 col-12 offset-md-2'" @before-transition="syncEditors" @transition="updateOrig" keep-alive >            
@@ -347,8 +364,7 @@
                 </q-card>
             </q-tab-panel>
         </q-tab-panels>
-        <q-card v-if="$parent.$parent.commentMode" class="col-md-3 col-12 offset-md-1 bg-grey-11 q-mb-md">
-            <q-item>
+        <q-card v-if="$parent.$parent.commentMode" :class="[$q.dark.isActive ? 'bg-dark text-white' : 'bg-white text-dark', 'col-md-3 col-12 offset-md-1 q-mb-md']">            <q-item>
                 <q-item-section>
                     <span class="text-h6">{{t('comments')}}</span>
                 </q-item-section>
@@ -381,7 +397,7 @@
                 </q-item-section>
             </q-item>
             <q-scroll-area class="comment-panel-height">
-                <q-list class="bg-grey-11">
+                <q-list :class="$q.dark.isActive ? 'bg-dark text-white' : 'bg-white text-dark'">
                     <div v-for="comment in audit.comments" :key="comment._id">
                         <q-item v-if="displayComment(comment)">
                             <q-item-section @click="focusComment(comment)">