toggle-components-library 1.34.0-beta.6 → 1.34.0-beta.7

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.34.0-beta.6",
+  "version": "1.34.0-beta.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3957,6 +3957,16 @@
             "@types/node": "*"
           }
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "array-union": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -3995,6 +4005,34 @@
             }
           }
         },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "dir-glob": {
           "version": "2.2.2",
           "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
@@ -4078,6 +4116,13 @@
             "slash": "^2.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
         "html-webpack-plugin": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -4267,6 +4312,16 @@
           "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "1.4.5",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
@@ -4323,6 +4378,39 @@
             "mime": "^2.4.4",
             "schema-utils": "^2.5.0"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "json5": {
+              "version": "2.2.3",
+              "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+              "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+              "dev": true,
+              "optional": true
+            },
+            "loader-utils": {
+              "version": "2.0.4",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+              "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+              }
+            }
+          }
         }
       }
     },
@@ -18582,75 +18670,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-moment": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",

package/package.json

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

package/src/assets/icons/airship-feedback-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
+    <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-feedback.svg

@@ -0,0 +1,10 @@
+<svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
+    <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/components/boosters/ToggleBoosterButton.vue

@@ -1,25 +1,19 @@
 <template>
-  <div :class="[{'toggle-booster-button-tooltip-container': !!tooltipText }]">
-    <button :class="['toggle-booster-button-container', boosterType, {'toggle-booster-button-disabled': disabled}]" :disabled="disabled" @click="click">
-  
-      <img
-        :src="logo.src"
-        :alt="logo.alt"
-        class="toggle-booster-button-logo"
-      >
-  
-      <div :class="['toggle-booster-button', boosterType]" >
-        <p class="plus">+</p>
-        <div v-if="buttonText" class="toggle-booster-button-button-text">
-          <slot>{{buttonText}}</slot>
-        </div>
-      </div>
-    </button>
+  <button :class="['toggle-booster-button-container', boosterType]" @click="click">
+
+    <img
+      :src="logo.src"
+      :alt="logo.alt"
+      class="toggle-booster-button-logo"
+    >
 
-    <div class="toggle-booster-button-tooltip-text" v-if="tooltipText">
-      <div >{{ tooltipText }}</div>
+    <div :class="['toggle-booster-button', boosterType]" >
+      <p class="plus">+</p>
+      <div v-if="buttonText" class="toggle-booster-button-button-text">
+        <slot>{{buttonText}}</slot>
+      </div>
     </div>
-  </div>
+  </button>
 </template>
   
   <script>
@@ -42,14 +36,6 @@
         type: Object,
         required: true,
       },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      tooltipText: {
-        type: String,
-        required: false
-      }
     },
     methods: {
       click() {

package/src/components/buttons/ToggleButton.vue

@@ -1,29 +1,22 @@
 <template>
-    <div :class="[ 'toggle-button-container', {'toggle-button-container-mini':isMini, 'toggle-button-tooltip-container': !!tooltipText }]">
+    <div :class="[ 'toggle-button-container', {'toggle-button-container-mini':isMini}]">
         <button
             v-if="!$slots.default"
             :type="type"
-            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading, 'toggle-button-subscribed': !subscribed, 'toggle-button-booster-badge': boosterImageProperties}]"
+            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading, 'toggle-button-subscribed': !subscribed}]"
             :disabled="(loading || disabled)"
             @click="click"
             >
             <div class="toggle-button-loader" v-if="loading" ></div>
             <span v-html="buttonText" v-if="!isMini"/>
-
-            <div v-if="boosterImageProperties" :class="['toggle-button-booster-image-badge', {'shimmer': boosterShimmer && !disabled, 'toggle-button-loading': loading, 'toggle-button-disabled': disabled}]" :style="'background-color: ' + boosterImageProperties.bgColor">
-              <img class="toggle-button-booster-image" :src="boosterImageProperties.src" :alt="boosterImageProperties.alt">
-            </div>
         </button>
         <div v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled, 'toggle-button-subscribed': !subscribed}]">
-          <div class="toggle-button-loader" v-if="loading" ></div>
-          <div class="toggle-button-a-border" />
-          <!--
-              @slot String of button text
-          -->
-          <slot>{{buttonText}}</slot>
-        </div>
-        <div class="toggle-button-tooltip-text" v-if="tooltipText">
-          <div >{{ tooltipText }}</div>
+            <div class="toggle-button-loader" v-if="loading" ></div>
+            <div class="toggle-button-a-border" />
+            <!-- 
+                @slot String of button text
+            -->
+            <slot>{{buttonText}}</slot>
         </div>
     </div>
 </template>
@@ -74,33 +67,10 @@ export default {
             type:String,
             default:'confirm'
         },
