JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: Upgrade to Vue 2.7

Browse Source 
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
This commit is contained in:
Moby von Briesen 2022-08-24 11:30:18 -04:00
parent 6f76b7e282
commit 0ab0cef06c
36 changed files with 1032 additions and 991 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1562
web/satellite/package-lock.json
View File

File diff suppressed because it is too large Load Diff

4
web/satellite/package.json
View File

@ -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": {

2
web/satellite/src/components/accessGrants/AccessGrantsItem2.vue
View File

@ -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;
}

6
web/satellite/src/components/accessGrants/modals/CreateFormModal.vue
View File

@ -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;
}

14
web/satellite/src/components/accessGrants/modals/EncryptFormModal.vue
View File

@ -237,15 +237,15 @@ export default class EncryptFormModal extends Vue {
.button-icon {
margin-right: 5px;
::v-deep path,
::v-deep rect {
:deep(path),
:deep(rect) {
stroke: white;
}
&.active {
::v-deep path,
::v-deep rect {
:deep(path),
: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;
}

2
web/satellite/src/components/accessGrants/modals/GrantCreatedModal.vue
View File

@ -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;
}

31
web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
View File

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

2
web/satellite/src/components/accessGrants/steps/GatewayStep.vue
View File

@ -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>

2
web/satellite/src/components/account/billing/billingTabs/Overview.vue
View File

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

34
web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
View File

@ -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
:id="card.id"
v-model="defaultCreditCardSelection"
:value="card.id"
class="change-default-input"
type="radio"
<input
:id="card.id"
v-model="defaultCreditCardSelection"
:value="card.id"
class="change-default-input"
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
class="remove-card-button"
<div
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;
}
}

26
web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
View File

@ -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 {
padding: 8px 8px 13px;
width: 235px;
background: #56606d;
border-radius: 4px;
}
:deep(.info__box__message) {
padding: 8px 8px 13px;
width: 235px;
background: #56606d;
border-radius: 4px;
}
&__arrow {
width: 10px;
height: 10px;
background: #56606d;
margin-bottom: -3px;
}
:deep(.info__box__arrow) {
width: 10px;
height: 10px;
background: #56606d;
margin-bottom: -3px;
}
</style>

2
web/satellite/src/components/browser/FileBrowser.vue
View File

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

2
web/satellite/src/components/common/GeneratePassphrase.vue
View File

@ -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>

2
web/satellite/src/components/common/RegistrationSuccess.vue
View File

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

4
web/satellite/src/components/common/VButton.vue
View File

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

2
web/satellite/src/components/common/VLoader.vue
View File

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

4
web/satellite/src/components/common/VerticalArrows.vue
View File

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

4
web/satellite/src/components/modals/AddTeamMemberModal.vue
View File

@ -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;
}
}

26
web/satellite/src/components/modals/AddTokenFundsModal.vue
View File

@ -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 {
background: #56606d;
border-radius: 4px;
padding: 10px 8px;
transform: rotate(-180deg);
}
:deep(.info__box__message) {
background: #56606d;
border-radius: 4px;
padding: 10px 8px;
transform: rotate(-180deg);
}
&__arrow {
background: #56606d;
width: 10px;
height: 10px;
margin-bottom: -3px;
}
:deep(.info__box__arrow) {
background: #56606d;
width: 10px;
height: 10px;
margin-bottom: -3px;
}
</style>

16
web/satellite/src/components/modals/ChangePasswordModal.vue
View File

@ -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 {
flex-direction: column;
align-items: flex-start;
}
:deep(.password-strength-container__header) {
flex-direction: column;
align-items: flex-start;
}
&__rule-area__rule {
text-align: left;
}
:deep(.password-strength-container__rule-area__rule) {
text-align: left;
}
}
</style>

2
web/satellite/src/components/modals/CreateProjectModal.vue
View File

@ -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;
}
}

14
web/satellite/src/components/navigation/AccountArea.vue
View File

@ -255,8 +255,8 @@ export default class AccountArea extends Vue {
color: #0149ff;
}
.account-area__wrap__arrow ::v-deep path,
.account-area__wrap__left__icon ::v-deep path {
.account-area__wrap__arrow :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__left__icon ::v-deep path {
.account-area__wrap__arrow :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__left__icon ::v-deep path {
.account-area__wrap__arrow :deep(path),
.account-area__wrap__left__icon :deep(path) {
fill: #0149ff;
}
}

66
web/satellite/src/components/navigation/MobileNavigation.vue
View File

@ -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;

70
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -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 {
max-width: 40px;
min-width: 40px;
}
:deep(.dropdown-item__icon) {
max-width: 40px;
min-width: 40px;
}
&__text {
margin-left: 10px;
:deep(.dropdown-item__text) {
margin-left: 10px;
}
&__title {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 22px;
color: #091c45;
}
:deep(.dropdown-item__text__title) {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 22px;
color: #091c45;
}
&__label {
font-size: 12px;
line-height: 21px;
color: #091c45;
}
}
:deep(.dropdown-item__text__label) {
font-size: 12px;
line-height: 21px;
color: #091c45;
}
&:first-of-type {
border-radius: 8px 8px 0 0;
}
:deep(.dropdown-item:first-of-type) {
border-radius: 8px 8px 0 0;
}
&:last-of-type {
border-radius: 0 0 8px 8px;
}
:deep(.dropdown-item:last-of-type) {
border-radius: 0 0 8px 8px;
}
&:hover {
background-color: #fafafb;
:deep(.dropdown-item:hover) {
background-color: #fafafb;
}
h2,
p {
color: #0149ff;
}
}
:deep(.dropdown-item:hover h2),
:deep(.dropdown-item:hover p) {
color: #0149ff;
}
@media screen and (max-width: 1280px) {

8
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -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;
}
}

4
web/satellite/src/components/objects/BucketCreationNameStep.vue
View File

@ -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;
}

2
web/satellite/src/components/objects/BucketItem.vue
View File

@ -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;
}

6
web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
View File

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

10
web/satellite/src/components/onboardingTour/steps/cliFlow/CLIInstall.vue
View File

@ -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 {
overflow: unset;
text-overflow: unset;
}
:deep(.tab-copy__value) {
overflow: unset;
text-overflow: unset;
}
</style>

2
web/satellite/src/components/project/buckets/BucketArea.vue
View File

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

2
web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue
View File

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

26
web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
View File

@ -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 {
background: #56606d;
border-radius: 4px;
padding: 8px;
}
:deep(.info__box__message) {
background: #56606d;
border-radius: 4px;
padding: 8px;
}
&__arrow {
background: #56606d;
width: 10px;
height: 10px;
margin: 0 0 -2px 40px;
}
:deep(.info__box__arrow) {
background: #56606d;
width: 10px;
height: 10px;
margin: 0 0 -2px 40px;
}
@media screen and (max-width: 1280px) {

2
web/satellite/src/components/team/HeaderArea.vue
View File

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

2
web/satellite/src/components/team/ProjectMemberListItem.vue
View File

@ -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;

18
web/satellite/src/views/LoginArea.vue
View File

@ -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-roledescription="satellites-dropdown"
aria-haspopup="listbox"
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
v-for="(sat, index) in partneredSatellites"
<li
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;
}

42
web/satellite/src/views/registration/RegisterArea.vue
View File

@ -61,11 +61,11 @@
{{ viewConfig.tooltip }}
</p>
</div>
<button
<button
id="registerDropdown"
type="button"
aria-haspopup="listbox"
aria-roledescription="satellites-dropdown"
type="button"
aria-haspopup="listbox"
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;
}