Add GCardTitle wrapper for BCardTitle

client/src/component-library/GCardTitle.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BCardTitle } from "bootstrap-vue";
+</script>
+
+<template>
+    <BCardTitle v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </BCardTitle>
+</template>

client/src/components/Common/ExportRecordDetails.vue

@@ -8,13 +8,14 @@ import {
     faLink,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BCard, BCardTitle } from "bootstrap-vue";
+import { BCard } from "bootstrap-vue";
 import LoadingSpan from "components/LoadingSpan";
 import { computed } from "vue";
 
 import { ExportRecordModel } from "./models/exportRecordModel";
 
 import GAlert from "@/component-library/GAlert.vue";
+import GCardTitle from "@/component-library/GCardTitle.vue";
 
 library.add(faExclamationCircle, faExclamationTriangle, faCheckCircle, faClock, faLink);
 
@@ -63,9 +64,9 @@ function onMessageDismissed() {
 
 <template>
     <b-card class="export-record-details">
-        <b-card-title>
+        <GCardTitle>
             <b>{{ title }}</b> {{ props.record.elapsedTime }}
-        </b-card-title>
+        </GCardTitle>
         <p v-if="!props.record.isPreparing">
             Format: <b class="record-archive-format">{{ props.record.modelStoreFormat }}</b>
         </p>

client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.vue

@@ -1,13 +1,14 @@
 <script setup>
 import axios from "axios";
-import { BButtonGroup, BButtonToolbar, BCard, BCardTitle } from "bootstrap-vue";
+import { BButtonGroup, BButtonToolbar, BCard } from "bootstrap-vue";
 import { useMarkdown } from "composables/markdown";
 import { Toast } from "composables/toast";
 import { computed, provide, ref } from "vue";
 
 import { InvocationExportPlugin } from "./model";
 
 import ActionButton from "./ActionButton.vue";
+import GCardTitle from "@/component-library/GCardTitle.vue";
 import StsDownloadButton from "components/StsDownloadButton.vue";
 import ExportToRemoteButton from "components/Workflow/Invocation/Export/ExportToRemoteButton.vue";
 import ExportToRemoteModal from "components/Workflow/Invocation/Export/ExportToRemoteModal.vue";
@@ -71,7 +72,7 @@ function onExportToFileSourceFailure() {
 <template>
     <div>
         <b-card class="export-plugin-card mb-1">
-            <b-card-title class="export-plugin-title align-items-center d-flex justify-content-between">
+            <GCardTitle class="export-plugin-title align-items-center d-flex justify-content-between">
                 {{ exportPlugin.title }}
                 <b-button-toolbar aria-label="Export Options">
                     <b-button-group>
@@ -94,7 +95,7 @@ function onExportToFileSourceFailure() {
                             class="action-button" />
                     </b-button-group>
                 </b-button-toolbar>
-            </b-card-title>
+            </GCardTitle>
 
             <div class="markdown-description" v-html="descriptionRendered" />
         </b-card>