Expand hoverable container for feature highlight

2 files changed, 22 insertions, 12 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_options.js b/app/assets/javascripts/feature_highlight/feature_highlight_options.js
index 77ff2718bf7..fd48f2e87cc 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_options.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_options.js
@@ -3,10 +3,10 @@ import bp from '../breakpoints';
 
 const highlightOrder = ['issue-boards'];
 
-export default function domContentLoaded(order = highlightOrder) {
+export default function domContentLoaded(order) {
   if (bp.getBreakpointSize() === 'lg') {
     highlightFeatures(order);
   }
 }
 
-document.addEventListener('DOMContentLoaded', domContentLoaded);
+document.addEventListener('DOMContentLoaded', domContentLoaded.bind(this, highlightOrder));
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
index 1d2573163a6..ebae473df50 100644
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -1,20 +1,30 @@
 .feature-highlight {
-  animation: pulse-highlight 2s infinite;
-
+  position: relative;
   margin-left: $gl-padding;
-  width: 8px;
-  height: 8px;
-  background-color: $blue-500;
-  border-radius: 50%;
+  width: 20px;
+  height: 20px;
   cursor: pointer;
-  box-shadow: 0 0 0 rgba($blue-500, 0.4);
 
-  &:hover,
-  &.disable-animation {
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 8px;
+    height: 8px;
+    background-color: $blue-500;
+    border-radius: 50%;
+    box-shadow: 0 0 0 rgba($blue-500, 0.4);
+    animation: pulse-highlight 2s infinite;
+  }
+
+  &:hover::before,
+  &.disable-animation::before {
     animation: none;
   }
 
-  &[disabled] {
+  &[disabled]::before {
     display: none;
   }
 }