From 8e03930e0cd32762bc462953401ae29a8e018d62 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 18 Sep 2021 17:44:52 +0100
Subject: [PATCH] :art: Improvments to status-check tooltip CSS

---
 src/components/LinkItems/StatusIndicator.vue | 25 +++++++++++++-------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/LinkItems/StatusIndicator.vue b/src/components/LinkItems/StatusIndicator.vue
index 8976f345..2d53d2ea 100644
--- a/src/components/LinkItems/StatusIndicator.vue
+++ b/src/components/LinkItems/StatusIndicator.vue
@@ -1,9 +1,10 @@
 <template>
-  <div
+  <div class="indicator"
     v-tooltip="{
-      content: statusText || otherStatusText, classes: ['status-tooltip', `tip-${color()}`] }"
-    class="indicator"
-    @click="showToast()">
+      content: statusText || otherStatusText,
+      classes: ['status-tooltip', `tip-${color()}`],
+      delay: { show: 0, hide: 150 }
+    }">
     <div :class="`dot dot-${color()}`">
       <span><span></span></span>
     </div>
@@ -114,11 +115,19 @@ export default {
 <style lang="scss">
 .status-tooltip {
   background: var(--status-check-tooltip-background) !important;
-  color: var(--status-check-tooltip-color) !important;
+  color: var(--status-check-tooltip-color);
   font-size: 1rem;
   z-index: 10;
-  &.tip-green { border: 1px solid var(--success); }
-  &.tip-yellow { border: 1px solid var(--warning); }
-  &.tip-red { border: 1px solid var(--danger); }
+  &.tip-grey { --status-color: var(--medium-grey); }
+  &.tip-green { --status-color: var(--success); }
+  &.tip-yellow { --status-color: var(--warning); }
+  &.tip-red { --status-color: var(--danger); }
+  .tooltip-inner {
+    border: 1px solid var(--status-color);
+    // color: var(--status-color);
+  }
+  .tooltip-arrow {
+    --description-tooltip-color: var(--status-color);
+  }
 }
 </style>