toggle-components-library 1.36.5 → 1.36.7-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.5",
+    "version": "1.36.7-beta.0",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/assets/icons/airship-flight-assist-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 121.96 118.65"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-1,.cls-2,.cls-3{stroke-width:0px;}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="47.1" y1="77.62" x2="121.2" y2="3.53" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c700d4"/><stop offset=".75" stop-color="#5f1c70"/></linearGradient><linearGradient id="linear-gradient-2" x1="17.89" y1="65.91" x2="17.89" y2="30.13" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9700bf"/><stop offset=".22" stop-color="#9401ba"/><stop offset=".45" stop-color="#8b05ae"/><stop offset=".68" stop-color="#7c0d9a"/><stop offset=".91" stop-color="#68177d"/><stop offset="1" stop-color="#5f1c70"/></linearGradient><linearGradient id="linear-gradient-3" x1="72.24" y1="113.5" x2="88.43" y2="97.32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9200b9"/><stop offset=".24" stop-color="#9b00c0"/><stop offset="1" stop-color="#b500d4"/></linearGradient></defs><g id="Layer_5"><path class="cls-1" d="M121.53,9.8c.64-1.77.57-3.71-.19-5.43-1.63-3.7-5.95-5.38-9.65-3.75l-33.33,24.14c-1.72.76-3.66.83-5.43.19l-18.83-6.76c-1.77-.64-3.71-.57-5.43.19-3.7,1.63-5.38,5.95-3.75,9.65l14.71,14.28c1.66,1.79.83,3.67.19,5.43l-13.43,22.89c-.79,1.91-.71,4.08.21,5.93,1.76,3.56,6.08,5.01,9.63,3.25l22.78-15.72c1.72-.76,3.61-1.96,5.43-.19l14.4,14.43c1.77.63,3.71.56,5.43-.19,3.7-1.63,5.38-5.95,3.75-9.65l-8.08-18.35c-.76-1.72-.83-3.66-.19-5.43l21.78-34.91Z"/><path class="cls-2" d="M32.03,42.74l-1.95-1.09c-1.64-.92-2.87-2.43-3.42-4.23l-.66-2.13c-.56-1.79-1.78-3.31-3.42-4.23-3.53-1.98-7.99-.72-9.97,2.81l-1.09,1.94c-.92,1.64-2.43,2.87-4.23,3.42l-2.13.66c-1.79.55-3.31,1.78-4.23,3.42-1.97,3.53-.71,7.99,2.81,9.97l1.95,1.09c1.64.92,2.87,2.43,3.42,4.23l.66,2.13c.56,1.79,1.78,3.31,3.42,4.23,3.53,1.98,7.99.72,9.97-2.81l1.09-1.95c.92-1.64,2.43-2.86,4.23-3.42l2.13-.66c1.8-.55,3.31-1.78,4.23-3.42,1.98-3.53.71-7.99-2.81-9.97Z"/><path class="cls-3" d="M89.89,101.45c-2.08-.57-3.56-2.4-3.68-4.55-.12-2.15-1.6-3.98-3.68-4.54-2.67-.73-5.43.84-6.16,3.51-.57,2.08-2.4,3.56-4.55,3.68s-3.98,1.6-4.55,3.68c-.73,2.67.84,5.43,3.51,6.16,2.08.57,3.56,2.4,3.68,4.55.13,2.14,1.61,3.98,3.68,4.54,2.67.73,5.42-.84,6.16-3.51.57-2.08,2.4-3.56,4.55-3.68,2.15-.12,3.98-1.6,4.55-3.68.73-2.67-.84-5.42-3.51-6.16Z"/></g></svg>

