feat: continue improving dark mode styling

Author: colton-lapp

src/frontend/src/components/AssignPluginsDropdown.vue

@@ -27,7 +27,7 @@
           class="q-mt-sm"
         >
           <div
-            class="row items-center no-wrap bg-white q-pa-none shadow-1"
+            class="row items-center no-wrap q-pa-none shadow-1"
             style="
               border-radius: 4px;
               border: 1px solid #eeeeee;
@@ -37,13 +37,13 @@
           >
             <q-chip
               removable
-              :color="pluginStyle.color"
+              :color="$q.dark.isActive ? pluginStyle.darkColor : pluginStyle.color"
               :icon="pluginStyle.icon"
-              text-color="white"
               size="sm"
               outline
               square
               class="text-weight-bold q-py-sm q-ma-none no-border"
+              :class="$q.dark.isActive ? 'bg-grey-10' : 'bg-grey-1'"
               @remove="
                 selectedPlugins.splice(i, 1);
                 removePlugin(plugin);
@@ -107,7 +107,9 @@ const pluginIDsToUpdate = defineModel("pluginIDsToUpdate");
 const pluginIDsToRemove = defineModel("pluginIDsToRemove");
 const originalSelectedPluginIds = ref([]);
 const pluginOptions = ref([]);
+import { useQuasar } from "quasar";
 
