From e73856ee1d8fe984a45da2eaa8e1b3a246879935 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 20 Oct 2023 12:56:08 -0500
Subject: [PATCH] replace highlighted button icons with whole card border

remove unused imports
---
 .../components/History/Content/ContentItem.vue    |  8 ++++++--
 .../components/History/Content/ContentOptions.vue | 15 +++------------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 7edbed222fc2..707ad680af07 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         :id="contentId"
-        :class="['content-item m-1 p-0 rounded btn-transparent-background', contentCls]"
+        :class="['content-item m-1 p-0 rounded btn-transparent-background', contentCls, isBeingUsed]"
         :data-hid="id"
         :data-state="state"
         tabindex="0"
@@ -211,6 +211,9 @@ export default {
                 visualize: `/visualizations?dataset_id=${id}`,
             };
         },
+        isBeingUsed() {
+            return Object.values(this.itemUrls).includes(this.$route.path) ? "being-used" : "";
+        },
     },
     methods: {
         onKeyDown(event) {
@@ -286,7 +289,8 @@ export default {
     }
 
     // improve focus visibility
-    &:deep(.btn:focus) {
+    &:deep(.btn:focus),
+    &.being-used {
         box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);
     }
 }
diff --git a/client/src/components/History/Content/ContentOptions.vue b/client/src/components/History/Content/ContentOptions.vue
index 7450737f5cd1..4cc1fe03fdea 100644
--- a/client/src/components/History/Content/ContentOptions.vue
+++ b/client/src/components/History/Content/ContentOptions.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { BDropdown } from "bootstrap-vue";
 import { computed, type Ref, ref } from "vue";
-import { useRoute } from "vue-router/composables";
 
 import { prependPath } from "@/utils/redirect";
 
-const route = useRoute();
-
 const props = defineProps({
     writable: { type: Boolean, default: true },
     isDataset: { type: Boolean, required: true },
@@ -49,12 +46,6 @@ const canShowCollectionDetails = computed(() => props.itemUrls.showDetails);
 
 const showCollectionDetailsUrl = computed(() => prependPath(props.itemUrls.showDetails));
 
-const isDisplaying = computed(() => route.path === displayUrl.value);
-
-const isEditing = computed(() => route.path === editUrl.value);
-
-const isShowingDetails = computed(() => route.path === showCollectionDetailsUrl.value);
-
 const tabindex = computed(() => (props.keyboardSelectable ? "0" : "-1"));
 
 function onDelete($event: MouseEvent) {
@@ -93,7 +84,7 @@ function onDisplay($event: MouseEvent) {
             class="collection-job-details-btn px-1"
             title="Show Details"
             size="sm"
-            :variant="!isShowingDetails ? 'link' : 'primary'"
+            variant="link"
             :href="showCollectionDetailsUrl"
             @click.prevent.stop="emit('showCollectionInfo')">
             <icon icon="info-circle" />
@@ -106,7 +97,7 @@ function onDisplay($event: MouseEvent) {
             :tabindex="tabindex"
             class="display-btn px-1"
             size="sm"
-            :variant="!isDisplaying ? 'link' : 'primary'"
+            variant="link"
             :href="displayUrl"
             @click.prevent.stop="onDisplay($event)">
             <icon icon="eye" />
@@ -118,7 +109,7 @@ function onDisplay($event: MouseEvent) {
             :tabindex="tabindex"
             class="edit-btn px-1"
             size="sm"
-            :variant="!isEditing ? 'link' : 'primary'"
+            variant="link"
             :href="editUrl"
             @click.prevent.stop="emit('edit')">
             <icon icon="pen" />