package/src/assets/icons/bolt-solid.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.922" height="12.381" viewBox="0 0 6.922 12.381">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.343" y1="-0.06" x2="0.923" y2="2.008" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#c139e5"/>
+      <stop offset="1" stop-color="#611d73"/>
+    </linearGradient>
+  </defs>
+  <path id="bolt-solid" d="M37.679,1.07a.944.944,0,0,0-.191-.931.469.469,0,0,0-.719.044L32.156,5.6a.961.961,0,0,0-.16.854.616.616,0,0,0,.541.5h2.009L33.16,11.294a.944.944,0,0,0,.191.931.469.469,0,0,0,.719-.044l4.613-5.417a.961.961,0,0,0,.16-.854.612.612,0,0,0-.541-.5H36.293Z" transform="translate(-31.959 0.009)" fill="url(#linear-gradient)"/>
+</svg>

package/src/components/buttons/ToggleLoginButton.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="toggle-button-container toggle-button-container--login" :class="{'toggle-button-container--fluid': btnFluid}">
-        
-        <button :type="type" :class="['toggle-login-button', { 'toggle-login-button--airship': platform == 'airship' }, { 'toggle-login-button--loading': platform == 'toggle' && loading }, { 'toggle-login-button--airship-loading': platform == 'airship' && loading }]" @click="click" 
-            :disabled="(loading || disabled)">
+    <div class="toggle-button-container toggle-button-container--login"
+        :class="{'toggle-button-container--fluid': btnFluid}">
 
-            <div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" v-if="loading"></div>
+        <button :type="type" :class="buttonClasses" @click="click" :disabled="(loading || disabled)">
+
+            <div :class="loaderClasses" v-if="loading"></div>
 
             <div class="toggle-login-button-text" v-else>
                 {{ buttonText }}
@@ -77,6 +77,30 @@ export default {
              */
             this.$emit('click');
         }
+    },
+    computed: {
+        /**
+         * The class to apply to the button
+         * @return {Object}
+         */
+        buttonClasses() {
+            return {
+                'toggle-login-button': true,
+                'toggle-login-button--airship': this.platform == 'airship',
+                'toggle-login-button--loading': this.platform == 'toggle' && this.loading,
+                'toggle-login-button--airship-loading': this.platform == 'airship' && this.loading
+            }
+        },
+        /**
+         * The class to apply to the loader
+         * @return {Object}
+         */
+        loaderClasses() {
+            return {
+                'toggle-login-button-loader': true,
+                'toggle-login-button-loader--airship': this.platform == 'airship',
+            }
+        }
     }
 }
 </script>

package/src/components/forms/ToggleContactSearch.vue

@@ -19,8 +19,6 @@
                     <div class="toggle-contact-search-arrow" :class="{'toggle-contact-search-arrow-active': showDropdown}"></div>
                 </div>
     
-                <div class="toggle-contact-search-divider"></div>
-    
                 <input :class="{'toggle-contact-search-input': true, 'toggle-contact-search-disabled': disabled}" v-model="inputVal" :disabled="disabled || loading" type="text" :placeholder="placeholder" @keyup.enter="onEnter">
     
                 <div v-if="loading" class="toggle-contact-search-loading-container">

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3 class="toggle-metric metric-label">{{label}}</h3>
+    <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
     {{checkWindowSize}}
     <apexchart type="bar" :height="height" :options="chartOptions" :series="values"></apexchart>
   </div>
@@ -48,6 +48,16 @@ export default {
     categories: {
       type: [Array],
       required: true
+    },
+    /*
+    *  Component's style
+    */
+    componentStyle: {
+      type: String,
+      default: "default",
+      validator: function(value) {
+        return ['default', 'atmosphere'].indexOf(value) !== -1
+      }
     }
   },
   
@@ -129,6 +139,9 @@ export default {
           
         }
       }
+    },
+    atmosphere() {
+      return this.componentStyle === 'atmosphere'
     }
   }
   

package/src/components/metrics/ToggleMetricPieChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3 class="toggle-metric metric-label">{{label}}</h3>
+    <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
     <apexchart type="pie"  :height="height" :options="chartOptions" :series="values"></apexchart>
   </div>
 
