feat(popup): color the arrow

Make sure that the arrow is in the same color as the popup

packages/mutation-testing-elements/src/components/mutation-test-report-popup/mutation-test-report-popup.scss

@@ -1,3 +1,6 @@
+@import "~bootstrap/scss/_functions.scss";
+@import "~bootstrap/scss/_variables.scss";
+
 :host {
     position: relative;
     display: inline-block;
@@ -23,12 +26,19 @@
     position: absolute;
     top: -10px;
     left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
+    margin-left: -6px;
+    border-width: 6px;
     border-style: solid;
     border-color: transparent transparent #555 transparent;
 }
 
+// Taken from bootstrap/scss/utilities/_borders.scs
+@each $color, $value in $theme-colors {
+  .popover-#{$color}::before {
+    border-bottom-color: $value ;
+  }
+}
+
 .popover.show {
     visibility: visible;
     opacity: 100;

packages/mutation-testing-elements/src/components/mutation-test-report-popup/mutation-test-report-popup.ts

@@ -28,17 +28,13 @@ export class MutationTestReportPopupComponent extends LitElement {
     }
   }
 
-  public getContextClasses() {
-    if (this.context) {
-      return `bg-${this.context} text-white`;
-    } else {
-      return '';
-    }
+  private getBackgroundClasses() {
+    return this.context ? `bg-${this.context} text-white` : '';
   }
 
   public render() {
-    return html`<div class="popover ${this.show ? 'show' : 'hide'}">
-  <h3 class="popover-header ${this.getContextClasses()}">${this.header}</h3>
+    return html`<div class="popover popover-${this.context} ${this.show ? 'show' : 'hide'}">
+  <h3 class="popover-header ${this.getBackgroundClasses()}">${this.header}</h3>
   <div class="popover-body">
     <slot name="popover-body"></slot>
   </div>