From 8c4a9f92770838a1462b9fab56482d7fd4f1896f Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Tue, 30 May 2023 13:23:12 +0300
Subject: [PATCH] web/satellite: improve onboarding CLI flow small screen
 adaptation

Improved onboarding CLI flow view on smaller screens.
Also improved notification boxes adaptation.

Issue:
https://github.com/storj/storj/issues/5894

Change-Id: I83dd8968df937d0d50535707e02914bd232fed21
---
 .../components/notifications/NotificationArea.vue  |  5 +++++
 .../components/notifications/NotificationItem.vue  |  4 ++++
 .../onboardingTour/OnboardingTourArea.vue          |  9 +++++----
 .../components/onboardingTour/steps/CLIStep.vue    | 10 +++++++++-
 .../onboardingTour/steps/cliFlow/AGPermissions.vue | 14 ++++++++++++++
 .../onboardingTour/steps/cliFlow/ProgressBar.vue   |  4 ++++
 .../onboardingTour/steps/cliFlow/SuccessScreen.vue | 10 ++++++++++
 .../steps/cliFlow/permissions/DurationPicker.vue   | 13 +++++++++++++
 .../steps/common/CLIFlowContainer.vue              | 12 +++++++++++-
 .../onboardingTour/steps/common/OSContainer.vue    |  4 ++++
 .../onboardingTour/steps/common/TabWithCopy.vue    |  2 +-
 .../onboardingTour/steps/common/ValueWithCopy.vue  | 11 ++++++++++-
 12 files changed, 90 insertions(+), 8 deletions(-)