@@ -47,6 +47,16 @@ export default {
     labels: {
       type: Array,
       required: true
+    },
+    /*
+    *  Component's style
+    */
+    componentStyle: {
+      type: String,
+      default: "default",
+      validator: function(value) {
+        return ['default', 'atmosphere'].indexOf(value) !== -1
+      }
     }
   },
   computed: {
@@ -92,6 +102,9 @@ export default {
           enabled: false
         }
       }
+    },
+    atmosphere() {
+      return this.componentStyle === 'atmosphere'
     }
   }
   

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -1,9 +1,10 @@
 <template>
     <div>
-        <h3 class="toggle-metric metric-label">{{label}}</h3>
+        <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
         <div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
-        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}
+        <h1 :class="['toggle-metric metric-value', { 'metric-value-atmosphere': atmosphere }, { 'metric-value-small': small}]" v-else>{{metricValue}}
             <span v-if="score && value.maxScore" class="toggle-metric-score-rating">/{{value.maxScore}}</span>
+            <span v-if="atmosphere && live == true" class="toggle-metric-live-icon"></span>
         </h1>
     </div>
 </template>
@@ -73,6 +74,30 @@ export default {
         metricPending: {
             type: Boolean,
             default: false
+        },
+        /**
+         * Metric style (default or atmosphere release themed)
+         */
+        metricStyle: {
+            type: String,
+            default: "default",
+            validator: function (value) {
+                return ['default', 'atmosphere'].indexOf(value) !== -1
+            }
+        },
+        metricSize: {
+            type: String,
+            default: "default",
+            validator: function (value) {
+                return ['default', 'small'].indexOf(value) !== -1
+            }
+        },
+        /**
+         * Show live lightening bolt
+         */
+        live: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
@@ -99,6 +124,12 @@ export default {
         },
         score() {
             return this.type === 'score';
+        },
+        atmosphere() {
+            return this.metricStyle === 'atmosphere';
+        },
+        small() {
+            return this.metricSize === 'small';
         }
     }
 }

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -6,7 +6,7 @@
             {{trendImpactLabel}}
         </ToggleBadge>
 		
-        <ToggleMetricSingleMetric :value="singleMetricVal" :label="label" :type="type" :currencyCode="currencyCode" :currencyLocale="currencyLocale" :currencyDenomination="currencyDenomination"/>
+        <ToggleMetricSingleMetric :value="singleMetricVal" :label="label" :type="type" :currencyCode="currencyCode" :currencyLocale="currencyLocale" :currencyDenomination="currencyDenomination" :metricStyle="metricStyle" :metricSize="metricStyle == 'atmosphere' ? 'small' : 'default'"/>
         
         <apexchart type="line" :height="height" :width="width" :options="chartOptions" :series="sparkLineVal" ref="sparkLineRef">
         </apexchart>
@@ -116,6 +116,13 @@ export default {
         showTrendForAllZeros: {
           type: Boolean,
           default: false
+        },
+        metricStyle: {
+            type: String,
+            default: "default",
+            validator: function (value) {
+                return ['default', 'atmosphere'].indexOf(value) !== -1
+            }
         }
     },
 
