frontend branding

src/App.vue

@@ -11,6 +11,7 @@ export default {
 <style lang="sass">
 body
   overflow-y: hidden
+  background-color: var(--q-light-page)
 
 a
   color: #1976D2
@@ -68,25 +69,25 @@ a
   .q-table__top,
   .q-table__bottom,
   thead tr:first-child th
-    background-color: #f5f4f2
+    background-color: color-mix(in srgb, var(--q-light) 100%, black 20%) !important
 
 .table-bgcolor-dark
   .q-table__top,
   .q-table__bottom,
   thead tr:first-child th
-    background-color: #1d1d1d
+    background-color: color-mix(in srgb, var(--q-dark) 100%, black 20%)
 
 .bg-dark
-  background-color: --q-page-dark
+  background-color: var(--q-dark-page)
 
 .bg-light
-  background-color: #ffffff
+  background-color: var(--q-light-page, #ffffff)
 
 .highlight
-  background-color: #c9e6ff
+  background-color: color-mix(in srgb, var(--q-light) 100%, white 40%)
 
 .highlight-dark
-  background-color: #404040
+  background-color: color-mix(in srgb, var(--q-dark) 100%, white 40%)
 
 .action-completed
   background-color: $positive
@@ -99,4 +100,28 @@ a
 
 .min-width
   min-width: 0px !important
+
+.body--light
+  .q-card
+    background-color: var(--q-light, #fff) !important
+
+  .q-table__bottom
+    background-color: var(--q-light, #fff) !important
+
+  .q-table__container
+    background-color: var(--q-light, #fff) !important
+
+  .q-tab-panels
+    background-color: var(--q-light, #fff) !important
+
+  .q-chip
+    background-color: var(--q-light, #fff)
+
+  .q-menu
+    background-color: var(--q-light, #fff) !important
+
+.main-toolbar
+  .q-chip
+    background-color: color-mix(in srgb, var(--q-bg-toolbar) 100%, white 20%) !important
+    color: var(--q-text-toolbar) !important
 </style>

src/components/SubTableTabs.vue

@@ -1,13 +1,10 @@
 <template>
   <q-layout container view="hHh lpr lfr">
-    <q-header
-      :class="{ 'bg-dark': $q.dark.isActive, 'bg-light': !$q.dark.isActive }"
-    >
+    <div class="row">
       <q-tabs
         v-model="subtab"
         dense
         inline-label
-        class="text-grey"
         active-color="primary"
         indicator-color="primary"
         align="left"
@@ -86,8 +83,8 @@
           label="Audit"
         />
       </q-tabs>
-      <q-separator />
-    </q-header>
+    </div>
+    <q-separator />
     <q-page-container>
       <q-tab-panels v-model="subtab" :animated="false">
         <q-tab-panel

src/components/agents/AssetsTab.vue

@@ -7,7 +7,6 @@
     <q-tabs
       v-model="tab"
       dense
-      class="text-grey"
       active-color="primary"
       indicator-color="primary"
       align="justify"

src/components/agents/SummaryTab.vue

@@ -170,13 +170,7 @@
             <small>{{ summary.checks.warning }} checks warning</small>
           </q-chip>
           <q-chip v-if="summary.checks.info" square size="lg">
-            <q-avatar
-              size="lg"
-              square
-              icon="info"
-              :color="dash_info_color"
-              text-color="white"
-            />
+            <q-avatar size="lg" square icon="info" :color="dash_info_color" />
             <small>{{ summary.checks.info }} checks info</small>
           </q-chip>
           <span
@@ -201,7 +195,7 @@
         <q-list dense>
           <q-item v-for="(field, i) in customFields" :key="field + i">
             <q-item-section thumbnail>
-              <q-icon name="fas fa-user" size="xs" />
+              <q-icon name="fas fa-user" size="xs" color="primary" />
             </q-item-section>
             <q-item-section>{{ field.name }}: {{ field.value }}</q-item-section>
           </q-item>

src/components/automation/AutomationManager.vue

@@ -275,7 +275,6 @@
             v-model="subtab"
             dense
             inline-label
-            class="text-grey"
             active-color="primary"
             indicator-color="primary"
             align="left"

src/components/core/APIKeysTable.vue

@@ -5,9 +5,8 @@
       <q-space />
       <q-btn
         size="sm"
-        color="grey-5"
+        color="primary"
         icon="fas fa-plus"
-        text-color="black"
         label="Add key"
         @click="addAPIKey"
       />

src/components/modals/coresettings/CustomFields.vue

@@ -5,9 +5,8 @@
       <q-space />
       <q-btn
         size="sm"
-        color="grey-5"
+        color="primary"
         icon="fas fa-plus"
-        text-color="black"
         label="Add custom field"
         @click="addCustomField"
       />
@@ -18,7 +17,6 @@
         v-model="tab"
         dense
         inline-label
-        class="text-grey"
         active-color="primary"
         indicator-color="primary"
         align="left"