+const $q = useQuasar();
 watch(
   selectedPlugins,
   (newVal) => {

src/frontend/src/components/KeyValueTable.vue

@@ -9,7 +9,7 @@
         <td
           class="text-weight-bold"
           :class="
-            $q.dark.isActive ? 'bg-grey-9 text-grey-4' : 'bg-grey-2 text-grey-9'
+            $q.dark.isActive ? 'bg-blue-grey-10 text-grey-4' : 'bg-grey-2 text-grey-9'
           "
           :style="{ minWidth: firstColumnMinWidth, width: firstColumnMinWidth }"
         >

src/frontend/src/components/ResourcePicker.vue

@@ -19,7 +19,7 @@
         :tabindex="scope.tabindex"
         :square="chipSquare"
         :style="getChipStyles"
-        :text-color="chipOutline ? 'black' : 'white'"
+        :class="getChipClasses"
       >
         <q-icon
           :name="styles.icon"
@@ -28,9 +28,9 @@
           class="q-mr-sm"
         />
 
-        <span class="q-mr-sm" style="letter-spacing: 0.8px">{{
-          scope.opt[optionLabel]
-        }}</span>
+        <span class="q-mr-xs ellipsis" style="letter-spacing: 0.5px">
+          {{ scope.opt[optionLabel] }}
+        </span>
       </q-chip>
     </template>
 
@@ -42,7 +42,7 @@
         <q-item-section>
           <q-item-label>{{ scope.opt[optionLabel] }}</q-item-label>
           <q-item-label caption v-if="scope.opt.description">
-            {{ truncate(scope.opt.description) }}
+            {{ truncate(scope.opt.description) }} 
           </q-item-label>
         </q-item-section>
       </q-item>
@@ -64,7 +64,6 @@ const props = defineProps({
   type: { type: String, required: true },
   label: String,
   optionLabel: { type: String, default: "name" },
-
   chipOutline: { type: Boolean, default: false },
   chipSquare: { type: Boolean, default: false },
   color: { type: String, default: null },
@@ -81,23 +80,49 @@ const computedColor = computed(() => {
   return getConceptColorHex(props.type, isDark);
 });
 
-// Dynamic Styles for the Chip container
+const computedColorOpposite = computed(() => {
+  if (props.color) return props.color;
+  const isLight =  $q.dark.isActive;
+  return getConceptColorHex(props.type, isLight);
+});
+
+// Manage purely dynamic styles (borders, custom background colors)
 const getChipStyles = computed(() => {
   if (props.chipOutline) {
     return {
-      border: `2px solid ${computedColor.value}`,
-      backgroundColor: "transparent",
-    };
-  } else {
-    return {
-      backgroundColor: computedColor.value,
-      border: "none",
+      border: `1px solid ${computedColor.value}`
     };
+  } else { 
+    if ($q.dark.isActive){
+      return {
+        backgroundColor: computedColor.value,
+        color: 'black', 
+        border: "none"
+      };
+    }
+    else {
+      return {
+        backgroundColor: computedColorOpposite.value,
+        color: 'white', 
+        border: "none"
+      };
+    }
+  }
+});
+
+// Manage Quasar utility classes (theme-aware backgrounds and text)
+const getChipClasses = computed(() => {
+  if (props.chipOutline) {
+    // Provides a subtle background and guarantees high-contrast text + remove icon
+    return $q.dark.isActive 
+      ? 'bg-grey-10 text-grey-3' 
+      : 'bg-grey-2 text-grey-9';
   }
+  return ''; // Solid mode classes aren't needed; it relies on getChipStyles
 });
 
 function truncate(str) {
   if (!str) return "";
   return str.length > 50 ? str.slice(0, 50) + "..." : str;
 }
-</script>
+</script>

src/frontend/src/components/table/TableComponent.vue

@@ -218,8 +218,8 @@
       <div class="row items-center q-gutter-x-md">
         <div
           v-if="props.title"
-          class="text-h6 q-mb-lg q-mt-md q-mx-lg text-grey-8"
-          :class="$q.dark.isActive ? 'text-grey-4' : 'text-grey-8'"
+          class="text-h6 q-mb-lg q-mt-md q-mx-lg"
+          :class="$q.dark.isActive ? 'text-grey-6' : 'text-grey-7'"
         >
           {{ props.title }}
         </div>

src/frontend/src/components/table/cells/TagList.vue

@@ -8,8 +8,7 @@
       <q-chip
         v-for="(tag, i) in visibleTags"
         :key="i"
-        :color="$q.dark.isActive ? 'grey-8' : 'blue-grey-7'"
-        :text-color="$q.dark.isActive ? 'grey-3' : 'blue-grey-10'"
+        :color="$q.dark.isActive ? 'grey-5' : 'blue-grey-7'"
         dense
         outline
         square
@@ -35,12 +34,12 @@
 
       <q-chip
         v-if="hiddenCount > 0"
-        :color="$q.dark.isActive ? 'grey-9' : 'blue-grey-1'"
-        :text-color="$q.dark.isActive ? 'grey-3' : 'blue-grey-10'"
+        :color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+        :text-color="$q.dark.isActive ? 'grey-3' : 'blue-grey-9'"
         dense
         clickable
         square
-        class="q-my-none text-weight-bold"
+        class="q-my-none text-weight-bold q-px-sm"
         style="font-size: 10px; height: 20px"
       >
         +{{ hiddenCount }} more...
@@ -52,7 +51,8 @@
         >
           <div class="column q-pa-sm" style="min-width: 200px">
             <div
-              class="text-caption text-weight-bold text-blue-grey-8 q-mb-xs q-px-xs"
+              class="text-caption text-weight-bold q-mb-xs q-px-xs"
+              :class="$q.dark.isActive ? 'text-grey-4' : 'text-blue-grey-7'"
             >
               ADDITIONAL TAGS
             </div>
@@ -61,8 +61,7 @@
               <q-chip
                 v-for="(tag, i) in hiddenTags"
                 :key="i"
-                color="blue-grey-7"
-                text-color="blue-grey-10"
+                :class="$q.dark.isActive ? 'text-grey-5' : 'text-blue-grey-7'"
                 dense
                 outline
                 square
@@ -88,10 +87,10 @@
       </q-chip>
     </div>
 
-    <div class="q-pl-sm">
+    <div class="q-pl-sm column">
       <q-btn
         round
-        size="xs"
+        size="sm"
         icon="add"
         color="grey-4"
         text-color="blue-grey-9"
@@ -107,6 +106,7 @@
 <script setup>
 import { computed } from "vue";
 import { useQuasar } from "quasar";
+import { LineCounter } from "yaml";
 
 const $q = useQuasar();
 

src/frontend/src/constants/tableStyles.js

@@ -47,7 +47,7 @@ export const CONCEPT_STYLES = {
   artifact: { 
     icon: 'sim_card_download', 
     color: 'brown-6', 
-    darkColor: 'brown-4', 
+    darkColor: 'brown-3', 
     basePath: 'artifacts' 
   },
   task: {

src/frontend/src/dialogs/ArtifactParamDialog.vue

@@ -2,7 +2,7 @@
   <q-dialog v-model="showDialog" :persistent="true">
     <q-card>
       <q-card-section class="bg-primary text-white text-h6">
-        <div class="text-h6">Create Artifact Parameter</div>
+        <div class="text-h6">{{ editParam ? 'Edit' : 'Create' }} Artifact Parameter</div>
       </q-card-section>
       <q-card-section>
         <q-form ref="artifactParamForm" greedy @submit.prevent="addArtifactParam" id="artifactForm">
@@ -102,6 +102,13 @@ const showDialog = defineModel()
 
 const emit = defineEmits(['submit'])
 
+const props = defineProps({
+  editParam: {
+    type: Object,
+    default: null
+  }
+})
+
 const outputParams = ref([])
 const outputParam = ref({
   name: '',
@@ -120,20 +127,22 @@ function requiredRule(val) {
 }
 
 watch(showDialog, (newVal) => {
-  getPluginParameterTypes()
-  if(!newVal) {
-    artifactParam.value = {
-      name: '',
-      outputParams: []
-    }
-    outputParam.value = {
-      name: '',
-      parameterType: ''
+  if (newVal) {
+    getPluginParameterTypes()
+    
+    if (props.editParam) {
+      artifactParam.value.name = props.editParam.name
+      // Deep copy to prevent modifying the parent state directly before confirming
+      outputParams.value = JSON.parse(JSON.stringify(props.editParam.outputParams))
+    } else {
+      artifactParam.value = { name: '', outputParams: [] }
+      outputParams.value = []
     }
+    outputParam.value = { name: '', parameterType: '' }
+  } else {
     resetForm()
   }
 })
-
 async function getPluginParameterTypes() {
   try {
     const res = await api.getData('pluginParameterTypes', { rowsPerPage: 0 })
@@ -173,8 +182,8 @@ function addArtifactParam() {
 }
 
 function resetForm() {
-  artifactParam.value ={}
-  artifactParamForm.value.reset()
+  artifactParam.value = {}
+  artifactParamForm.value?.reset()
   outputParam.value = {}
   outputParams.value = []
   outputParamForm.value?.reset()