web/satellite: Upgrade to Vue 2.7

2.7 natively supports the Composition API, which makes transitioning to
Vue 3 easier to do step-by-step.

Converted ::v-deep selectors to :deep() to fix new build warnings.

Change-Id: I21b34e10f55eaf9dcdad87729f02f3b0d723b6b1

web/satellite/package.json

@@ -36,7 +36,7 @@
     "stream-browserify": "3.0.0",
     "stripe": "8.215.0",
     "util": "0.12.4",
-    "vue": "2.6.14",
+    "vue": "2.7.10",
     "vue-chartjs": "3.5.1",
     "vue-class-component": "7.2.6",
     "vue-clipboard2": "0.3.3",
@@ -86,7 +86,7 @@
     "typescript": "4.6.4",
     "vue-sanitize": "0.2.2",
     "vue-svg-loader": "0.17.0-beta.2",
-    "vue-template-compiler": "2.6.14",
+    "vue-template-compiler": "2.7.10",
     "webpack-bundle-analyzer": "4.5.0"
   },
   "postcss": {

web/satellite/src/components/accessGrants/AccessGrantsItem2.vue

@@ -105,7 +105,7 @@ export default class AccessGrantsItem extends Resizable {
                         background-color: #f4f5f7;
                         font-family: 'font_medium', sans-serif;
 
-                        svg ::v-deep path {
+                        svg :deep(path) {
                             fill: #0068dc;
                             stroke: #0068dc;
                         }

web/satellite/src/components/accessGrants/modals/CreateFormModal.vue

@@ -618,7 +618,7 @@ export default class CreateFormModal extends Vue {
                 justify-content: flex-start;
                 margin-top: 16px;
 
-                & ::v-deep .container:first-of-type {
+                & :deep(.container:first-of-type) {
                     margin-right: 8px;
                 }
 
@@ -633,13 +633,13 @@ export default class CreateFormModal extends Vue {
         }
     }
 
-    ::v-deep .buckets-selection {
+    :deep(.buckets-selection) {
         margin-left: 0;
         height: 40px;
         border: 1px solid #c8d3de;
     }
 
-    ::v-deep .buckets-selection__toggle-container {
+    :deep(.buckets-selection__toggle-container) {
         padding: 10px 20px;
     }
 

web/satellite/src/components/accessGrants/modals/EncryptFormModal.vue

@@ -237,15 +237,15 @@ export default class EncryptFormModal extends Vue {
 .button-icon {
     margin-right: 5px;
 
-    ::v-deep path,
+    :deep(path),
-    ::v-deep rect {
+    :deep(rect) {
         stroke: white;
     }
 
     &.active {
 
-        ::v-deep path,
+        :deep(path),
-        ::v-deep rect {
+        :deep(rect) {
             stroke: #56606d;
         }
     }
@@ -412,11 +412,11 @@ export default class EncryptFormModal extends Vue {
 
                         &.selected {
 
-                            ::v-deep circle {
+                            :deep(circle) {
                                 fill: #e6edf7 !important;
                             }
 
-                            ::v-deep path {
+                            :deep(path) {
                                 fill: #003dc1 !important;
                             }
                         }
@@ -469,7 +469,7 @@ export default class EncryptFormModal extends Vue {
             justify-content: flex-start;
             margin-top: 16px;
 
-            & ::v-deep .container:first-of-type {
+            & :deep(.container:first-of-type) {
                 margin-right: 8px;
             }
 

web/satellite/src/components/accessGrants/modals/GrantCreatedModal.vue

@@ -462,7 +462,7 @@ export default class GrantCreatedModal extends Vue {
                 justify-content: flex-start;
                 margin-top: 16px;
 
-                & ::v-deep .container:first-of-type {
+                & :deep(.container:first-of-type) {
                     margin-right: 8px;
                 }
 

web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue

@@ -476,24 +476,21 @@ export default class CreatePassphraseStep extends Vue {
         color: red;
     }
 
-    ::v-deep .label-container {
+    :deep(.label-container__main) {
+        margin-bottom: 10px;
+    }
 
-        &__main {
+    :deep(.label-container__main__label) {
-            margin-bottom: 10px;
+        margin: 0;
+        font-size: 14px;
+        line-height: 19px;
+        color: #7c8794;
+        font-family: 'font_bold', sans-serif;
+    }
 
-            &__label {
+    :deep(.label-container__main__error) {
-                margin: 0;
+        margin: 0 0 0 10px;
-                font-size: 14px;
+        font-size: 14px;
-                line-height: 19px;
+        line-height: 19px;
-                color: #7c8794;
-                font-family: 'font_bold', sans-serif;
-            }
-
-            &__error {
-                margin: 0 0 0 10px;
-                font-size: 14px;
-                line-height: 19px;
-            }
-        }
     }
 </style>

web/satellite/src/components/accessGrants/steps/GatewayStep.vue

@@ -376,7 +376,7 @@ export default class GatewayStep extends Vue {
         border-radius: 6px;
     }
 
-    ::v-deep .info__box__message {
+    :deep(.info__box__message) {
         min-width: 300px;
     }
 </style>

web/satellite/src/components/account/billing/billingTabs/Overview.vue

@@ -242,7 +242,7 @@ export default class BillingArea extends Vue {
 
             &__main-icon {
 
-                ::v-deep g {
+                :deep(g) {
                     filter: none;
                 }
             }

web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue

@@ -77,7 +77,7 @@
                 </div>
             </div>
         </div>
-        
+
         <div v-if="isRemovePaymentMethodsModalOpen || isChangeDefaultPaymentModalOpen" class="edit_payment_method">
             <div v-if="isChangeDefaultPaymentModalOpen" class="change-default-modal-container">
                 <CreditCardImage class="card-icon-default" />
@@ -85,7 +85,7 @@
                     <CloseCrossIcon class="close-icon" />
                 </div>
                 <div class="edit_payment_method__header">Select Default Card</div>
-                <form v-for="card in creditCards" :key="card.id"> 
+                <form v-for="card in creditCards" :key="card.id">
                     <div class="change-default-input-container">
                         <AmericanExpressIcon v-if="card.brand === 'amex' " class="cardIcons" />
                         <DiscoverIcon v-if="card.brand === 'discover' " class="cardIcons" />
@@ -94,14 +94,14 @@
                         <UnionPayIcon v-if="card.brand === 'unionpay' " class="cardIcons union-icon" />
                         <VisaIcon v-if="card.brand === 'visa' " class="cardIcons" />
                         <DinersIcon v-if="card.brand === 'diners' " class="cardIcons diners-icon" />
-                        <img src="@/../static/images/payments/cardStars.png" alt="Hidden card digits stars image" class="payment-methods-container__card-container__info-area__info-container__image"> 
+                        <img src="@/../static/images/payments/cardStars.png" alt="Hidden card digits stars image" class="payment-methods-container__card-container__info-area__info-container__image">
                         {{ card.last4 }}
-                        <input 
+                        <input
-                            :id="card.id" 
+                            :id="card.id"
-                            v-model="defaultCreditCardSelection"  
+                            v-model="defaultCreditCardSelection"
-                            :value="card.id" 
+                            :value="card.id"
-                            class="change-default-input" 
+                            class="change-default-input"
-                            type="radio" 
+                            type="radio"
                             name="defaultCreditCardSelection"
                         >
                     </div>
@@ -121,8 +121,8 @@
                 <div class="edit_payment_method__header-change-default" @click="changeDefault">
                     <a class="edit-card-text">Edit default card -></a>
                 </div>
-                <div 
+                <div
-                    class="remove-card-button" 
+                    class="remove-card-button"
                     @click="removePaymentMethod"
                     @mouseover="deleteHover = true"
                     @mouseleave="deleteHover = false"
@@ -151,7 +151,7 @@
                         </p>
                     </div>
                     <div class="pagination__right-container">
-                        <div    
+                        <div
                             v-if="transactionCount > 0"
                             class="pagination__right-container__count"
                         >
@@ -162,7 +162,7 @@
                                 {{ paginationLocation.start + 1 }} - {{ transactionCount }} of {{ transactionCount }}
                             </span>
                         </div>
-                        <div 
+                        <div
                             v-if="transactionCount > 10"
                             class="pagination__right-container__buttons"
                         >
@@ -171,7 +171,7 @@
                                 @click="paginationController(-10)"
                             />
                             <ArrowIcon
-                                v-if="paginationLocation.end < transactionCount - 1"    
+                                v-if="paginationLocation.end < transactionCount - 1"
                                 class="pagination__right-container__buttons__right"
                                 @click="paginationController(10)"
                             />
@@ -428,7 +428,7 @@ export default class PaymentMethods extends Vue {
         this.isAddingPayment = true;
     }
 
-    public removePaymentMethodHandler(creditCard) {   
+    public removePaymentMethodHandler(creditCard) {
         this.cardBeingEdited = creditCard;
         this.isRemovePaymentMethodsModalOpen = true;
     }
@@ -527,7 +527,7 @@ export default class PaymentMethods extends Vue {
 $flex: flex;
 $align: center;
 
-::v-deep .loader {
+:deep(.loader) {
     width: auto;
     padding: 63px 114px;
 }
@@ -566,7 +566,7 @@ $align: center;
 
 .red-trash {
 
-    ::v-deep path {
+    :deep(path) {
         fill: #ac1a00;
     }
 }

web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue

@@ -267,24 +267,24 @@ export default class AddTokenCardNative extends Vue {
         }
     }
 
-    ::v-deep .info__box {
+    :deep(.info__box) {
         transform: rotate(-180deg);
         top: calc(100% - 100px);
         left: calc(100% - 123px);
         filter: none;
+    }
 
-        &__message {
+    :deep(.info__box__message) {
-            padding: 8px 8px 13px;
+        padding: 8px 8px 13px;
-            width: 235px;
+        width: 235px;
-            background: #56606d;
+        background: #56606d;
-            border-radius: 4px;
+        border-radius: 4px;
-        }
+    }
 
-        &__arrow {
+    :deep(.info__box__arrow) {
-            width: 10px;
+        width: 10px;
-            height: 10px;
+        height: 10px;
-            background: #56606d;
+        background: #56606d;
-            margin-bottom: -3px;
+        margin-bottom: -3px;
-        }
     }
 </style>

web/satellite/src/components/browser/FileBrowser.vue

@@ -917,7 +917,7 @@ export default class FileBrowser extends Vue {
     transform: translateY(-50%);
     margin: unset;
 
-    ::v-deep path {
+    :deep(path) {
         fill: white;
     }
 }

web/satellite/src/components/common/GeneratePassphrase.vue

@@ -402,7 +402,7 @@ export default class GeneratePassphrase extends Vue {
         fill: #0149ff;
     }
 
-    ::v-deep .info__box__message {
+    :deep(.info__box__message) {
         min-width: 440px;
     }
 </style>

web/satellite/src/components/common/RegistrationSuccess.vue

@@ -287,7 +287,7 @@ export default class RegistrationSuccess extends Vue {
             }
         }
 
-        ::v-deep .container {
+        :deep(.container) {
             width: 100% !important;
         }
     }

web/satellite/src/components/common/VButton.vue

@@ -235,8 +235,8 @@ export default class VButton extends Vue {
                 background-color: #2683ff !important;
                 border: 1px solid #2683ff !important;
 
-                ::v-deep path,
+                :deep(path),
-                ::v-deep rect {
+                :deep(rect) {
                     stroke: white;
                 }
 

web/satellite/src/components/common/VLoader.vue

@@ -42,7 +42,7 @@ export default class VLoader extends Vue {
         justify-content: center;
     }
 
-    .white ::v-deep path {
+    .white :deep(path) {
         fill: #fff;
     }
 </style>

web/satellite/src/components/common/VerticalArrows.vue

@@ -55,9 +55,9 @@ export default class VerticalArrows extends Vue {
     .active {
         opacity: 1;
 
-        ::v-deep path {
+        :deep(path) {
             fill: #2683ff !important;
         }
     }
 
-</style>
+</style>

web/satellite/src/components/modals/AddTeamMemberModal.vue

@@ -564,13 +564,13 @@ export default class AddTeamMemberModal extends Vue {
         }
     }
 
-    ::v-deep .container {
+    :deep(.container) {
         padding: 0 10px;
     }
 
     @media screen and (max-width: 500px) {
 
-        ::v-deep .container {
+        :deep(.container) {
             padding: 0;
         }
     }

web/satellite/src/components/modals/AddTokenFundsModal.vue

@@ -259,26 +259,26 @@ export default class AddTokenFundsModal extends Vue {
         }
     }
 
-    ::v-deep .info__box {
+    :deep(.info__box) {
         width: 214px;
         left: calc(50% - 107px);
         top: calc(100% - 80px);
         cursor: default;
         filter: none;
         transform: rotate(-180deg);
+    }
 
-        &__message {
+    :deep(.info__box__message) {
-            background: #56606d;
+        background: #56606d;
-            border-radius: 4px;
+        border-radius: 4px;
-            padding: 10px 8px;
+        padding: 10px 8px;
-            transform: rotate(-180deg);
+        transform: rotate(-180deg);
-        }
+    }
 
-        &__arrow {
+    :deep(.info__box__arrow) {
-            background: #56606d;
+        background: #56606d;
-            width: 10px;
+        width: 10px;
-            height: 10px;
+        height: 10px;
-            margin-bottom: -3px;
+        margin-bottom: -3px;
-        }
     }
 </style>

web/satellite/src/components/modals/ChangePasswordModal.vue

@@ -273,18 +273,18 @@ export default class ChangePasswordModal extends Vue {
 
     @media screen and (max-width: 600px) {
 
-        ::v-deep .password-strength-container {
+        :deep(.password-strength-container) {
             width: unset;
             height: unset;
+        }
 
-            &__header {
+        :deep(.password-strength-container__header) {
-                flex-direction: column;
+            flex-direction: column;
-                align-items: flex-start;
+            align-items: flex-start;
-            }
+        }
 
-            &__rule-area__rule {
+        :deep(.password-strength-container__rule-area__rule) {
-                text-align: left;
+            text-align: left;
-            }
         }
     }
 </style>

web/satellite/src/components/modals/CreateProjectModal.vue

@@ -271,7 +271,7 @@ export default class CreateProjectModal extends Vue {
 
     @media screen and (max-width: 550px) {
 
-        ::v-deep .add-label {
+        :deep(.add-label) {
             display: none;
         }
     }

web/satellite/src/components/navigation/AccountArea.vue

@@ -255,8 +255,8 @@ export default class AccountArea extends Vue {
                     color: #0149ff;
                 }
 
-                .account-area__wrap__arrow ::v-deep path,
+                .account-area__wrap__arrow :deep(path),
-                .account-area__wrap__left__icon ::v-deep path {
+                .account-area__wrap__left__icon :deep(path) {
                     fill: #0149ff;
                 }
             }
@@ -335,7 +335,7 @@ export default class AccountArea extends Vue {
                         color: #0149ff;
                     }
 
-                    ::v-deep path {
+                    :deep(path) {
                         fill: #0149ff;
                     }
                 }
@@ -351,8 +351,8 @@ export default class AccountArea extends Vue {
             font-family: 'font_bold', sans-serif;
         }
 
-        .account-area__wrap__arrow ::v-deep path,
+        .account-area__wrap__arrow :deep(path),
-        .account-area__wrap__left__icon ::v-deep path {
+        .account-area__wrap__left__icon :deep(path) {
             fill: #000;
         }
     }
@@ -365,8 +365,8 @@ export default class AccountArea extends Vue {
             color: #0149ff;
         }
 
-        .account-area__wrap__arrow ::v-deep path,
+        .account-area__wrap__arrow :deep(path),
-        .account-area__wrap__left__icon ::v-deep path {
+        .account-area__wrap__left__icon :deep(path) {
             fill: #0149ff;
         }
     }

web/satellite/src/components/navigation/MobileNavigation.vue

@@ -603,12 +603,12 @@ export default class MobileNavigation extends Vue {
     color: #091c45;
     font-family: 'font_bold', sans-serif;
 
-    ::v-deep path {
+    :deep(path) {
         fill: #000;
     }
 }
 
-::v-deep .dropdown-item {
+:deep(.dropdown-item) {
     display: flex;
     align-items: center;
     font-family: 'font_regular', sans-serif;
@@ -616,39 +616,39 @@ export default class MobileNavigation extends Vue {
     cursor: pointer;
     border-bottom: 1px solid #ebeef1;
     background: #fafafb;
-
-    &__icon {
-        max-width: 40px;
-        min-width: 40px;
-    }
-
-    &__text {
-        margin-left: 10px;
-
-        &__title {
-            font-family: 'font_bold', sans-serif;
-            font-size: 14px;
-            line-height: 22px;
-            color: #091c45;
-        }
-
-        &__label {
-            font-size: 12px;
-            line-height: 21px;
-            color: #091c45;
-        }
-    }
-
-    &:first-of-type {
-        border-radius: 8px 8px 0 0;
-    }
-
-    &:last-of-type {
-        border-radius: 0 0 8px 8px;
-    }
 }
 
-::v-deep .project-selection__dropdown {
+:deep(.dropdown-item__icon) {
+    max-width: 40px;
+    min-width: 40px;
+}
+
+:deep(.dropdown-item__text) {
+    margin-left: 10px;
+}
+
+:deep(.dropdown-item__text__title) {
+    font-family: 'font_bold', sans-serif;
+    font-size: 14px;
+    line-height: 22px;
+    color: #091c45;
+}
+
+:deep(.dropdown-item__text__label) {
+    font-size: 12px;
+    line-height: 21px;
+    color: #091c45;
+}
+
+:deep(.dropdown-item:first-of-type) {
+    border-radius: 8px 8px 0 0;
+}
+
+:deep(.dropdown-item:last-of-type) {
+    border-radius: 0 0 8px 8px;
+}
+
+:deep(.project-selection__dropdown) {
     all: unset !important;
     position: relative !important;
     display: flex;

web/satellite/src/components/navigation/NavigationArea.vue

@@ -369,7 +369,7 @@ export default class NavigationArea extends Vue {
                         background-color: #fafafb;
                         color: #0149ff;
 
-                        ::v-deep path {
+                        :deep(path) {
                             fill: #0149ff;
                         }
                     }
@@ -391,7 +391,7 @@ export default class NavigationArea extends Vue {
         color: #091c45;
         font-family: 'font_bold', sans-serif;
 
-        ::v-deep path {
+        :deep(path) {
             fill: #000;
         }
 
@@ -399,13 +399,13 @@ export default class NavigationArea extends Vue {
             color: #0149ff;
             border-color: #0149ff;
 
-            ::v-deep path {
+            :deep(path) {
                 fill: #0149ff;
             }
         }
     }
 
-    ::v-deep .dropdown-item {
+    :deep(.dropdown-item) {
         display: flex;
         align-items: center;
         font-family: 'font_regular', sans-serif;
@@ -413,45 +413,45 @@ export default class NavigationArea extends Vue {
         cursor: pointer;
         border-top: 1px solid #ebeef1;
         border-bottom: 1px solid #ebeef1;
+    }
 
-        &__icon {
+    :deep(.dropdown-item__icon) {
-            max-width: 40px;
+        max-width: 40px;
-            min-width: 40px;
+        min-width: 40px;
-        }
+    }
 
-        &__text {
+    :deep(.dropdown-item__text) {
-            margin-left: 10px;
+        margin-left: 10px;
+    }
 
-            &__title {
+    :deep(.dropdown-item__text__title) {
-                font-family: 'font_bold', sans-serif;
+        font-family: 'font_bold', sans-serif;
-                font-size: 14px;
+        font-size: 14px;
-                line-height: 22px;
+        line-height: 22px;
-                color: #091c45;
+        color: #091c45;
-            }
+    }
 
-            &__label {
+    :deep(.dropdown-item__text__label) {
-                font-size: 12px;
+        font-size: 12px;
-                line-height: 21px;
+        line-height: 21px;
-                color: #091c45;
+        color: #091c45;
-            }
+    }
-        }
 
-        &:first-of-type {
+    :deep(.dropdown-item:first-of-type) {
-            border-radius: 8px 8px 0 0;
+        border-radius: 8px 8px 0 0;
-        }
+    }
 
-        &:last-of-type {
+    :deep(.dropdown-item:last-of-type) {
-            border-radius: 0 0 8px 8px;
+        border-radius: 0 0 8px 8px;
-        }
+    }
 
-        &:hover {
+    :deep(.dropdown-item:hover) {
-            background-color: #fafafb;
+        background-color: #fafafb;
+    }
 
-            h2,
+    :deep(.dropdown-item:hover h2),
-            p {
+    :deep(.dropdown-item:hover p) {
-                color: #0149ff;
+        color: #0149ff;
-            }
-        }
     }
 
     @media screen and (max-width: 1280px) {

web/satellite/src/components/navigation/ProjectSelection.vue

@@ -313,7 +313,7 @@ export default class ProjectSelection extends Vue {
                     color: #0149ff;
                 }
 
-                ::v-deep path {
+                :deep(path) {
                     fill: #0149ff;
                 }
             }
@@ -415,7 +415,7 @@ export default class ProjectSelection extends Vue {
                         color: #0149ff;
                     }
 
-                    ::v-deep path {
+                    :deep(path) {
                         fill: #0149ff;
                     }
                 }
@@ -431,7 +431,7 @@ export default class ProjectSelection extends Vue {
             font-family: 'font_bold', sans-serif;
         }
 
-        ::v-deep path {
+        :deep(path) {
             fill: #000;
         }
     }
@@ -444,7 +444,7 @@ export default class ProjectSelection extends Vue {
             color: #0149ff;
         }
 
-        ::v-deep path {
+        :deep(path) {
             fill: #0149ff;
         }
     }

web/satellite/src/components/objects/BucketCreationNameStep.vue

@@ -198,11 +198,11 @@ export default class BucketCreationNameStep extends Vue {
     }
 }
 
-::v-deep .label-container__main__label {
+:deep(.label-container__main__label) {
     font-size: 14px;
 }
 
-::v-deep .label-container__main {
+:deep(.label-container__main) {
     width: 100%;
     justify-content: space-between;
 }

web/satellite/src/components/objects/BucketItem.vue

@@ -170,7 +170,7 @@ export default class BucketItem extends Resizable {
                         background-color: #f4f5f7;
                         font-family: 'font_medium', sans-serif;
 
-                        svg ::v-deep path {
+                        svg :deep(path) {
                             fill: #0068dc;
                             stroke: #0068dc;
                         }

web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue

@@ -266,9 +266,9 @@ export default class AGPermissions extends Vue {
         }
     }
 
-    ::v-deep .buckets-selection,
+    :deep(.buckets-selection),
-    ::v-deep .duration-selection {
+    :deep(.duration-selection) {
         width: 287px;
         margin-left: 0;
     }
-</style>
+</style>

web/satellite/src/components/onboardingTour/steps/cliFlow/CLIInstall.vue

@@ -239,13 +239,13 @@ export default class CLIInstall extends Vue {
         margin-top: 24px;
     }
 
-    ::v-deep .tab-copy {
+    :deep(.tab-copy) {
         display: inline-flex;
         padding: 0;
+    }
 
-        &__value {
+    :deep(.tab-copy__value) {
-            overflow: unset;
+        overflow: unset;
-            text-overflow: unset;
+        text-overflow: unset;
-        }
     }
 </style>

web/satellite/src/components/project/buckets/BucketArea.vue

@@ -220,7 +220,7 @@ export default class BucketArea extends Vue {
         padding-top: 20px;
     }
 
-    ::v-deep .pagination-container {
+    :deep(.pagination-container) {
         padding-left: 0;
     }
 </style>

web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue

@@ -118,7 +118,7 @@ export default class DateRangeSelection extends Vue {
             color: #0149ff;
         }
 
-        svg ::v-deep path {
+        svg :deep(path) {
             fill: #0149ff;
         }
     }

web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue

@@ -647,29 +647,29 @@ export default class NewProjectDashboard extends Vue {
             margin-right: 9px;
         }
 
-        &:hover svg ::v-deep path {
+        &:hover svg :deep(path) {
             fill: #fff;
         }
     }
 
-    ::v-deep .info__box {
+    :deep(.info__box) {
         width: 180px;
         left: calc(50% - 20px);
         top: calc(100% + 1px);
         cursor: default;
+    }
 
-        &__message {
+    :deep(.info__box__message) {
-            background: #56606d;
+        background: #56606d;
-            border-radius: 4px;
+        border-radius: 4px;
-            padding: 8px;
+        padding: 8px;
-        }
+    }
 
-        &__arrow {
+    :deep(.info__box__arrow) {
-            background: #56606d;
+        background: #56606d;
-            width: 10px;
+        width: 10px;
-            height: 10px;
+        height: 10px;
-            margin: 0 0 -2px 40px;
+        margin: 0 0 -2px 40px;
-        }
     }
 
     @media screen and (max-width: 1280px) {

web/satellite/src/components/team/HeaderArea.vue

@@ -353,7 +353,7 @@ export default class HeaderArea extends Vue {
         }
     }
 
-    ::v-deep .info__box__message {
+    :deep(.info__box__message) {
         min-width: 300px;
     }
 </style>

web/satellite/src/components/team/ProjectMemberListItem.vue

@@ -45,7 +45,7 @@ export default class ProjectMemberListItem extends Resizable {
     .owner {
         cursor: not-allowed;
 
-        & > ::v-deep th:nth-child(2):after {
+        & > :deep(th:nth-child(2):after) {
             content: 'Project Owner';
             font-size: 13px;
             color: #afb7c1;

web/satellite/src/views/LoginArea.vue

@@ -18,11 +18,11 @@
                     <h1 class="login-area__content-area__container__title-area__title" aria-roledescription="sign-in-title">Sign In</h1>
 
                     <div class="login-area__expand" @click.stop="toggleDropdown">
-                        <button 
+                        <button
                             id="loginDropdown"
                             type="button"
-                            aria-haspopup="listbox" 
+                            aria-haspopup="listbox"
-                            aria-roledescription="satellites-dropdown" 
+                            aria-roledescription="satellites-dropdown"
                             :aria-expanded="isDropdownShown"
                             class="login-area__expand__value"
                         >
@@ -34,14 +34,14 @@
                                 <SelectedCheckIcon />
                                 <span class="login-area__expand__dropdown__item__name">{{ satelliteName }}</span>
                             </li>
-                            <li 
+                            <li
-                                v-for="(sat, index) in partneredSatellites" 
+                                v-for="(sat, index) in partneredSatellites"
                                 :key="index + 1"
                                 role="option"
                                 tabindex="0"
                                 :data-value="sat.name"
                                 class="login-area__expand__dropdown__item"
-                                @click="clickSatellite(sat.address)" 
+                                @click="clickSatellite(sat.address)"
                                 @keypress.enter="clickSatellite(sat.address)"
                             >
                                 {{ sat.name }}
@@ -385,14 +385,14 @@ export default class Login extends Vue {
         let activeElement = document.activeElement;
 
         if (activeElement && activeElement.id === "loginDropdown") return;
-        
+
         if (this.isDropdownShown) {
             this.isDropdownShown = false;
             return;
         }
 
         this.isLoading = true;
-        
+
         if (this.$refs.recaptcha && !this.captchaResponseToken) {
             this.$refs.recaptcha.execute();
             return;
@@ -729,7 +729,7 @@ export default class Login extends Vue {
         }
     }
 
-    ::v-deep .grecaptcha-badge {
+    :deep(.grecaptcha-badge) {
         visibility: hidden;
     }
 

web/satellite/src/views/registration/RegisterArea.vue

@@ -61,11 +61,11 @@
                                     {{ viewConfig.tooltip }}
                                 </p>
                             </div>
-                            <button 
+                            <button
                                 id="registerDropdown"
-                                type="button" 
+                                type="button"
-                                aria-haspopup="listbox" 
+                                aria-haspopup="listbox"
-                                aria-roledescription="satellites-dropdown" 
+                                aria-roledescription="satellites-dropdown"
                                 :aria-expanded="isDropdownShown"
                                 class="register-area__input-area__expand__value"
                             >
@@ -470,11 +470,11 @@ export default class RegisterArea extends Vue {
         if (this.isLoading && !this.isDropdownShown) {
             return;
         }
-    
+
         let activeElement = document.activeElement;
 
         if (activeElement && activeElement.id === "registerDropdown") return;
-        
+
         if (this.isDropdownShown) {
             this.isDropdownShown = false;
             return;
@@ -850,18 +850,18 @@ export default class RegisterArea extends Vue {
                 &__custom-html-container {
                     margin-top: 27px;
 
-                    ::v-deep p {
+                    :deep(p) {
                         @extend %subtitle-text;
 
                         text-align: center;
-
-                        a {
-                            text-decoration: underline !important;
-                            color: inherit !important;
-                        }
                     }
 
-                    ::v-deep ol {
+                    :deep(p a) {
+                        text-decoration: underline !important;
+                        color: inherit !important;
+                    }
+
+                    :deep(ol) {
                         @extend %subtitle-text;
 
                         list-style-position: inside;
@@ -900,16 +900,16 @@ export default class RegisterArea extends Vue {
                 &__custom-html-container {
                     padding-bottom: 27px;
 
-                    ::v-deep p {
+                    :deep(p) {
                         @extend %subtitle-text;
-
-                        a {
-                            text-decoration: underline !important;
-                            color: inherit !important;
-                        }
                     }
 
-                    ::v-deep ol {
+                    :deep(p a) {
+                        text-decoration: underline !important;
+                        color: inherit !important;
+                    }
+
+                    :deep(ol) {
                         @extend %subtitle-text;
 
                         list-style-position: inside;
@@ -1310,7 +1310,7 @@ export default class RegisterArea extends Vue {
         display: block;
     }
 
-    ::v-deep .grecaptcha-badge {
+    :deep(.grecaptcha-badge) {
         visibility: hidden;
     }