Resolve "Fix arrow for popovers on monitoring graph"

3 files changed, 40 insertions, 8 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 92fe98508ad..1e6803abf3a 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -125,6 +125,7 @@ export default {
       :class="flagOrientation"
       class="prometheus-graph-flag popover"
     >
+      <div class="arrow-shadow"></div>
       <div class="arrow"></div>
       <div class="popover-title">
         <h5 v-if="deploymentFlagData">
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 3144dcc4dc0..8915b323b3c 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -293,6 +293,8 @@
 .prometheus-graph-flag {
   display: block;
   min-width: 160px;
+  border: 0;
+  box-shadow: 0 1px 4px 0 $black-transparent;
 
   h5 {
     padding: 0;
@@ -312,7 +314,6 @@
 
   &.popover {
     padding: 0;
-    border: 1px solid $border-color;
 
     &.left {
       left: auto;
@@ -320,12 +321,19 @@
       margin-right: 10px;
 
       > .arrow {
-        right: -16px;
+        right: -14px;
         border-left-color: $border-color;
       }
 
       > .arrow::after {
-        border-left-color: $theme-gray-50;
+        border-top: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+        border-left: 4px solid $theme-gray-50;
+      }
+
+      .arrow-shadow {
+        right: -3px;
+        box-shadow: 1px 0 9px 0 $black-transparent;
       }
     }
 
@@ -335,19 +343,35 @@
       margin-left: 10px;
 
       > .arrow {
-        left: -16px;
+        left: -7px;
         border-right-color: $border-color;
       }
 
       > .arrow::after {
-        border-right-color: $theme-gray-50;
+        border-top: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+        border-right: 4px solid $theme-gray-50;
+      }
+
+      .arrow-shadow {
+        left: -3px;
+        box-shadow: 1px 0 8px 0 $black-transparent;
       }
     }
 
     > .arrow {
-      top: 16px;
-      margin-top: -8px;
-      border-width: 8px;
+      top: 10px;
+      margin: 0;
+    }
+
+    .arrow-shadow {
+      content: "";
+      position: absolute;
+      width: 7px;
+      height: 7px;
+      background-color: transparent;
+      transform: rotate(45deg);
+      top: 13px;
     }
 
     > .popover-title,
@@ -355,10 +379,12 @@
       padding: 8px;
       font-size: 12px;
       white-space: nowrap;
+      position: relative;
     }
 
     > .popover-title {
       background-color: $theme-gray-50;
+      border-radius: $border-radius-default $border-radius-default 0 0;
     }
   }
 
diff --git a/changelogs/unreleased/41784-monitoring-graph-popovers.yml b/changelogs/unreleased/41784-monitoring-graph-popovers.yml
new file mode 100644
index 00000000000..757445d7e0c
--- /dev/null
+++ b/changelogs/unreleased/41784-monitoring-graph-popovers.yml
@@ -0,0 +1,5 @@
+---
+title: Update design for system metrics popovers
+merge_request: 20655
+author:
+type: fixed