From b6a00c9a446b416f7cc13853471dbe3e209717f9 Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Tue, 20 Feb 2024 11:24:37 -0600
Subject: [PATCH] clean up styles around badge hover, lighten effect slightly,
 and fix spacing issues where badges move slightly when hovered

---
 webapp/src/App.vue                                | 11 -----------
 webapp/src/components/FormattedCollectionName.vue |  7 +++++--
 webapp/src/components/FormattedItemName.vue       | 13 ++++++++++++-
 webapp/src/views/EditPage.vue                     | 10 +++++-----
 4 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 4a771245d..0176a7a01 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -98,17 +98,6 @@ body {
   color: #a6ce39;
 }
 
-.badge.clickable {
-  border: 2px solid transparent;
-}
-
-.badge.clickable:hover {
-  cursor: pointer;
-  border: 2px solid black;
-  border-color: black;
-  box-shadow: 0 0 3px;
-}
-
 .clickable {
   cursor: pointer;
 }
diff --git a/webapp/src/components/FormattedCollectionName.vue b/webapp/src/components/FormattedCollectionName.vue
index d1b2576e5..d003bea66 100644
--- a/webapp/src/components/FormattedCollectionName.vue
+++ b/webapp/src/components/FormattedCollectionName.vue
@@ -64,10 +64,13 @@ export default {
 
 <style scoped>
 .formatted-collection-name {
-  border-width: 1px;
+  border: 1.5px solid;
+  margin: 1px;
 }
 
 .formatted-collection-name:hover {
-  border-width: 1.5px !important;
+  border-width: 2px;
+  margin: 0px;
+  box-shadow: 0 0 2px gray;
 }
 </style>
diff --git a/webapp/src/components/FormattedItemName.vue b/webapp/src/components/FormattedItemName.vue
index 1f73727ef..f48ce71fb 100644
--- a/webapp/src/components/FormattedItemName.vue
+++ b/webapp/src/components/FormattedItemName.vue
@@ -1,7 +1,7 @@
 <template>
   <span v-if="item_id">
     <span
-      class="badge badge-light"
+      class="formatted-item-name badge badge-light"
       :class="{ clickable: enableClick || enableModifiedClick }"
       :style="{ backgroundColor: badgeColor }"
       @click.exact="enableClick ? openEditPageInNewTab() : null"
@@ -76,3 +76,14 @@ export default {
   emits: ["itemIdClicked"],
 };
 </script>
+
+<style scoped>
+.formatted-item-name {
+  border: 2px solid transparent;
+}
+
+.formatted-item-name.clickable:hover {
+  border: 2px solid rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 2px gray;
+}
+</style>
diff --git a/webapp/src/views/EditPage.vue b/webapp/src/views/EditPage.vue
index c6943d59b..a51366ede 100644
--- a/webapp/src/views/EditPage.vue
+++ b/webapp/src/views/EditPage.vue
@@ -4,7 +4,7 @@
     class="navbar navbar-expand sticky-top navbar-dark py-0 editor-navbar"
     :style="{ backgroundColor: navbarColor }"
   >
-    <span class="navbar-brand" @click="scrollToID($event, 'topScrollPoint')"
+    <span class="navbar-brand clickable" @click="scrollToID($event, 'topScrollPoint')"
       >{{ itemTypeEntry?.navbarName || "loading..." }}&nbsp;&nbsp;|&nbsp;&nbsp;
       <FormattedItemName :item_id="item_id" :itemType="itemType" />
     </span>
@@ -324,15 +324,15 @@ label,
   padding: 0.3rem;
 }
 
+::v-deep(.navbar-brand:hover .formatted-item-name) {
+  outline: 2px solid rgba(0, 0, 0, 0.3);
+}
+
 .unsaved-warning {
   font-weight: 600;
   color: #ffc845;
 }
 
-.navbar-brand {
-  cursor: pointer;
-}
-
 .block-container {
   padding-bottom: 100px;
   position: relative;