@@ -171,10 +178,17 @@ export default {
         * @return String
         */
         trendImpactClass() {
-           return this.getTrendImpact() === 1  ? 'confirm'
+            if (this.metricStyle === 'atmosphere'){
+                return this.getTrendImpact() === 1  ? 'atmosphere confirm'
+                : this.getTrendImpact() === -1 ? 'atmosphere abort'
+                : this.getTrendImpact() === 0  ? 'atmosphere warning' 
+                : 'atmosphere empty';
+            } else {
+                return this.getTrendImpact() === 1  ? 'confirm'
                 : this.getTrendImpact() === -1 ? 'abort'
                 : this.getTrendImpact() === 0  ? 'warning' 
                 : 'empty';
+            }
         },
         /**
         * Defines the badge title from the trending impact

package/src/components/tooltips/ToggleTooltip.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="toggle-tooltip">
+        <div class="toggle-tooltip-i">i</div>
+        <span class="toggle-tooltip-text"><slot></slot></span>
+    </div>
+</template>

package/src/index.js

@@ -89,6 +89,8 @@ import ToggleEmailCard from "./components/cards/ToggleEmailCard.vue";
 import ToggleRewardsCard from "./components/cards/ToggleRewardsCard.vue";
 import ToggleCommentCard from "./components/cards/ToggleCommentCard.vue";
 
+import ToggleTooltip from "./components/tooltips/ToggleTooltip.vue";
+
 
 import './sass/main.scss';
 
@@ -161,7 +163,8 @@ const Components = {
     ToggleCarouselSlide,
     ToggleEmailCard,
     ToggleRewardsCard,
-    ToggleCommentCard
+    ToggleCommentCard,
+    ToggleTooltip
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_badges.scss

@@ -37,6 +37,40 @@
         border-radius: 50px;
         padding: 5px 11px;
     }
+
+    // Atmosphere release styling
+    &.atmosphere {
+        background-color: #E4EDF2;
+        color: #354B64;
+        font-size: 12px;
+        font-weight: 400;
+        padding: 5px 11px;
+        border-radius: 5px;
+
+        &.confirm {
+            background-color: #DFEED4;
+            color: #71BE37;
+        }
+        &.abort {
+            background-color: #FDE9E9;
+            color: #D8000C;
+        }
+        &.warning {
+            background-color: #F7EBD4;
+            color: #E6A831;
+        }
+        &.inactive {
+            color: rgba(53, 75, 100, .5)
+        }
+        &.empty {
+            background-color: #E4EDF2;
+            color: #354B64;
+        }
+        &.neutral {
+            background-color: #E4EDF2;
+            color: #38ABFF;
+        }
+    }
 }
 
 .toggle-podium-badge {

package/src/sass/includes/_as_boosters.scss

@@ -77,9 +77,9 @@
     }
 
     &.feedback{
-        background-color: rgba($booster-feedback-colour-dark, 0.2);
+        background-color: rgba($booster-feedback-colour-dark, 0.08);
         &:hover{
-            background-color: rgba($booster-feedback-colour-dark, 0.25);
+            background-color: rgba($booster-feedback-colour-dark, 0.1);
         }
     }
 

package/src/sass/includes/_as_buttons.scss

@@ -294,21 +294,23 @@
         transform: translate(0, -3px);
         color: #fff;
     }
-    &--airship{
-        background-color: #FF7175;
+    &--airship {
+        background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box;
+
         &:hover:not(:disabled) {
-            background-color: #ff463f;
-            box-shadow: 0 10px 30px -10px rgba(254, 108, 102, 0.5);
+            background-color: #5F1C70;
+            box-shadow: 0 10px 30px -10px rgba(190, 58, 223, 0.5);
         }
-        &:disabled, &[disabled]{
-            background-color: #ed9598;
+
+        &:disabled, &[disabled] {
+            background: transparent linear-gradient(112deg, rgba(190, 58, 223, 0.6) 0%, rgba(94, 28, 110, 0.6) 100%) 0% 0% no-repeat padding-box;
         }
     }
     &--loading{
         background-color: #3180FF !important;
     }
     &--airship-loading{
-        background-color: #FF7175 !important;
+        background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box !important;
     }
 }
 
@@ -328,6 +330,9 @@
     top: 50%;
     margin-top: -0.5rem;
     box-sizing: content-box;
+    &--airship {
+        border-top-color: transparent;
+    }
 }
 
 .toggle-metrics-button {
@@ -496,6 +501,7 @@
     padding: 0px 8px 0px 8px;
     width: 6rem;
     height: 1.8rem;
+    z-index: 1;
     .toggle-button-booster-image {
         width: 100%;
         height: 100%;

package/src/sass/includes/_as_inputs.scss

@@ -9,6 +9,7 @@
 .toggle-input-select,
 .toggle-contact-search-container{
     @include toggle-global-font-config;
+    max-width: 425px
 }
 
 .toggle-input-counter{
@@ -970,7 +971,6 @@ $iconWidth:20px;
     height: 40px;
     background-color: $toggle-white;
     border-radius: 8px;
-    min-width: 500px;
 }
 
 .toggle-contact-search-input-container-active {
@@ -984,7 +984,7 @@ $iconWidth:20px;
 }
 
 .toggle-contact-search-dropdown-container {
-    min-width: 550px;
+    width: 425px;
     background-color: $toggle-white;
     border-radius: 0 0 8px 8px;
     overflow: hidden;
@@ -997,14 +997,19 @@ $iconWidth:20px;
     border: 0;
     border-radius: 0px;
     height: 30px;
-    margin: 4px 5px 0px 14px;
+    margin: 6px 5px 0px 0px;
+    padding-left: 0;
     color: #3A4A62;
     font-family: $toggle-font-family;
     font-weight: 700;
-    font-size: 16px;
+    font-size: 14px;
     background-color: #FFFFFF;
 }
 
+.toggle-contact-search-input:focus{
+    outline: none;
+}
+
 .toggle-contact-search-input::placeholder {
     color: #C5CED8;
     opacity: 1;
@@ -1033,10 +1038,10 @@ $iconWidth:20px;
 .toggle-contact-search-icon {
     max-width: 20px;
     max-height: 20px;
-    margin: 10px 16px 0 0;
+    margin: 12px 8px 0 0;
     transition: transform .2s ease-in-out;
-    width: 25px;
-    height: 25px;
+    width: 18px;
+    height: 18px;
     background-repeat: no-repeat;
     background-size: contain;
 }
@@ -1057,7 +1062,7 @@ $iconWidth:20px;
 
 .toggle-contact-search-icon-arrow-container {
     display: flex;
-    width: 100px;
+    width: 70px;
     min-width: 60px;
     flex-direction: row;
     justify-content: center;
@@ -1071,9 +1076,9 @@ $iconWidth:20px;
 
 .toggle-contact-search-magnifying-glass-icon {
     cursor: pointer;
-    margin: 10px 15px 0 3px;
-    width: 25px;
-    height: 25px;
+    margin: 13px 15px 0 3px;
+    width: 21px;
+    height: 21px;
     background-image: url('../assets/icons/magnifying-glass-icon.svg');
     background-repeat: no-repeat;
     background-size: contain;
@@ -1103,14 +1108,8 @@ $iconWidth:20px;
     transform: rotate(-3.1416rad) translateY(5px);
 }
 
-.toggle-contact-search-divider {
-    height: 28px;
-    margin: 7px 0 0 0;
-    border-right: 2px solid #D9D9D9;
-}
-
 .toggle-contact-search-dropdown-item {
-    margin: 5px 5px 5px 10px;
+    margin: 5px 5px 5px 7px;
     border-radius: 8px;
     cursor: pointer;
     font-size: 16px;
@@ -1145,12 +1144,10 @@ $iconWidth:20px;
 }
 
 .toggle-contact-search-icon-dropdown {
-    width: 25px;
-    height: 25px;
+    width: 18px;
+    height: 18px;
     background-repeat: no-repeat;
     background-size: contain;
-    max-width: 20px;
-    max-height: 20px;
     margin: 2px 14px 0 0;
     transition: transform .2s ease-in-out;
 }

package/src/sass/includes/_as_metrics.scss

@@ -17,6 +17,20 @@
         color: $toggle-metric-label-black;
     }
 
+    &.metric-label-atmosphere {
+        color: #354B64;
+        font-weight: 400;
+        font-size: 14px;
+    }
+
+    &.metric-value-atmosphere {
+        font-weight: 800;
+        color: #00346F;
+    }
+
+    &.metric-value-small {
+        font-size: 30px;
+    }
 }
 
 
@@ -139,4 +153,15 @@
 .toggle-metric-score-rating {
     font-size: 27px;
     margin-left: -8px;
+}
+
+.toggle-metric-live-icon {
+    display: inline-block;
+    vertical-align: top;
+    background-image: url('../assets/icons/bolt-solid.svg');
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 19px;
+    width: 19px;
+    margin: 17px 0 0 5px;
 }

package/src/sass/includes/_as_navs.scss

@@ -141,7 +141,7 @@
 
   .toggle-multi-tier-sidenav-logo {
     max-width: 7rem;
-    margin: 1rem 0 2rem 0.6rem;
+    margin: 2rem 0 2rem 0.6rem;
   }
 
   .toggle-multi-tier-sidenav-user-icon {
@@ -273,12 +273,11 @@
     .toggle-multi-tier-sidenav-item {
       list-style: none;
       font-family: $toggle-font-family;
-      font-size: 1rem;
-      font-weight: bold !important;
+      font-size: .9rem;
       padding-bottom: 0.25rem;
 
       a, span{
-        font-weight: bold !important;
+        font-weight: 400 !important;
       }
 
       &.active {
@@ -522,7 +521,16 @@
                   animation: tilt-shake 0.4s;
                   background-image: url("../assets/icons/airship-feedback-hover.svg");
                 }
+        &.airship-flight-assist-icon a::before,
+        &.airship-flight-assist-icon span::before {
+          background-image: url("../assets/icons/airship-flight-assist-icon.svg");
+        }
 
+                &.airship-flight-assist-icon a:hover::before,
+                &.airship-flight-assist-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-flight-assist-icon.svg");
+                }
       }
     }
 
@@ -550,8 +558,7 @@
     li {
       a, span {
         padding-left: .8rem;
-        font-size: $toggle-font-size-regular;
-        font-weight: bold;
+        font-size: 0.9rem;
       }
     }
     
@@ -562,7 +569,7 @@
       
       li {
         a, span {
-          font-size: 0.8rem;
+          font-size: 0.75rem;
           font-weight: normal;
         }
       }

package/src/sass/includes/_as_tooltips.scss

@@ -0,0 +1,43 @@
+.toggle-tooltip {
+    position: relative;
+    display: inline-block;
+    height: 17px;
+    width: 17px;
+    background-color: #768CA2;
+    border-radius: 50%;
+    color: #FFFFFF;
+    cursor: pointer;
+    text-align: center;
+    font-family: Palatino;
+    line-height: 1rem;
+}
+
+.toggle-tooltip-i {
+    margin: 2px 0 0 0;
+    font-size: 13px;
+}
+
+.toggle-tooltip-text {
+    @include toggle-global-font-config;
+}
+  
+.toggle-tooltip .toggle-tooltip-text {
+    visibility: hidden;
+    width: 160px;
+    background-color: #000;
+    color: #fff;
+    text-align: center;
+    padding: 8px 12px;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+}
+
+.toggle-tooltip:hover .toggle-tooltip-text {
+    visibility: visible;
+}
+
+.toggle-tooltip .toggle-tooltip-text {
+    top: -5px;
+    left: 105%;
+}

package/src/sass/includes/_as_variables.scss

@@ -64,7 +64,7 @@ $booster-test-colour-dark:#008ba4;
 
 $booster-feedback-colour-light:#FFCB27;
 $booster-feedback-colour-med:#FFCB27;
-$booster-feedback-colour-dark:#FFCB27;
+$booster-feedback-colour-dark:black;
 
 /* metrics */
 $toggle-metric-label-blue: #477EF6;

package/src/sass/main.scss

@@ -23,3 +23,4 @@
 @import "./includes/_as_boosters.scss";
 @import "./includes/_as_cards.scss";
 @import "./includes/_as_carousels.scss";
+@import "./includes/_as_tooltips.scss";