fix: resolve button styling issues

src/frontend/src/assets/main.css

@@ -131,4 +131,8 @@ h2 {
 
 legend {
   font-size: large;
+}
+
+.body--dark .cancel-btn {
+  color: #41a4f4 !important;
 }

src/frontend/src/dialogs/DialogComponent.vue

@@ -28,8 +28,20 @@
             v-close-popup
           />
           <q-space />
-          <q-btn color="negative" class="text-white" label="Cancel" @click="$emit('emitCancel')" v-close-popup />
-          <q-btn color="primary" label="Confirm" type="submit" :disable="disableConfirm" />
+          <q-btn 
+            outline
+            color="primary cancel-btn" 
+            label="Cancel" 
+            @click="$emit('emitCancel')" 
+            v-close-popup 
+            class="q-mr-xs"
+          />
+          <q-btn 
+            color="primary"
+            label="Confirm"
+            type="submit"
+            :disable="disableConfirm"
+          />
         </q-card-actions>
       </q-form>
     </q-card>

src/frontend/src/views/CreateEntryPoint.vue

@@ -166,7 +166,6 @@
           use-input
           use-chips
           multiple
-
           map-options
           option-label="name"
           option-value="id"
@@ -198,7 +197,6 @@
           use-input
           use-chips
           multiple
-
           map-options
           option-label="name"
           option-value="id"
@@ -208,7 +206,17 @@
         >
           <template v-slot:before>
             <div class="field-label">Plugins:</div>
-          </template>  
+          </template>
+          <template v-slot:selected-item="scope">
+            <q-chip
+              :label="scope.opt.name"
+              removable
+              @remove="scope.removeAtIndex(scope.index)"
+              :tabindex="scope.tabindex"
+              color="secondary"
+              text-color="white"
+            />
+          </template>
         </q-select>
         <div class="row" v-if="route.params.id !== 'new' && entryPoint.plugins.length > 0">
           <label class="field-label q-pt-xs">Plugins:</label>
@@ -298,10 +306,11 @@
   </div>
 
   <div class="float-right q-mb-lg">
-    <q-btn  
-      color="negative" 
+    <q-btn
+      outline
+      color="primary" 
       label="Cancel"
-      class="q-mr-lg"
+      class="q-mr-lg cancel-btn"
       @click="confirmLeave = true; router.back()"
     />
     <q-btn  
@@ -551,6 +560,7 @@
       if (route.params.id === 'new') {
         await api.addItem('entrypoints', entryPoint.value)
         store.savedForms.entryPoint = null
+        router.push('/entrypoints')
         notify.success(`Successfully created '${entryPoint.value.name}'`)
       } else {
         await api.updateItem('entrypoints', route.params.id, {
@@ -561,12 +571,11 @@
           queues: entryPoint.value.queues,
         })
         await api.addPluginsToEntrypoint(route.params.id, pluginsToUpdate.value)
+        router.push('/entrypoints')
         notify.success(`Successfully updated '${entryPoint.value.name}'`)
       }
     } catch(err) {
       notify.error(err.response.data.message)
-    } finally {
-      router.push('/entrypoints')
     }
   }
 

src/frontend/src/views/CreateExperiment.vue

@@ -16,10 +16,11 @@
     </div>
     <q-btn 
       v-if="route.params.id !== 'new'"
-      color="negative" 
+      :color="history ? 'red-3' : 'negative'" 
       icon="sym_o_delete" 
       label="Delete Experiment" 
       @click="showDeleteDialog = true"
+      :disable="history"
     />
   </div>
 
@@ -97,6 +98,17 @@
         >
           <template v-slot:before>
             <div class="field-label">Entrypoints:</div>
+          </template>
+          <template v-slot:selected>
+            <q-chip
+              v-for="(entrypoint, i) in experiment.entrypoints"
+              :key="entrypoint.id"
+              color="secondary"
+              :label="entrypoint.name"
+              class="text-white"
+              removable
+              @remove="experiment.entrypoints.splice(i, 1)"
+            />
           </template>  
         </q-select>
 
@@ -123,15 +135,16 @@
   </div>
 
   <div class="float-right">
-      <q-btn  
-        color="negative" 
+      <q-btn
+        outline  
+        color="primary" 
         label="Cancel"
-        class="q-mr-lg"
+        class="q-mr-lg cancel-btn"
         @click="confirmLeave = true; router.back()"
       />
       <q-btn  
         @click="submit()" 
-        color="primary" 
+        :color="history ? 'blue-2' : 'primary'" 
         label="Submit Experiment"
         :disable="history"
       />

src/frontend/src/views/CreateJob.vue

@@ -194,10 +194,11 @@
   </div>
 
   <div :class="`float-right q-mb-lg`">
-      <q-btn  
-        color="negative" 
+      <q-btn
+        outline
+        color="primary" 
         label="Cancel"
-        class="q-mr-lg"
+        class="q-mr-lg cancel-btn"
         @click="confirmLeave = true; router.back()"
       />
       <q-btn  

src/frontend/src/views/CreatePluginFile.vue

@@ -1,5 +1,14 @@
 <template>
-  <PageTitle :title="title" />
+  <div class="row items-center justify-between">
+    <PageTitle :title="title" />
+    <q-btn 
+      v-if="route.params.fileId !== 'new'"
+      color="negative"
+      icon="sym_o_delete" 
+      label="Delete Plugin File" 
+      @click="showDeleteFileDialog = true"
+    />
+  </div>
   <div class="row q-my-lg">
     <fieldset :class="`${isMobile ? 'col-12 q-mb-lg' : 'col q-mr-md'}`">
       <legend>Basic Info</legend>
@@ -304,10 +313,11 @@
   </div>
 
   <div :class="`${isMobile ? '' : ''} float-right q-mb-lg`">
-    <q-btn  
-      color="negative" 
+    <q-btn
+      outline
+      color="primary" 
       label="Cancel"
-      class="q-mr-lg"
+      class="q-mr-lg cancel-btn"
       @click="confirmLeave = true; router.back()"
     />
     <q-btn  
@@ -332,6 +342,12 @@
       :readOnly="true"
     />
   </InfoPopupDialog>
+  <DeleteDialog 
+    v-model="showDeleteFileDialog"
+    @submit="deleteFile(); showDeleteFileDialog = false"
+    type="Plugin File"
+    :name="pluginFile.filename"
+  />
   <DeleteDialog 
     v-model="showDeleteDialog"
     @submit="pluginFile.tasks.splice(selectedTaskProps.rowIndex, 1); showDeleteDialog = false"
@@ -404,6 +420,7 @@
   const uploadedFile = ref(null)
 
   const selectedTaskProps = ref()
+  const showDeleteFileDialog = ref(false)
   const showDeleteDialog = ref(false)
   const showEditParamDialog = ref(false)
 
@@ -676,4 +693,14 @@
     store.savedForms.files[route.params.id] = null
   }
 
+  async function deleteFile() {
+    try {
+      await api.deleteFile(route.params.id, route.params.fileId)
+      notify.success(`Successfully deleted '${pluginFile.value.filename}'`)
+      router.push(`/plugins/${route.params.id}/files`)
+    } catch(err) {
+      notify.error(err.response.data.message);
+    }
+  }
+
 </script>

src/frontend/src/views/HomeView.vue

@@ -16,12 +16,5 @@
 </template>
 
 <script setup>
-  import { useQuasar } from 'quasar'
-  import { computed } from 'vue'
-  const $q = useQuasar()
-
-  const darkMode = computed(() => {
-    return $q.dark.mode
-  })
 
 </script>