From 85d6843f2e4824725b70c941c174b8e786fc4a43 Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Sat, 25 Feb 2023 17:18:37 -0600
Subject: [PATCH] web/satellite: registration success responsiveness
 improvements

This change prevents overlapping of registration success page content
when displayed on short screens. It also prevents the content from
exceeding the page width when it shouldn't.

Change-Id: I7d23da7ade5c023cd96ee9e997196e599a1bc059
---
 .../components/common/RegistrationSuccess.vue | 138 +++++++-----------
 1 file changed, 56 insertions(+), 82 deletions(-)

diff --git a/web/satellite/src/components/common/RegistrationSuccess.vue b/web/satellite/src/components/common/RegistrationSuccess.vue
index 439786d46..f02800635 100644
--- a/web/satellite/src/components/common/RegistrationSuccess.vue
+++ b/web/satellite/src/components/common/RegistrationSuccess.vue
@@ -2,49 +2,47 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="register-success-container">
-        <div class="register-success-container__logo-wrapper">
+    <div class="register-success-area">
+        <div class="register-success-area__logo-wrapper">
             <LogoIcon class="logo" @click="onLogoClick" />
         </div>
-        <div class="register-success-area">
-            <div class="register-success-area__form-container">
-                <MailIcon />
-                <h2 class="register-success-area__form-container__title" aria-roledescription="title">You're almost there!</h2>
-                <div v-if="showManualActivationMsg" class="register-success-area__form-container__sub-title">
-                    If an account with the email address
-                    <p class="register-success-area__form-container__sub-title__email">{{ userEmail }}</p>
-                    exists, a verification email has been sent.
-                </div>
-                <p class="register-success-area__form-container__sub-title">
-                    Check your inbox to activate your account and get started.
-                </p>
-                <p class="register-success-area__form-container__text">
-                    Didn't receive a verification email?
-                    <b class="register-success-area__form-container__verification-cooldown__bold-text">
-                        {{ timeToEnableResendEmailButton }}
-                    </b>
-                </p>
-                <div class="register-success-area__form-container__button-container">
-                    <VButton
-                        label="Resend Email"
-                        width="450px"
-                        height="50px"
-                        :on-press="onResendEmailButtonClick"
-                        :is-disabled="secondsToWait !== 0"
-                    />
-                </div>
-                <p class="register-success-area__form-container__contact">
-                    or
-                    <a
-                        class="register-success-area__form-container__contact__link"
-                        href="https://supportdcs.storj.io/hc/en-us/requests/new"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Contact our support team
-                    </a>
-                </p>
+        <div class="register-success-area__container">
+            <MailIcon />
+            <h2 class="register-success-area__container__title" aria-roledescription="title">You're almost there!</h2>
+            <div v-if="showManualActivationMsg" class="register-success-area__container__sub-title">
+                If an account with the email address
+                <p class="register-success-area__container__sub-title__email">{{ userEmail }}</p>
+                exists, a verification email has been sent.
             </div>
+            <p class="register-success-area__container__sub-title">
+                Check your inbox to activate your account and get started.
+            </p>
+            <p class="register-success-area__container__text">
+                Didn't receive a verification email?
+                <b class="register-success-area__container__verification-cooldown__bold-text">
+                    {{ timeToEnableResendEmailButton }}
+                </b>
+            </p>
+            <div class="register-success-area__container__button-container">
+                <VButton
+                    label="Resend Email"
+                    width="450px"
+                    height="50px"
+                    :on-press="onResendEmailButtonClick"
+                    :is-disabled="secondsToWait !== 0"
+                />
+            </div>
+            <p class="register-success-area__container__contact">
+                or
+                <a
+                    class="register-success-area__container__contact__link"
+                    href="https://supportdcs.storj.io/hc/en-us/requests/new"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Contact our support team
+                </a>
+            </p>
         </div>
         <router-link :to="loginPath" class="register-success-area__login-link">Go to Login page</router-link>
     </div>
@@ -153,12 +151,14 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-    .register-success-container {
+    .register-success-area {
         display: flex;
         flex-direction: column;
         align-items: center;
         font-family: 'font_regular', sans-serif;
         background-color: #f5f6fa;
+        padding: 0 20px;
+        box-sizing: border-box;
         position: fixed;
         top: 0;
         left: 0;
@@ -175,26 +175,18 @@ onBeforeUnmount(() => {
                 height: 37px;
             }
         }
-    }
 
-    .register-success-area {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-family: 'font_regular', sans-serif;
-        background-color: #fff;
-        border-radius: 20px;
-        width: 75%;
-        height: 50vh;
-        margin-top: 50px;
-        padding: 70px 90px 30px;
-        max-width: 1200px;
-
-        &__form-container {
-            text-align: center;
+        &__container {
             display: flex;
             flex-direction: column;
             align-items: center;
+            box-sizing: border-box;
+            text-align: center;
+            background-color: var(--c-white);
+            border-radius: 20px;
+            width: 75%;
+            margin-top: 50px;
+            padding: 70px 90px 30px;
 
             &__title {
                 font-family: 'font_bold', sans-serif;
@@ -249,10 +241,10 @@ onBeforeUnmount(() => {
                 margin-top: 20px;
 
                 &__link {
-                    color: #376fff;
+                    color: var(--c-light-blue-5);
 
                     &:visited {
-                        color: #376fff;
+                        color: var(--c-light-blue-5);
                     }
                 }
             }
@@ -262,35 +254,17 @@ onBeforeUnmount(() => {
             font-family: 'font_bold', sans-serif;
             text-decoration: none;
             font-size: 14px;
-            color: #376fff;
+            color: var(--c-light-blue-5);
             margin-top: 50px;
             padding-bottom: 50px;
         }
     }
 
-    @media screen and (max-width: 650px) {
+    @media screen and (max-width: 750px) {
 
-        .register-success-area {
-            height: auto;
-
-            &__form-container {
-                padding: 50px;
-            }
-        }
-
-        :deep(.container) {
-            width: 100% !important;
-        }
-    }
-
-    @media screen and (max-width: 500px) {
-
-        .register-success-area {
-            height: auto;
-
-            &__form-container {
-                padding: 50px 20px;
-            }
+        .register-success-area__container {
+            width: 100%;
+            padding: 60px;
         }
     }
 </style>