web/satellite: user select text restricted

Change-Id: If3692d55e48255c95b7722c5a574060c84fdf502

web/satellite/src/components/account/ProfileArea.vue

@@ -145,7 +145,6 @@ export default class ProfileArea extends Vue {
         position: relative;
         font-family: 'font_regular', sans-serif;
         padding-bottom: 100px;
-        user-select: none;
 
         &__title {
             font-family: 'font_bold', sans-serif;

web/satellite/src/components/account/billing/balance/AccountBalance.vue

@@ -99,7 +99,6 @@ export default class AccountBalance extends Vue {
                 font-size: 32px;
                 line-height: 48px;
                 margin-right: 13px;
-                user-select: none;
             }
 
             &__info-button {

web/satellite/src/components/account/billing/billingHistory/DepositAndBilling.vue

@@ -72,7 +72,6 @@ export default class DepositAndBilling extends Vue {
             &__title {
                 font-size: 32px;
                 line-height: 48px;
-                user-select: none;
             }
 
             .button {

web/satellite/src/components/account/billing/billingHistory/SortingHeader.vue

@@ -42,7 +42,6 @@ export default class SortingHeader extends Vue {}
                 font-size: 16px;
                 line-height: 10px;
                 color: #afb7c1;
-                user-select: none;
             }
         }
     }

web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue

@@ -24,7 +24,7 @@
                         </div>
                         <span class="current-month-area__content__usage-charges__head__name__title">Usage Charges</span>
                     </div>
-                    <span>Estimated total {{ chargesSummary | centsToDollars }}</span>
+                    <span>Estimated total <span class="summary">{{ chargesSummary | centsToDollars }}</span></span>
                 </div>
                 <div class="current-month-area__content__usage-charges__content" v-if="areUsageChargesShown" @click.stop>
                     <UsageChargeItem
@@ -134,11 +134,11 @@ export default class MonthlyBillingSummary extends Vue {
                     font-family: 'font_bold', sans-serif;
                     font-size: 32px;
                     line-height: 48px;
-                    user-select: none;
                 }
 
                 &__title-info {
                     font-size: 18px;
+                    user-select: text;
                 }
             }
 
@@ -165,7 +165,6 @@ export default class MonthlyBillingSummary extends Vue {
                 font-size: 14px;
                 line-height: 21px;
                 color: #afb7c1;
-                user-select: none;
             }
 
             &__usage-charges {
@@ -195,10 +194,6 @@ export default class MonthlyBillingSummary extends Vue {
                             justify-content: center;
                             margin-right: 12px;
                         }
-
-                        &__title {
-                            user-select: none;
-                        }
                     }
                 }
 
