web/satellite: text selection on specific elements disabled (#3424)

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

@@ -37,6 +37,7 @@ export default class AccountArea extends Vue {}
             color: #354049;
             margin-block-start: 0.5em;
             margin-block-end: 0.5em;
+            user-select: none;
         }
     }
 

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

@@ -353,6 +353,7 @@ export default class ApiKeysArea extends Vue {
             font-size: 32px;
             line-height: 39px;
             margin: 0;
+            user-select: none;
         }
 
         .api-keys-header {

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

@@ -77,6 +77,7 @@ export default class ApiKeysCopyPopup extends Vue {
             font-size: 24px;
             line-height: 29px;
             margin-bottom: 26px;
+            user-select: none;
         }
 
         &__copy-area {
@@ -130,19 +131,22 @@ export default class ApiKeysCopyPopup extends Vue {
     .copied-button {
         padding: 13px 28.5px;
         background-color: #196cda;
-        cursor: default;
+        border: 1px solid #196cda;
+    }
+
+    .copy-button {
+        cursor: pointer;
+        background-color: #2683ff;
+        border: 1px solid #2683ff;
     }
 
     .copy-button,
     .copied-button {
         display: flex;
-        background-color: #2683ff;
         padding: 13px 36px;
-        cursor: pointer;
         align-items: center;
         justify-content: space-between;
         color: #fff;
-        border: 1px solid #2683ff;
         box-sizing: border-box;
         border-radius: 8px;
         font-size: 14px;
@@ -151,6 +155,7 @@ export default class ApiKeysCopyPopup extends Vue {
 
         &__label {
             margin: 0;
+            user-select: none;
         }
 
         &:hover {

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

@@ -122,6 +122,7 @@ 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

@@ -86,6 +86,7 @@ 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

@@ -184,6 +184,7 @@ 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/SortingHeader.vue

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

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

@@ -90,6 +90,7 @@ 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,6 +29,7 @@ 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

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

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

@@ -7,7 +7,7 @@
         :class="containerClassName"
         :style="style"
         @click="onPress">
-        <h1 class="label" :class="{'white': isWhite}">{{label}}</h1>
+        <h1 class="label">{{label}}</h1>
     </div>
 </template>
 
@@ -49,6 +49,25 @@ export default class VButton extends Vue {
 </script>
 
 <style scoped lang="scss">
+    .white,
+    .red {
+        background-color: transparent !important;
+        border: 1px solid #afb7c1 !important;
+
+        .label {
+            color: #354049 !important;
+        }
+    }
+
+    .disabled {
+        background-color: #dadde5 !important;
+        border-color: #dadde5 !important;
+
+        .label {
+            color: #acb0bc !important;
+        }
+    }
+
     .container {
         display: flex;
         align-items: center;
@@ -56,6 +75,7 @@ export default class VButton extends Vue {
         background-color: #2683ff;
         border-radius: 6px;
         cursor: pointer;
+        user-select: none;
 
         .label {
             font-family: 'font_medium', sans-serif;
@@ -64,49 +84,30 @@ export default class VButton extends Vue {
             color: #fff;
         }
 
-        .white,
-        .red {
-            background-color: transparent;
-            border: 1px solid #afb7c1;
-
-            .label {
-                color: #354049;
-            }
-        }
-
-        .disabled {
-            background-color: #dadde5;
-            border-color: #dadde5;
-
-            .label {
-                color: #acb0bc;
-            }
-        }
-
         &:hover {
             box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
 
             &.white {
-                box-shadow: none;
+                box-shadow: none !important;
-                background-color: #2683ff;
+                background-color: #2683ff !important;
-                border: 1px solid #2683ff;
+                border: 1px solid #2683ff !important;
 
                 .label {
-                    color: white;
+                    color: white !important;
                 }
             }
 
             &.red {
-                box-shadow: none;
+                box-shadow: none !important;
-                background-color: transparent;
+                background-color: transparent !important;
 
                 .label {
-                    color: #eb5757;
+                    color: #eb5757 !important;
                 }
             }
 
             &.disabled {
-                box-shadow: none;
+                box-shadow: none !important;
                 background-color: #dadde5 !important;
 
                 .label {

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

@@ -268,6 +268,7 @@ 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,6 +11,7 @@
     justify-content: space-between;
     padding: 0 55px;
     position: relative;
+    user-select: none;
 
     &__left-area,
     &__right-area {

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

@@ -30,6 +30,7 @@ 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

@@ -18,6 +18,7 @@ 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

@@ -161,6 +161,7 @@ export default class ProjectDetailsArea extends Vue {
             font-size: 24px;
             line-height: 29px;
             color: #354049;
+            user-select: none;
         }
 
         &__button-area {
@@ -192,6 +193,7 @@ export default class ProjectDetailsArea extends Vue {
                 font-size: 16px;
                 line-height: 21px;
                 color: rgba(56, 75, 101, 0.4);
+                user-select: none;
             }
 
             &__project-name {
@@ -224,6 +226,7 @@ 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

@@ -22,7 +22,7 @@
                 />
                 <DatePickerIcon
                     class="usage-report-container__options-area__option__image"
-                    @click.prevent.self="onCustomDateClick"
+                    @click.prevent="onCustomDateClick"
                 />
             </div>
         </div>
@@ -259,6 +259,7 @@ export default class UsageReport extends Vue {
                 color: #354049;
                 margin-block-start: 0.5em;
                 margin-block-end: 0.5em;
+                user-select: none;
             }
         }
 
@@ -288,6 +289,7 @@ export default class UsageReport extends Vue {
                     font-size: 16px;
                     line-height: 23px;
                     color: #354049;
+                    user-select: none;
                 }
 
                 &__image {
@@ -347,6 +349,7 @@ export default class UsageReport extends Vue {
                         color: #354049;
                         margin-block-start: 0;
                         margin-block-end: 0;
+                        user-select: none;
                     }
 
                     &__amount {
@@ -397,6 +400,7 @@ 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

@@ -372,6 +372,7 @@ export default class AddUserPopup extends Vue {
                 color: #384b65;
                 margin-top: 0;
                 width: 107%;
+                user-select: none;
             }
         }
 
@@ -449,6 +450,7 @@ 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

@@ -175,6 +175,7 @@ export default class HeaderArea extends Vue {
             font-size: 32px;
             line-height: 39px;
             margin: 0;
+            user-select: none;
         }
     }
 

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

@@ -97,6 +97,7 @@ 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/tests/unit/common/__snapshots__/VButton.spec.ts.snap

@@ -14,6 +14,6 @@ exports[`Button.vue renders correctly with isDisabled prop 1`] = `
 
 exports[`Button.vue renders correctly with isWhite prop 1`] = `
 <div class="container white" style="width: inherit; height: inherit;">
-  <h1 class="label white">Default</h1>
+  <h1 class="label">Default</h1>
 </div>
 `;