From 24ba9c29b02c5512c8c908be866a199f955855e1 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 3 Dec 2024 13:06:14 -0600
Subject: [PATCH] match `WorkflowNavigationTitle` styling with `ToolCard`
 header

---
 client/src/components/Tool/ToolCard.vue       | 15 +----
 .../Workflow/Run/WorkflowRunFormSimple.vue    |  3 +-
 .../Workflow/WorkflowNavigationTitle.vue      | 66 +++++++++----------
 client/src/style/scss/ui.scss                 | 11 ++++
 4 files changed, 45 insertions(+), 50 deletions(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index f09527328008..f76955803d2b 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -118,7 +118,7 @@ const showHelpForum = computed(() => isConfigLoaded.value && config.value.enable
 
 <template>
     <div class="position-relative">
-        <div class="underlay sticky-top" />
+        <div class="ui-form-header-underlay sticky-top" />
         <div class="tool-header sticky-top bg-secondary px-2 py-1 rounded">
             <div class="d-flex justify-content-between">
                 <div class="py-1 d-flex flex-wrap flex-gapx-1">
@@ -209,19 +209,6 @@ const showHelpForum = computed(() => isConfigLoaded.value && config.value.enable
 </template>
 
 <style lang="scss" scoped>
-@import "scss/theme/blue.scss";
-
-.underlay::after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: -$margin-h;
-    left: -0.5rem;
-    right: -0.5rem;
-    height: 50px;
-    background: linear-gradient($white 75%, change-color($white, $alpha: 0));
-}
-
 .fa-wrench {
     cursor: unset;
 }
diff --git a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
index ab4f42fa16b7..eb87089b20ea 100644
--- a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
-        <div v-if="isConfigLoaded">
+        <div class="ui-form-header-underlay sticky-top" />
+        <div v-if="isConfigLoaded" class="sticky-top">
             <BAlert v-if="!canRunOnHistory" variant="warning" show>
                 <span v-localize>
                     The workflow cannot run because the current history is immutable. Please select a different history
diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
index 34b5f7d66fa9..5f467c90fe53 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.vue
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -95,16 +95,14 @@ const workflowImportTitle = computed(() => {
 
         <BAlert v-if="error" variant="danger" show>{{ error }}</BAlert>
 
-        <div class="position-relative">
-            <div v-if="workflow" class="ui-portlet-section">
-                <div class="d-flex portlet-header align-items-center">
+        <div class="position-relative mb-2">
+            <div v-if="workflow" class="bg-secondary px-2 py-1 rounded">
+                <div class="d-flex align-items-center flex-gapx-1">
                     <div class="flex-grow-1" data-description="workflow heading">
-                        <div class="px-1">
-                            <FontAwesomeIcon :icon="faSitemap" />
-                            <b class="mx-1">
-                                {{ props.invocation ? "Invoked " : "" }}Workflow: {{ getWorkflowName() }}
-                            </b>
-                            <i>(version: {{ workflow.version + 1 }})</i>
+                        <div>
+                            <FontAwesomeIcon :icon="faSitemap" fixed-width />
+                            <b> {{ props.invocation ? "Invoked " : "" }}Workflow: {{ getWorkflowName() }} </b>
+                            <span>(Version: {{ workflow.version + 1 }})</span>
                         </div>
                     </div>
                     <BButtonGroup>
@@ -119,8 +117,7 @@ const workflowImportTitle = computed(() => {
                             "
                             variant="link"
                             :disabled="workflow.deleted"
-                            :to="`/workflows/edit?id=${workflow.id}&version=${workflow.version}`"
-                            @click="() => {}">
+                            :to="`/workflows/edit?id=${workflow.id}&version=${workflow.version}`">
                             <FontAwesomeIcon :icon="faEdit" fixed-width />
                         </BButton>
                         <AsyncButton
@@ -136,31 +133,30 @@ const workflowImportTitle = computed(() => {
                         </AsyncButton>
 
                         <slot name="workflow-title-actions" />
-
-                        <ButtonSpinner
-                            v-if="!props.invocation"
-                            id="run-workflow"
-                            data-description="execute workflow button"
-                            :wait="runWaiting"
-                            :disabled="runDisabled"
-                            size="sm"
-                            title="Run"
-                            @onClick="emit('on-execute')" />
-                        <WorkflowRunButton
-                            v-else
-                            :id="workflow.id"
-                            data-description="route to workflow run button"
-                            variant="link"
-                            :title="
-                                !workflow.deleted
-                                    ? `<b>Rerun</b><br>${getWorkflowName()}`
-                                    : 'This workflow has been deleted.'
-                            "
-                            :disabled="workflow.deleted"
-                            force
-                            full
-                            :version="workflow.version" />
                     </BButtonGroup>
+                    <ButtonSpinner
+                        v-if="!props.invocation"
+                        id="run-workflow"
+                        data-description="execute workflow button"
+                        :wait="runWaiting"
+                        :disabled="runDisabled"
+                        size="sm"
+                        title="Run Workflow"
+                        @onClick="emit('on-execute')" />
+                    <WorkflowRunButton
+                        v-else
+                        :id="workflow.id"
+                        data-description="route to workflow run button"
+                        variant="link"
+                        :title="
+                            !workflow.deleted
+                                ? `<b>Rerun</b><br>${getWorkflowName()}`
+                                : 'This workflow has been deleted.'
+                        "
+                        :disabled="workflow.deleted"
+                        force
+                        full
+                        :version="workflow.version" />
                 </div>
             </div>
             <div v-if="props.success" class="donemessagelarge">
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 916d98d12c99..7973119b200a 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -195,6 +195,17 @@ $ui-margin-horizontal-large: $margin-v * 2;
     }
 }
 
+.ui-form-header-underlay::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -$margin-h;
+    left: -0.5rem;
+    right: -0.5rem;
+    height: 50px;
+    background: linear-gradient($white 75%, change-color($white, $alpha: 0));
+}
+
 // popovers
 .popover {
     max-width: 70%;