@@ -215,4 +210,8 @@ export default class MonthlyBillingSummary extends Vue {
     .item {
         border-top: 1px solid rgba(169, 181, 193, 0.3);
     }
+
+    .summary {
+        user-select: text;
+    }
 </style>

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

@@ -370,7 +370,6 @@ export default class PaymentMethods extends Vue {
             font-family: 'font_bold', sans-serif;
             font-size: 32px;
             line-height: 48px;
-            user-select: none;
         }
 
         &__button-area {

web/satellite/src/components/apiKeys/ApiKeysArea.vue

@@ -418,7 +418,6 @@ export default class ApiKeysArea extends Vue {
             line-height: 39px;
             color: #263549;
             margin: 0;
-            user-select: none;
         }
 
         .api-keys-header {

web/satellite/src/components/apiKeys/ApiKeysCopyPopup.vue

@@ -100,7 +100,6 @@ export default class ApiKeysCopyPopup extends Vue {
             font-size: 24px;
             line-height: 29px;
             margin-bottom: 26px;
-            user-select: none;
         }
 
         &__copy-area {

web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue

@@ -133,7 +133,6 @@ export default class ApiKeysCreationPopup extends Vue {
             font-size: 24px;
             line-height: 29px;
             margin-bottom: 26px;
-            user-select: none;
         }
 
         .next-button {

web/satellite/src/components/apiKeys/SortingHeader.vue

@@ -84,7 +84,6 @@ export default class SortApiKeysHeader extends Vue {
         height: 40px;
         background-color: rgba(255, 255, 255, 0.3);
         margin-top: 31px;
-        user-select: none;
 
         &__date-item {
             width: 60%;

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

@@ -186,7 +186,6 @@ export default class BucketArea extends Vue {
             margin-right: 50px;
             margin-block-start: 0;
             margin-block-end: 0;
-            user-select: none;
         }
     }
 

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

@@ -3,10 +3,10 @@
 
 <template>
     <div class="container">
-        <div class="container__item" :title="itemData.bucketName">{{ itemData.formattedBucketName() }}</div>
+        <p class="container__item" :title="itemData.bucketName">{{ itemData.formattedBucketName() }}</p>
-        <div class="container__item">{{ itemData.storage.toFixed(4) }}</div>
+        <p class="container__item">{{ itemData.storage.toFixed(4) }}</p>
-        <div class="container__item">{{ itemData.egress.toFixed(4) }}</div>
+        <p class="container__item">{{ itemData.egress.toFixed(4) }}</p>
-        <div class="container__item">{{ itemData.objectCount.toString() }}</div>
+        <p class="container__item">{{ itemData.objectCount.toString() }}</p>
     </div>
 </template>
 
@@ -25,10 +25,6 @@ export default class BucketItem extends Vue {
 <style scoped lang="scss">
     .container {
         padding: 25px 0;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
         outline: none;
         display: flex;
         background: #fff;

web/satellite/src/components/buckets/SortingHeader.vue

@@ -32,7 +32,6 @@ export default class SortBucketsHeader extends Vue {}
         opacity: 0.5;
         max-height: 40px;
         align-items: center;
-        user-select: none;
 
         &__item {
             width: 25%;

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

@@ -84,7 +84,6 @@ export default class EmptyStateProjectArea extends Vue {
                 margin-bottom: 15px;
                 min-width: 900px;
                 color: #354049;
-                user-select: none;
             }
         }
     }

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

@@ -92,7 +92,6 @@ export default class HeaderedInput extends HeaderlessInput {
             font-size: 16px;
             line-height: 21px;
             color: #354049;
-            user-select: none;
         }
 
         &__error {

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

@@ -29,7 +29,6 @@ export default class PagesBlock extends Vue {
 <style scoped lang="scss">
     .pages-container {
         display: flex;
-        user-select: none;
 
         &__pages {
             font-family: 'font_medium', sans-serif;

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

@@ -142,7 +142,6 @@ export default class RegistrationSuccessPopup extends Vue {
                 line-height: 39px;
                 color: #384b65;
                 margin: 0 0 25px 0;
-                user-select: none;
             }
 
             &__text {

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

@@ -77,7 +77,6 @@ export default class VButton extends Vue {
         background-color: #2683ff;
         border-radius: 6px;
         cursor: pointer;
-        user-select: none;
 
         .label {
             font-family: 'font_medium', sans-serif;

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

@@ -268,7 +268,6 @@ export default class VDatePicker extends Vue {
         top: 0;
         left: 0;
         overflow: hidden;
-        user-select: none;
         -webkit-animation: fadein 0.5s;
 
         /* Safari, Chrome and Opera > 12.1 */

web/satellite/src/components/header/headerArea.scss

@@ -11,7 +11,6 @@
     justify-content: space-between;
     padding: 0 65px;
     position: relative;
-    user-select: none;
 
     &__left-area,
     &__right-area {

web/satellite/src/components/header/projectSelection/ProjectSelectionArea.vue

@@ -120,7 +120,6 @@ export default class ProjectSelectionArea extends Vue {
             color: rgba(56, 75, 101, 0.4);
             opacity: 0.7;
             cursor: pointer;
-            user-select: none;
             margin-right: 5px;
         }
 

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

@@ -30,7 +30,6 @@ export default class TabNavigation extends Vue {
         width: auto;
         display: flex;
         border-bottom: 1px solid #afb7c1;
-        user-select: none;
 
         &__item {
             width: 150px;

web/satellite/src/components/navigation/navigationArea.scss

@@ -30,7 +30,6 @@ a {
     flex-direction: column;
     justify-content: space-between;
     font-family: 'font_regular', sans-serif;
-    user-select: none;
 
     &__logo {
         display: flex;

web/satellite/src/components/project/ProjectDetails.vue

@@ -197,7 +197,6 @@ export default class ProjectDetailsArea extends Vue {
             font-size: 32px;
             line-height: 39px;
             color: #263549;
-            user-select: none;
             margin: 0;
         }
 
@@ -242,7 +241,6 @@ export default class ProjectDetailsArea extends Vue {
                 font-size: 16px;
                 line-height: 21px;
                 color: rgba(56, 75, 101, 0.4);
-                user-select: none;
             }
 
             &__project-name {
@@ -282,7 +280,6 @@ export default class ProjectDetailsArea extends Vue {
                     font-size: 16px;
                     line-height: 21px;
                     color: rgba(56, 75, 101, 0.4);
-                    user-select: none;
                 }
 
                 &__project-description {

web/satellite/src/components/project/UsageReport.vue

@@ -324,7 +324,6 @@ export default class UsageReport extends Vue {
                 line-height: 39px;
                 color: #263549;
                 margin: 0;
-                user-select: none;
             }
         }
 
@@ -354,7 +353,6 @@ export default class UsageReport extends Vue {
                     font-size: 16px;
                     line-height: 23px;
                     color: #354049;
-                    user-select: none;
                 }
 
                 &__image {
@@ -414,7 +412,6 @@ export default class UsageReport extends Vue {
                         color: #354049;
                         margin-block-start: 0;
                         margin-block-end: 0;
-                        user-select: none;
                     }
 
                     &__amount {
@@ -465,7 +462,6 @@ export default class UsageReport extends Vue {
                         line-height: 21px;
                         color: #354049;
                         margin-right: 30px;
-                        user-select: none;
                     }
 
                     &__image {

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

@@ -321,10 +321,6 @@ export default class AddUserPopup extends Vue {
 
             &:first-child {
                 cursor: pointer;
-                -webkit-user-select: none;
-                -moz-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
             }
         }
     }
@@ -399,7 +395,6 @@ export default class AddUserPopup extends Vue {
                 margin: 0 0 90px 0;
                 width: 130%;
                 text-align: end;
-                user-select: none;
             }
         }
 
@@ -476,7 +471,6 @@ export default class AddUserPopup extends Vue {
                 font-size: 16px;
                 line-height: 25px;
                 padding-left: 50px;
-                user-select: none;
             }
 
             &__button-container {

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

@@ -231,7 +231,6 @@ export default class HeaderArea extends Vue {
                 line-height: 39px;
                 color: #263549;
                 margin: 0;
-                user-select: none;
             }
 
             &__info-button {

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

@@ -101,7 +101,6 @@ export default class SortingListHeader extends Vue {
         height: 40px;
         background-color: rgba(255, 255, 255, 0.3);
         margin-top: 31px;
-        user-select: none;
 
         &__name-container,
         &__added-container,

web/satellite/src/views/register/registerArea.html

@@ -76,10 +76,10 @@
                 <div class="register-area__submit-container">
                     <div class="register-area__submit-container__terms-area">
                         <label class="container">
-                            <input type="checkbox" v-model="isTermsAccepted">
+                            <input type="checkbox" id="terms" v-model="isTermsAccepted">
-                            <span class="checkmark" :class="{'error': isTermsAcceptedError}"></span>
+                            <span class="checkmark" :class="{'error': isTermsAcceptedError}"/>
                         </label>
-                        <h2 class="register-area__submit-container__terms-area__terms-confirmation">I agree to the <a class="register-area__submit-container__terms-area__link" href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a></h2>
+                        <h2 class="register-area__submit-container__terms-area__terms-confirmation"><label for="terms">I agree to the </label><a class="register-area__submit-container__terms-area__link" href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a></h2>
                     </div>
                     <div id="createAccountButton" class="register-area__submit-container__create-button" @click.prevent="onCreateClick">
                         <p class="register-area__submit-container__create-button__label">Create Account</p>

web/satellite/src/views/register/registerArea.scss

@@ -163,10 +163,6 @@ body {
                 width: 23px;
                 cursor: pointer;
                 font-size: 22px;
-                -webkit-user-select: none;
-                -moz-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
                 outline: none;
             }
 

web/storagenode/src/app/components/BarInfo.vue

@@ -72,7 +72,6 @@ export default class BarInfo extends Vue {
             font-size: 14px;
             line-height: 21px;
             color: #586c86;
-            user-select: none;
         }
 
         &__amount {

web/storagenode/src/app/components/ChecksArea.vue

@@ -69,7 +69,6 @@ export default class ChecksArea extends Vue {
                 line-height: 21px;
                 color: #586c86;
                 margin: 0 5px 0 0;
-                user-select: none;
             }
 
             .checks-area-image {

web/storagenode/src/app/components/PayoutArea.vue

@@ -59,7 +59,6 @@ export default class PayoutArea extends Vue {
             &__label {
                 font-size: 14px;
                 color: #586c86;
-                user-select: none;
             }
 
             &__bold-text {

web/storagenode/src/app/components/SNOContentTitle.vue

@@ -151,7 +151,6 @@ export default class SNOContentTitle extends Vue {
             font-size: 32px;
             line-height: 57px;
             color: #535f77;
-            user-select: none;
         }
 
         &__info-container {
@@ -167,7 +166,6 @@ export default class SNOContentTitle extends Vue {
                     line-height: 20px;
                     color: #9ca5b6;
                     margin: 0 0 5px 0;
-                    user-select: none;
                 }
 
                 &__content {

web/storagenode/src/app/components/SNOFooter.vue

@@ -40,7 +40,6 @@ export default class SNOFooter extends Vue {
         justify-content: center;
         background-color: #fff;
         align-items: center;
-        user-select: none;
 
         &__content-holder {
             width: 822px;

web/storagenode/src/app/components/SNOHeader.vue

@@ -176,7 +176,6 @@ export default class SNOHeader extends Vue {
                     &__title {
                         min-width: 55px;
                         margin-right: 5px;
-                        user-select: none;
                     }
 
                     &__id {

web/storagenode/src/app/components/SatelliteSelection.vue

@@ -68,7 +68,6 @@ export default class SatelliteSelection extends Vue {
 
         &__bold-text {
             margin-right: 3px;
-            user-select: none;
         }
 
         &__image {