-        /* 
-        * Grey out button if booster not enabled
-        */
+        /* Grey out button if booster not enabled*/
         subscribed: {
           type: Boolean,
           default: true
-        },
-        /*
-        * Booster badge image properties, image, alt text, background colour
-        */
-        boosterImageProperties: {
-          type: Object,
-          required: false,
-        },
-        /*
-        * Turns the shimmer animation on and off for the booster badge
-        */
-        boosterShimmer: {
-          type: Boolean,
-          default: true
-        },
-        /*
-        * Text displayed in tooltip
-        */
-        tooltipText: {
-          type: String,
-          required: false
         }
     },
     computed: {

package/src/components/buttons/ToggleMetricsButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <button :class="['toggle-metrics-button', buttonStyle]" @click="click">
-        <div :class="icon"></div>
+    <button :class="['toggle-metrics-button', buttonStyle, 'toggle-metrics-button-' + size]" :style="styles" @click="click">
+        <div :class="icon" :style="'background-color:' + styles.color"></div>
         <slot>{{buttonText}}</slot>
     </button>
 </template>
@@ -20,6 +20,22 @@
         icon: {
           type: String,
           required: true,
+          validator: function(value) {
+            return ["heatmap-icon", "email-icon", "contacts-icon"].indexOf(value) !== -1;
+          }
+        },
+        size: {
+          type: String,
+          default: "medium",
+          required: false,
+          validator: function(value) {
+            return ["small", "medium", "large"].indexOf(value) !== -1;
+          }
+        },
+        styles: {
+          type: Object,
+          default: () => ({}),
+          required: false,
         },
       },
       methods: {

package/src/components/cards/ToggleCommentCard.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="toggle-comment-card">
+        <div class="toggle-comment-card-info" :style="{ backgroundColor:  cardColor}">
+            <div class="toggle-comment-card-text">
+                <p>"{{ comment }}"</p>
+            </div>
+            <div class="toggle-comment-card-name">
+                <ToggleMetricsButton 
+                buttonStyle="mini-contacts" 
+                :buttonText="name" 
+                icon="contacts-icon"
+                :styles="{ backgroundColor: 'transparent', borderColor: 'white', color: 'white'}"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import ToggleMetricsButton from '../buttons/ToggleMetricsButton.vue';
+    export default {
+        components:{ToggleMetricsButton},
+        props: {
+            cardIndex: {
+                type: Number,
+                required: true,
+            },
+            totalCards: {
+                type: Number,
+                required: true,
+            },
+            comment: {
+                type: String,
+                required: true
+            },
+            name: {
+                type: String,
+                required: true
+            }
+        },
+        computed: {
+            cardColor() {
+                // adjust colour palette below to change the Reward Cards colors
+                const colorPalette = [
+                    '#2c7da0',
+                    '#f3c570',
+                    '#8bbcbe',
+                    '#a0a789',
+                    '#cbae78',
+                    '#a284b6',
+                    '#d39999',
+                    '#9b7361',
+                    '#64aaa8',
+                    '#799194',
+                ];
+                
+                // pick random number to return random index of colourPalette
+                const paletteIndex = Math.floor(
+                    (this.cardIndex / this.totalCards) * colorPalette.length
+                );
+                return colorPalette[paletteIndex];
+            }
+        },
+    };
+</script>
+  
+  

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -2,7 +2,7 @@
     <div>
         <h3 class="toggle-metric metric-label">{{label}}</h3>
         <div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
-        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}</h1>
+        <h1 class="toggle-metric metric-value" :class="{ 'toggle-metric-score': score}" v-else>{{metricValue}} {{ symbol }}</h1>
     </div>
 </template>
 
@@ -27,7 +27,7 @@ export default {
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**
@@ -92,9 +92,10 @@ export default {
                     return this.value.toLocaleString();
 
             }
-        }
-
-       
+        },
+        score() {
+            return this.type === 'score';
+        },     
     }
 }
 

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -54,7 +54,7 @@ export default {
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**

package/src/components/tables/ToggleTableRow.vue

@@ -1,23 +1,5 @@
 <template>
-    <tr :class="['toggle-tablee-tr',{'tr-disabled':disabled }]" @click="handleClick" >
+    <tr class="toggle-tablee-tr" @click="$emit('click')" >
         <slot></slot>
     </tr>
-</template>
-
-<script>
-export default {
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    handleClick() {
-      if(!this.disabled) {
-        this.$emit('click')
-      }
-    }
-  }
-}
-</script>
+</template>

package/src/index.js

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

package/src/sass/includes/_as_boosters.scss

@@ -219,37 +219,3 @@ margin:1rem
   
   }
 
-.toggle-booster-button-disabled {
-    opacity: 0.3;
-}
-
-/* Tooltip container */
-.toggle-booster-button-tooltip-container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-}
-
-/* Tooltip text */
-.toggle-booster-button-tooltip-container .toggle-booster-button-tooltip-text {
-    visibility: hidden;
-    width: 120px;
-    height: fit-content;
-    background-color: black;
-    color: #fff;
-    text-align: center;
-    padding: 5px;
-    border-radius: 6px;
-    position: absolute;
-    z-index: 999;
-    top: 100%;
-}
-
-.toggle-booster-button-tooltip-text {
-    font-family: $toggle-font-family;
-    padding: 10px;
-}
-
-.toggle-booster-button-tooltip-container:hover .toggle-booster-button-tooltip-text {
-    visibility: visible;
-}