web/satellite: remove uses of v-html

Change-Id: Ief9d8af327c02212a6c138773af9f1dc8028a5b6

web/satellite/.eslintrc.js

@@ -36,8 +36,6 @@ module.exports = {
         "vue/max-attributes-per-line": ["off"],
         "vue/singleline-html-element-content-newline": ["off"],
 
-        "vue/no-v-html": ["off"], // needs a dedicated fix
-
         "vue/block-lang": ["error", {"script": {"lang": "ts"}}],
         "vue/html-button-has-type": ["error"],
         "vue/no-unused-properties": ["warn"],

web/satellite/src/components/account/billing/depositAndBillingHistory/PaymentsItem.vue

@@ -26,7 +26,9 @@
                 of <b>{{ billingItem.quantity.total.toFixed(2) }}</b>
             </span>
         </p>
-        <p class="container__item download" v-html="billingItem.downloadLinkHtml()" />
+        <p class="container__item download">
+            <a v-if="billingItem.link" class="download-link" target="_blank" :href="billingItem.link">{{ billingItem.label }}</a>
+        </p>
     </div>
 </template>
 

web/satellite/src/components/notifications/NotificationItem.vue

@@ -4,7 +4,9 @@
 <template>
     <div :style="notification.style" class="notification-wrap" :class="{ active: isClassActive }" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
         <div class="notification-wrap__text-area">
-            <div class="notification-wrap__text-area__image" v-html="notification.imgSource" />
+            <div class="notification-wrap__text-area__image">
+                <component :is="notification.icon" />
+            </div>
             <p class="notification-wrap__text-area__message">{{ notification.message }}</p>
         </div>
         <div class="notification-wrap__buttons-group" @click="onCloseClick">

web/satellite/src/types/DelayedNotification.ts

@@ -1,9 +1,16 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { NOTIFICATION_IMAGES, NOTIFICATION_TYPES } from '@/utils/constants/notification';
+import Vue, {VueConstructor} from 'vue';
+
+import { NOTIFICATION_TYPES } from '@/utils/constants/notification';
 import { getId } from '@/utils/idGenerator';
 
+import SuccessIcon from "@/../static/images/notifications/success.svg";
+import NotificationIcon from "@/../static/images/notifications/notification.svg";
+import ErrorIcon from "@/../static/images/notifications/error.svg";
+import WarningIcon from "@/../static/images/notifications/warning.svg";
+
 export class DelayedNotification {
     private readonly successColor: string = '#DBF1D3';
     private readonly errorColor: string = '#FFD4D2';
@@ -19,7 +26,7 @@ export class DelayedNotification {
     public readonly type: string;
     public readonly message: string;
     public readonly style: { backgroundColor: string };
-    public readonly imgSource: string;
+    public readonly icon: VueConstructor<Vue>;
 
     constructor(callback: () => void, type: string, message: string) {
         this.callback = callback;
@@ -33,22 +40,22 @@ export class DelayedNotification {
         switch (this.type) {
         case NOTIFICATION_TYPES.SUCCESS:
             this.style = { backgroundColor: this.successColor };
-            this.imgSource = NOTIFICATION_IMAGES.SUCCESS;
+            this.icon = SuccessIcon;
             break;
 
         case NOTIFICATION_TYPES.ERROR:
             this.style = { backgroundColor: this.errorColor };
-            this.imgSource = NOTIFICATION_IMAGES.ERROR;
+            this.icon = ErrorIcon;
             break;
 
         case NOTIFICATION_TYPES.WARNING:
             this.style = { backgroundColor: this.warningColor };
-            this.imgSource = NOTIFICATION_IMAGES.WARNING;
+            this.icon = WarningIcon;
             break;
 
         default:
             this.style = { backgroundColor: this.infoColor };
-            this.imgSource = NOTIFICATION_IMAGES.NOTIFICATION;
+            this.icon = NotificationIcon;
             break;
         }
     }

web/satellite/src/types/payments.ts

@@ -172,14 +172,13 @@ export class PaymentsHistoryItem {
         return amount / 100;
     }
 
-    public downloadLinkHtml(): string {
+    public get label(): string {
-        if (!this.link) {
+        switch(this.type) {
-            return '';
+        case PaymentsHistoryItemType.Transaction:
+            return "Checkout"
+        default:
+            return "Invoice PDF"
         }
-
-        const downloadLabel = this.type === PaymentsHistoryItemType.Transaction ? 'Checkout' : 'Invoice PDF';
-
-        return `<a class="download-link" target="_blank" href="${this.link}">${downloadLabel}</a>`;
     }
 
     /**

web/satellite/src/utils/constants/notification.ts

@@ -1,29 +1,6 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-export const NOTIFICATION_IMAGES = {
-    NOTIFICATION: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect width="40" height="40" rx="10" fill="#2683FF"/>
-        <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/>
-    </svg>
-    `,
-    SUCCESS: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect width="40" height="40" rx="10" fill="#95D486"/>
-        <path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"/>
-    </svg>
-    `,
-    ERROR: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect width="40" height="40" rx="10" fill="#EB5757"/>
-        <path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"/>
-        <path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"/>
-    </svg>
-    `,
-    WARNING: `<svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M35.028 27.9606C34.5358 27.0512 34.0405 26.1403 33.5467 25.2262C32.628 23.5309 31.7108 21.8356 30.7936 20.1402C29.6921 18.109 28.5936 16.0746 27.4936 14.0434C26.4311 12.0825 25.3717 10.1247 24.3093 8.16544C23.528 6.7248 22.7499 5.28264 21.9686 3.84064C21.7577 3.45002 21.5467 3.0594 21.3358 2.67188C21.1171 2.26564 20.8858 1.875 20.5546 1.54376C19.3983 0.379681 17.4796 0.156241 16.089 1.03596C15.4921 1.41408 15.0609 1.95004 14.7296 2.56408C14.2218 3.5016 13.714 4.43908 13.2062 5.37972C12.2812 7.09064 11.3546 8.8016 10.4296 10.5125C9.31555 12.5547 8.21087 14.6017 7.10151 16.6485C6.05151 18.5892 4.99995 20.5266 3.94839 22.4689C3.17963 23.8908 2.40931 25.3096 1.63903 26.7313C1.4359 27.1063 1.23279 27.4813 1.02967 27.8563C0.745289 28.3844 0.521865 28.9188 0.451545 29.5282C0.253109 31.2501 1.45935 32.947 3.12655 33.3688C3.56719 33.4813 4.00155 33.486 4.44687 33.486H31.9469H31.9906C32.8969 33.4673 33.7563 33.1267 34.4203 32.5095C35.0609 31.9157 35.4359 31.1032 35.5422 30.2438C35.6437 29.4345 35.4094 28.6688 35.0281 27.961L35.028 27.9606ZM16.4372 10.9526C16.4372 10.0776 17.1528 9.42916 17.9997 9.39012C18.8434 9.35106 19.5621 10.137 19.5621 10.9526V21.9558C19.5621 22.8308 18.8465 23.4792 17.9997 23.5183C17.1559 23.5573 16.4372 22.7714 16.4372 21.9558V10.9526ZM17.9997 28.8402C17.1215 28.8402 16.409 28.1293 16.409 27.2496C16.409 26.3714 17.1199 25.6589 17.9997 25.6589C18.8778 25.6589 19.5903 26.3698 19.5903 27.2496C19.5903 28.1277 18.8778 28.8402 17.9997 28.8402Z" fill="#F4D638"/>
-    </svg>
-    `,
-};
-
 export const NOTIFICATION_TYPES = {
     SUCCESS: 'SUCCESS',
     NOTIFICATION: 'NOTIFICATION',

web/satellite/static/images/notifications/error.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="40" height="40" rx="10" fill="#EB5757"/>
+    <path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"/>
+    <path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"/>
+</svg>

web/satellite/static/images/notifications/notification.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="40" height="40" rx="10" fill="#2683FF"/>
+    <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/>
+</svg>

web/satellite/static/images/notifications/success.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="40" height="40" rx="10" fill="#95D486"/>
+    <path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"/>
+</svg>

web/satellite/static/images/notifications/warning.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M35.028 27.9606C34.5358 27.0512 34.0405 26.1403 33.5467 25.2262C32.628 23.5309 31.7108 21.8356 30.7936 20.1402C29.6921 18.109 28.5936 16.0746 27.4936 14.0434C26.4311 12.0825 25.3717 10.1247 24.3093 8.16544C23.528 6.7248 22.7499 5.28264 21.9686 3.84064C21.7577 3.45002 21.5467 3.0594 21.3358 2.67188C21.1171 2.26564 20.8858 1.875 20.5546 1.54376C19.3983 0.379681 17.4796 0.156241 16.089 1.03596C15.4921 1.41408 15.0609 1.95004 14.7296 2.56408C14.2218 3.5016 13.714 4.43908 13.2062 5.37972C12.2812 7.09064 11.3546 8.8016 10.4296 10.5125C9.31555 12.5547 8.21087 14.6017 7.10151 16.6485C6.05151 18.5892 4.99995 20.5266 3.94839 22.4689C3.17963 23.8908 2.40931 25.3096 1.63903 26.7313C1.4359 27.1063 1.23279 27.4813 1.02967 27.8563C0.745289 28.3844 0.521865 28.9188 0.451545 29.5282C0.253109 31.2501 1.45935 32.947 3.12655 33.3688C3.56719 33.4813 4.00155 33.486 4.44687 33.486H31.9469H31.9906C32.8969 33.4673 33.7563 33.1267 34.4203 32.5095C35.0609 31.9157 35.4359 31.1032 35.5422 30.2438C35.6437 29.4345 35.4094 28.6688 35.0281 27.961L35.028 27.9606ZM16.4372 10.9526C16.4372 10.0776 17.1528 9.42916 17.9997 9.39012C18.8434 9.35106 19.5621 10.137 19.5621 10.9526V21.9558C19.5621 22.8308 18.8465 23.4792 17.9997 23.5183C17.1559 23.5573 16.4372 22.7714 16.4372 21.9558V10.9526ZM17.9997 28.8402C17.1215 28.8402 16.409 28.1293 16.409 27.2496C16.409 26.3714 17.1199 25.6589 17.9997 25.6589C18.8778 25.6589 19.5903 26.3698 19.5903 27.2496C19.5903 28.1277 18.8778 28.8402 17.9997 28.8402Z" fill="#F4D638"/>
+</svg>

web/satellite/tests/unit/account/billing/depositAndBillingHistory/__snapshots__/PaymentsItem.spec.ts.snap

@@ -14,7 +14,7 @@ exports[`PaymentsItem renders correctly if charge 1`] = `
             </span></b>
     <!---->
   </p>
-  <p class="container__item download"><a class="download-link" target="_blank" href="test">Invoice PDF</a></p>
+  <p class="container__item download"><a target="_blank" href="test" class="download-link">Invoice PDF</a></p>
 </div>
 `;
 
@@ -32,7 +32,7 @@ exports[`PaymentsItem renders correctly if invoice 1`] = `
             </span></b>
     <!---->
   </p>
-  <p class="container__item download"><a class="download-link" target="_blank" href="test">Invoice PDF</a></p>
+  <p class="container__item download"><a target="_blank" href="test" class="download-link">Invoice PDF</a></p>
 </div>
 `;
 
@@ -49,6 +49,6 @@ exports[`PaymentsItem renders correctly if transaction 1`] = `
                 5.00
             </span></b> <span>
             of <b>5.00</b></span></p>
-  <p class="container__item download"><a class="download-link" target="_blank" href="test">Checkout</a></p>
+  <p class="container__item download"><a target="_blank" href="test" class="download-link">Checkout</a></p>
 </div>
 `;

web/satellite/tests/unit/notifications/NotificationItem.spec.ts

@@ -10,7 +10,7 @@ import { makeNotificationsModule } from '@/store/modules/notifications';
 import { DelayedNotification } from '@/types/DelayedNotification';
 import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
 import { NOTIFICATION_TYPES } from '@/utils/constants/notification';
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
 
 const localVue = createLocalVue();
 
@@ -28,7 +28,7 @@ const store = new Vuex.Store(notificationModule);
 describe('NotificationItem', () => {
 
     it('renders correctly', () => {
-        const wrapper = shallowMount(NotificationItem);
+        const wrapper = mount(NotificationItem);
 
         expect(wrapper).toMatchSnapshot();
     });
@@ -102,7 +102,7 @@ describe('NotificationItem', () => {
     });
 
     it('trigger pause correctly', () => {
-        const wrapper = shallowMount(NotificationItem, { store, localVue });
+        const wrapper = mount(NotificationItem, { store, localVue });
 
         wrapper.find('.notification-wrap').trigger('mouseover');
 
@@ -110,7 +110,7 @@ describe('NotificationItem', () => {
     });
 
     it('trigger resume correctly', () => {
-        const wrapper = shallowMount(NotificationItem, { store, localVue });
+        const wrapper = mount(NotificationItem, { store, localVue });
 
         wrapper.find('.notification-wrap').trigger('mouseover');
         wrapper.find('.notification-wrap').trigger('mouseleave');
@@ -119,7 +119,7 @@ describe('NotificationItem', () => {
     });
 
     it('trigger delete correctly', () => {
-        const wrapper = shallowMount(NotificationItem, { store, localVue });
+        const wrapper = mount(NotificationItem, { store, localVue });
 
         wrapper.find('.notification-wrap__buttons-group').trigger('click');
 

web/satellite/tests/unit/notifications/__snapshots__/NotificationArea.spec.ts.snap

@@ -9,8 +9,7 @@ exports[`NotificationArea.vue renders correctly with notification 1`] = `
       <div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect width="40" height="40" rx="10" fill="#95D486"></rect>
           <path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"></path>
-        </svg>
+        </svg></div>
-      </div>
       <p class="notification-wrap__text-area__message">testMessage</p>
     </div>
     <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
@@ -21,8 +20,7 @@ exports[`NotificationArea.vue renders correctly with notification 1`] = `
           <rect width="40" height="40" rx="10" fill="#EB5757"></rect>
           <path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"></path>
           <path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"></path>
-        </svg>
+        </svg></div>
-      </div>
       <p class="notification-wrap__text-area__message">testMessage</p>
     </div>
     <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
@@ -31,8 +29,7 @@ exports[`NotificationArea.vue renders correctly with notification 1`] = `
     <div class="notification-wrap__text-area">
       <div class="notification-wrap__text-area__image"><svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M35.028 27.9606C34.5358 27.0512 34.0405 26.1403 33.5467 25.2262C32.628 23.5309 31.7108 21.8356 30.7936 20.1402C29.6921 18.109 28.5936 16.0746 27.4936 14.0434C26.4311 12.0825 25.3717 10.1247 24.3093 8.16544C23.528 6.7248 22.7499 5.28264 21.9686 3.84064C21.7577 3.45002 21.5467 3.0594 21.3358 2.67188C21.1171 2.26564 20.8858 1.875 20.5546 1.54376C19.3983 0.379681 17.4796 0.156241 16.089 1.03596C15.4921 1.41408 15.0609 1.95004 14.7296 2.56408C14.2218 3.5016 13.714 4.43908 13.2062 5.37972C12.2812 7.09064 11.3546 8.8016 10.4296 10.5125C9.31555 12.5547 8.21087 14.6017 7.10151 16.6485C6.05151 18.5892 4.99995 20.5266 3.94839 22.4689C3.17963 23.8908 2.40931 25.3096 1.63903 26.7313C1.4359 27.1063 1.23279 27.4813 1.02967 27.8563C0.745289 28.3844 0.521865 28.9188 0.451545 29.5282C0.253109 31.2501 1.45935 32.947 3.12655 33.3688C3.56719 33.4813 4.00155 33.486 4.44687 33.486H31.9469H31.9906C32.8969 33.4673 33.7563 33.1267 34.4203 32.5095C35.0609 31.9157 35.4359 31.1032 35.5422 30.2438C35.6437 29.4345 35.4094 28.6688 35.0281 27.961L35.028 27.9606ZM16.4372 10.9526C16.4372 10.0776 17.1528 9.42916 17.9997 9.39012C18.8434 9.35106 19.5621 10.137 19.5621 10.9526V21.9558C19.5621 22.8308 18.8465 23.4792 17.9997 23.5183C17.1559 23.5573 16.4372 22.7714 16.4372 21.9558V10.9526ZM17.9997 28.8402C17.1215 28.8402 16.409 28.1293 16.409 27.2496C16.409 26.3714 17.1199 25.6589 17.9997 25.6589C18.8778 25.6589 19.5903 26.3698 19.5903 27.2496C19.5903 28.1277 18.8778 28.8402 17.9997 28.8402Z" fill="#F4D638"></path>
-        </svg>
+        </svg></div>
-      </div>
       <p class="notification-wrap__text-area__message">testMessage</p>
     </div>
     <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
@@ -42,8 +39,7 @@ exports[`NotificationArea.vue renders correctly with notification 1`] = `
       <div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect width="40" height="40" rx="10" fill="#2683FF"></rect>
           <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path>
-        </svg>
+        </svg></div>
-      </div>
       <p class="notification-wrap__text-area__message">testMessage</p>
     </div>
     <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>

web/satellite/tests/unit/notifications/__snapshots__/NotificationItem.spec.ts.snap

@@ -6,11 +6,10 @@ exports[`NotificationItem renders correctly 1`] = `
     <div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="40" height="40" rx="10" fill="#2683FF"></rect>
         <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path>
-      </svg>
+      </svg></div>
-    </div>
     <p class="notification-wrap__text-area__message"></p>
   </div>
-  <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><closeicon-stub></closeicon-stub></span></div>
+  <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
 </div>
 `;
 
@@ -21,8 +20,7 @@ exports[`NotificationItem renders correctly with error props 1`] = `
         <rect width="40" height="40" rx="10" fill="#EB5757"></rect>
         <path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"></path>
         <path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"></path>
-      </svg>
+      </svg></div>
-    </div>
     <p class="notification-wrap__text-area__message">testMessage</p>
   </div>
   <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
@@ -35,8 +33,7 @@ exports[`NotificationItem renders correctly with notification props 1`] = `
     <div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="40" height="40" rx="10" fill="#2683FF"></rect>
         <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path>
-      </svg>
+      </svg></div>
-    </div>
     <p class="notification-wrap__text-area__message">testMessage</p>
   </div>
   <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
@@ -49,8 +46,7 @@ exports[`NotificationItem renders correctly with success props 1`] = `
     <div class="notification-wrap__text-area__image"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="40" height="40" rx="10" fill="#95D486"></rect>
         <path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"></path>
-      </svg>
+      </svg></div>
-    </div>
     <p class="notification-wrap__text-area__message">testMessage</p>
   </div>
   <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>
@@ -62,8 +58,7 @@ exports[`NotificationItem renders correctly with warning props 1`] = `
   <div class="notification-wrap__text-area">
     <div class="notification-wrap__text-area__image"><svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M35.028 27.9606C34.5358 27.0512 34.0405 26.1403 33.5467 25.2262C32.628 23.5309 31.7108 21.8356 30.7936 20.1402C29.6921 18.109 28.5936 16.0746 27.4936 14.0434C26.4311 12.0825 25.3717 10.1247 24.3093 8.16544C23.528 6.7248 22.7499 5.28264 21.9686 3.84064C21.7577 3.45002 21.5467 3.0594 21.3358 2.67188C21.1171 2.26564 20.8858 1.875 20.5546 1.54376C19.3983 0.379681 17.4796 0.156241 16.089 1.03596C15.4921 1.41408 15.0609 1.95004 14.7296 2.56408C14.2218 3.5016 13.714 4.43908 13.2062 5.37972C12.2812 7.09064 11.3546 8.8016 10.4296 10.5125C9.31555 12.5547 8.21087 14.6017 7.10151 16.6485C6.05151 18.5892 4.99995 20.5266 3.94839 22.4689C3.17963 23.8908 2.40931 25.3096 1.63903 26.7313C1.4359 27.1063 1.23279 27.4813 1.02967 27.8563C0.745289 28.3844 0.521865 28.9188 0.451545 29.5282C0.253109 31.2501 1.45935 32.947 3.12655 33.3688C3.56719 33.4813 4.00155 33.486 4.44687 33.486H31.9469H31.9906C32.8969 33.4673 33.7563 33.1267 34.4203 32.5095C35.0609 31.9157 35.4359 31.1032 35.5422 30.2438C35.6437 29.4345 35.4094 28.6688 35.0281 27.961L35.028 27.9606ZM16.4372 10.9526C16.4372 10.0776 17.1528 9.42916 17.9997 9.39012C18.8434 9.35106 19.5621 10.137 19.5621 10.9526V21.9558C19.5621 22.8308 18.8465 23.4792 17.9997 23.5183C17.1559 23.5573 16.4372 22.7714 16.4372 21.9558V10.9526ZM17.9997 28.8402C17.1215 28.8402 16.409 28.1293 16.409 27.2496C16.409 26.3714 17.1199 25.6589 17.9997 25.6589C18.8778 25.6589 19.5903 26.3698 19.5903 27.2496C19.5903 28.1277 18.8778 28.8402 17.9997 28.8402Z" fill="#F4D638"></path>
-      </svg>
+      </svg></div>
-    </div>
     <p class="notification-wrap__text-area__message">testMessage</p>
   </div>
   <div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path></svg></span></div>