Clarify state background colors, leave source of truth as specific vc…

…ss vars instead of as a mix of alert variants
galaxyproject · Aug 1, 2023 · 9b4ff23 · 9b4ff23
1 parent 75cc87c
commit 9b4ff23
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/client/src/components/History/Content/model/StatesInfo.vue b/client/src/components/History/Content/model/StatesInfo.vue
@@ -45,15 +45,15 @@ function onFilter(value: string) {
         <p>Here are all available item states in Galaxy:</p>
         <p><i>(Note that the colors for each state correspond to content item state colors in the history)</i></p>
         <dl v-for="(state, key, index) in states" :key="index">
-            <b-alert :variant="state.status || 'success'" show>
+            <div :class="'alert content-item state-color-'+ key" show>
                 <dt>
                     <a class="text-decoration-none" href="javascript:void(0)" @click="onFilter(key)"
                         ><code>{{ key }}</code></a
                     >
                     <icon v-if="state.icon" :icon="state.icon" />
                 </dt>
                 <dd>{{ helpText[key] || state.text }}</dd>
-            </b-alert>
+            </div>
         </dl>
     </b-modal>
 </template>
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
@@ -204,7 +204,11 @@ $galaxy-state-border: (
     "error": $state-danger-border,
     "deleted": darken($state-default-border, 30%),
     "hidden": $state-default-border,
+    "deferred": $state-info-border,
+    "paused": $state-info-border,
+    "discarded": $state-danger-border,
     "setting_metadata": $state-warning-border,
+    "failed_metadata": $state-danger-border,
 );
 
 $galaxy-state-bg: (
@@ -217,7 +221,11 @@ $galaxy-state-bg: (
     "error": $state-danger-bg,
     "deleted": darken($state-default-bg, 30%),
     "hidden": $state-default-bg,
+    "deferred": $state-info-bg,
+    "paused": $state-info-bg,
+    "discarded": $state-danger-bg,
     "setting_metadata": $state-warning-bg,
+    "failed_metadata": $state-danger-bg,
 );
 
 @each $state in map-keys($galaxy-state-border) {