diff --git a/web/satellite/src/components/notifications/NotificationArea.vue b/web/satellite/src/components/notifications/NotificationArea.vue
index c731dfe30..3aff46060 100644
--- a/web/satellite/src/components/notifications/NotificationArea.vue
+++ b/web/satellite/src/components/notifications/NotificationArea.vue
@@ -50,5 +50,10 @@ const doNotificationsExist = computed((): boolean => {
         border-radius: 12px;
         z-index: 9999;
         overflow: hidden;
+
+        @media screen and (width <= 450px) {
+            width: unset;
+            left: 17px;
+        }
     }
 </style>
diff --git a/web/satellite/src/components/notifications/NotificationItem.vue b/web/satellite/src/components/notifications/NotificationItem.vue
index f6eddc68f..bcc1ba968 100644
--- a/web/satellite/src/components/notifications/NotificationItem.vue
+++ b/web/satellite/src/components/notifications/NotificationItem.vue
@@ -171,6 +171,10 @@ onMounted((): void => {
                 height: auto;
                 width: 270px;
                 word-break: break-word;
+
+                @media screen and (width <= 450px) {
+                    width: unset;
+                }
             }
 
             &__link {
diff --git a/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue b/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
index d90c63c10..8ccdb1fbf 100644
--- a/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
+++ b/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
@@ -17,12 +17,13 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-}
 
-@media screen and (width <= 760px) {
-
-    .tour-area {
+    @media screen and (width <= 760px) {
         width: 88% !important;
     }
+
+    @media screen and (width <= 600px) {
+        padding: 30px 0 !important;
+    }
 }
 </style>
diff --git a/web/satellite/src/components/onboardingTour/steps/CLIStep.vue b/web/satellite/src/components/onboardingTour/steps/CLIStep.vue
index ce9f424ff..d843e9765 100644
--- a/web/satellite/src/components/onboardingTour/steps/CLIStep.vue
+++ b/web/satellite/src/components/onboardingTour/steps/CLIStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div>
+    <div class="wrap">
         <ProgressBar />
         <router-view />
     </div>
@@ -11,3 +11,11 @@
 <script setup lang="ts">
 import ProgressBar from '@/components/onboardingTour/steps/cliFlow/ProgressBar.vue';
 </script>
+
+<style scoped lang="scss">
+.wrap {
+    @media screen and (width <= 600px) {
+        width: 100%;
+    }
+}
+</style>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
index 1c94f5091..e957999e3 100644
--- a/web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
@@ -256,6 +256,11 @@ onMounted(async (): Promise<void> => {
             width: 287px;
             padding: 0 98.5px;
 
+            @media screen and (width <= 600px) {
+                width: 100%;
+                padding: 0;
+            }
+
             &__label {
                 font-family: 'font_medium', sans-serif;
                 margin: 20px 0 8px;
@@ -272,6 +277,11 @@ onMounted(async (): Promise<void> => {
             padding: 0 98.5px;
             flex-wrap: wrap;
 
+            @media screen and (width <= 600px) {
+                width: 100%;
+                padding: 0;
+            }
+
             &__container {
                 display: flex;
                 margin-top: 5px;
@@ -283,5 +293,9 @@ onMounted(async (): Promise<void> => {
     :deep(.duration-selection) {
         width: 287px;
         margin-left: 0;
+
+        @media screen and (width <= 600px) {
+            width: 100%;
+        }
     }
 </style>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/ProgressBar.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/ProgressBar.vue
index ac6428bb9..ac271d7fa 100644
--- a/web/satellite/src/components/onboardingTour/steps/cliFlow/ProgressBar.vue
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/ProgressBar.vue
@@ -81,6 +81,10 @@ const fill = computed((): string => {
             background: var(--c-grey-3);
             border-radius: 8px;
 
+            @media screen and (width <= 600px) {
+                width: 100%;
+            }
+
             &__fill {
                 height: 16px;
                 background: var(--c-green-5);
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
index 4615d8d00..ff7057dfb 100644
--- a/web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
@@ -86,6 +86,10 @@ async function endOnboarding(): Promise<void> {
         align-items: center;
         flex-direction: column;
 
+        @media screen and (width <= 600px) {
+            padding: 24px;
+        }
+
         &__title {
             margin: 20px 0;
             font-family: 'font_Bold', sans-serif;
@@ -108,6 +112,12 @@ async function endOnboarding(): Promise<void> {
             width: 100%;
             margin-top: 24px;
             column-gap: 24px;
+
+            @media screen and (width <= 450px) {
+                flex-direction: column-reverse;
+                column-gap: unset;
+                row-gap: 24px;
+            }
         }
     }
 
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationPicker.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationPicker.vue
index 5a985a033..84b119fe1 100644
--- a/web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationPicker.vue
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationPicker.vue
@@ -146,6 +146,14 @@ function closePicker(): void {
         position: absolute;
         z-index: 1;
         top: 100%;
+
+        @media screen and (width <= 930px) {
+            width: 500px;
+        }
+
+        @media screen and (width <= 750px) {
+            width: 100%;
+        }
     }
 
     .duration-picker {
@@ -164,6 +172,11 @@ function closePicker(): void {
             column-gap: 48px;
             padding: 10px 24px 0;
 
+            @media screen and (width <= 380px) {
+                padding: 10px 10px 0;
+                column-gap: 24px;
+            }
+
             &__column {
                 list-style-type: none;
                 padding-left: 0;
diff --git a/web/satellite/src/components/onboardingTour/steps/common/CLIFlowContainer.vue b/web/satellite/src/components/onboardingTour/steps/common/CLIFlowContainer.vue
index 239c673b7..d6a7a3e63 100644
--- a/web/satellite/src/components/onboardingTour/steps/common/CLIFlowContainer.vue
+++ b/web/satellite/src/components/onboardingTour/steps/common/CLIFlowContainer.vue
@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<{
     onNextClick: () => unknown;
     onBackClick: () => unknown;
     title: string;
-    isLoading: boolean;
+    isLoading?: boolean;
 }>(), {
     onNextClick: () => {},
     onBackClick: () => {},
@@ -52,6 +52,10 @@ const props = withDefaults(defineProps<{
         flex-direction: column;
         align-items: center;
 
+        @media screen and (width <= 600px) {
+            padding: 24px;
+        }
+
         &__title {
             margin: 20px 0;
             font-family: 'font_Bold', sans-serif;
@@ -67,6 +71,12 @@ const props = withDefaults(defineProps<{
             width: 100%;
             margin-top: 34px;
             column-gap: 24px;
+
+            @media screen and (width <= 450px) {
+                flex-direction: column-reverse;
+                column-gap: unset;
+                row-gap: 24px;
+            }
         }
     }
 </style>
diff --git a/web/satellite/src/components/onboardingTour/steps/common/OSContainer.vue b/web/satellite/src/components/onboardingTour/steps/common/OSContainer.vue
index e70de0e85..0edd70c76 100644
--- a/web/satellite/src/components/onboardingTour/steps/common/OSContainer.vue
+++ b/web/satellite/src/components/onboardingTour/steps/common/OSContainer.vue
@@ -131,6 +131,10 @@ onMounted((): void => {
                 padding: 16px;
                 color: #9daab6;
                 cursor: pointer;
+
+                @media screen and (width <= 350px) {
+                    padding: 10px;
+                }
             }
 
             &__choice:first-child {
diff --git a/web/satellite/src/components/onboardingTour/steps/common/TabWithCopy.vue b/web/satellite/src/components/onboardingTour/steps/common/TabWithCopy.vue
index 2d3828138..a75fa7687 100644
--- a/web/satellite/src/components/onboardingTour/steps/common/TabWithCopy.vue
+++ b/web/satellite/src/components/onboardingTour/steps/common/TabWithCopy.vue
@@ -3,7 +3,7 @@
 
 <template>
     <div class="tab-copy">
-        <p class="tab-copy__value" :aria-roledescription="ariaRoleDescription">{{ value }}</p>
+        <p class="tab-copy__value" :title="value" :aria-roledescription="ariaRoleDescription">{{ value }}</p>
         <CopyIcon class="tab-copy__icon" @click="onCopyClick" />
     </div>
 </template>
diff --git a/web/satellite/src/components/onboardingTour/steps/common/ValueWithCopy.vue b/web/satellite/src/components/onboardingTour/steps/common/ValueWithCopy.vue
index 9c6e97ddf..2cc0dc2ec 100644
--- a/web/satellite/src/components/onboardingTour/steps/common/ValueWithCopy.vue
+++ b/web/satellite/src/components/onboardingTour/steps/common/ValueWithCopy.vue
@@ -3,7 +3,7 @@
 
 <template>
     <div class="value-copy">
-        <p class="value-copy__value" :aria-roledescription="roleDescription">{{ value }}</p>
+        <p class="value-copy__value" :title="value" :aria-roledescription="roleDescription">{{ value }}</p>
         <VButton
             class="value-copy__button"
             label="Copy"
@@ -51,6 +51,11 @@ function onCopyClick(): void {
         border-radius: 10px;
         max-width: calc(100% - 50px);
 
+        @media screen and (width <= 450px) {
+            padding: 12px;
+            max-width: calc(100% - 24px);
+        }
+
         &__value {
             font-size: 16px;
             line-height: 28px;
@@ -63,6 +68,10 @@ function onCopyClick(): void {
         &__button {
             margin-left: 32px;
             min-width: 66px;
+
+            @media screen and (width <= 450px) {
+                margin-left: 12px;
+            }
         }
     }
 </style>