web/satellite: update signup pages plus logo (#6409)

* web/satellite: update signup pages plus logo

Update designs of the signup, login, forgot password, reset password, confirm email pages. Make Business as default on signup page per marketing request. Plus update the logo to remove DCS.

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

@@ -161,11 +161,6 @@ onBeforeUnmount(() => {
         &__logo-wrapper {
             text-align: center;
             margin-top: 60px;
-
-            svg {
-                width: 207px;
-                height: 37px;
-            }
         }
 
         &__container {
@@ -178,7 +173,7 @@ onBeforeUnmount(() => {
             border-radius: 20px;
             width: 75%;
             margin-top: 50px;
-            padding: 70px 90px 30px;
+            padding: 40px;
 
             &__title {
                 font-family: 'font_bold', sans-serif;

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

@@ -614,7 +614,7 @@ async function onLogout(): Promise<void> {
             height: 4rem;
 
             &__logo {
-                height: 30px;
+                height: 49px;
                 width: auto;
             }
         }

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

@@ -322,9 +322,9 @@ onBeforeUnmount(() => {
 
                 &__logo {
                     cursor: pointer;
-                    min-height: 37px;
+                    width: 144px;
-                    width: 207px;
+                    position: relative;
-                    height: 37px;
+                    left: -34px;
                 }
 
                 &__small-logo {

web/satellite/src/views/ActivateAccount.vue

@@ -144,12 +144,10 @@ onMounted((): void => {
 
         &__logo-wrapper {
             text-align: center;
-            margin: 70px 0;
+            margin: 60px 0;
 
             &__logo {
                 cursor: pointer;
-                width: 207px;
-                height: 37px;
             }
         }
 

web/satellite/src/views/AuthorizeArea.vue

@@ -655,8 +655,6 @@ onMounted(async () => {
 
     .logo {
         cursor: pointer;
-        width: 207px;
-        height: 37px;
     }
 
     .disabled,

web/satellite/src/views/ForgotPassword.vue

@@ -262,12 +262,10 @@ onMounted((): void => {
 
         &__logo-wrapper {
             text-align: center;
-            margin: 70px 0;
+            margin: 60px 0;
 
             &__logo {
                 cursor: pointer;
-                width: 207px;
-                height: 37px;
             }
         }
 

web/satellite/src/views/LoginArea.vue

@@ -128,7 +128,7 @@
                     width="100%"
                     height="48px"
                     label="Sign In"
-                    border-radius="50px"
+                    border-radius="6px"
                     :is-disabled="isLoading"
                     :on-press="onLoginClick"
                 />
@@ -485,7 +485,7 @@ function validateFields(): boolean {
         display: flex;
         flex-direction: column;
         font-family: 'font_regular', sans-serif;
-        background-color: #f5f6fa;
+        background-color: #F6F7FA;
         position: fixed;
         inset: 0;
         min-height: 100%;
@@ -493,7 +493,7 @@ function validateFields(): boolean {
 
         &__logo-wrapper {
             text-align: center;
-            margin: 70px 0;
+            margin: 60px 0;
         }
 
         &__divider {
@@ -504,7 +504,7 @@ function validateFields(): boolean {
         }
 
         &__input-wrapper {
-            margin-top: 20px;
+            margin-top: 16px;
             width: 100%;
         }
 
@@ -598,9 +598,9 @@ function validateFields(): boolean {
             &__container {
                 display: flex;
                 flex-direction: column;
-                padding: 60px 80px;
+                padding: 26px 40px 40px;
                 background-color: #fff;
-                width: 610px;
+                width: 460px;
                 border-radius: 20px;
                 box-sizing: border-box;
                 margin-bottom: 20px;
@@ -611,10 +611,10 @@ function validateFields(): boolean {
                     align-items: center;
 
                     &__title {
-                        font-size: 24px;
+                        font-size: 21px;
                         line-height: 49px;
-                        letter-spacing: -0.1007px;
+                        letter-spacing: -0.1px;
-                        color: #252525;
+                        color: #091C45;
                         font-family: 'font_bold', sans-serif;
                         font-weight: 800;
                     }
@@ -641,7 +641,7 @@ function validateFields(): boolean {
                 }
 
                 &__button {
-                    margin-top: 40px;
+                    margin-top: 30px;
                 }
 
                 &__cancel {
@@ -677,8 +677,6 @@ function validateFields(): boolean {
     }
 
     .logo {
-        width: 207px;
-        height: 37px;
         cursor: pointer;
     }
 
@@ -688,8 +686,12 @@ function validateFields(): boolean {
     }
 
     .link {
-        color: #376fff;
         font-family: 'font_medium', sans-serif;
+        color: var(--c-blue-3);
+    }
+
+    .link:hover {
+        color: var(--c-blue-5);
     }
 
     .link:focus {

web/satellite/src/views/ResetPassword.vue

@@ -293,12 +293,10 @@ onMounted((): void => {
 
         &__logo-wrapper {
             text-align: center;
-            margin: 70px 0;
+            margin: 60px 0;
 
             &__logo {
                 cursor: pointer;
-                width: 207px;
-                height: 37px;
             }
         }
 

web/satellite/src/views/all-dashboard/components/Heading.vue

@@ -305,9 +305,7 @@ function sendDocsEvent(): void {
 
         &__logo {
             cursor: pointer;
-            min-height: 37px;
+            width: 144px;
-            width: 207px;
-            height: 37px;
 
             @media screen and (width <= 680px) {
                 display: none;
@@ -372,7 +370,7 @@ function sendDocsEvent(): void {
                 height: 4rem;
 
                 &__logo {
-                    height: 30px;
+                    height: 49px;
                     width: auto;
                 }
             }

web/satellite/src/views/registration/RegisterArea.vue

@@ -35,11 +35,6 @@
                             <img :src="viewConfig.partnerLogoBottomUrl" :srcset="viewConfig.partnerLogoBottomUrl" alt="partner logo" class="register-area__logo-wrapper__logo wide">
                         </div>
                     </div>
-                    <RegisterGlobe
-                        v-if="!viewConfig.partnerLogoBottomUrl && !viewConfig.customHtmlDescription"
-                        class="register-area__intro-area__large-content__globe-image"
-                        :class="{'professional-globe': isProfessional}"
-                    />
                 </div>
             </div>
             <div class="register-area__input-area">
@@ -49,7 +44,7 @@
                 >
                     <div class="register-area__input-area__container__title-area">
                         <div class="register-area__input-area__container__title-container">
-                            <h1 class="register-area__input-area__container__title-area__title">Get 25 GB Free</h1>
+                            <h1 class="register-area__input-area__container__title-area__title">Sign up and get 25 GB free</h1>
                         </div>
                         <div class="register-area__input-area__expand" @click.stop="toggleDropdown">
                             <div class="register-area__input-area__info-button">
@@ -259,7 +254,7 @@
                         width="100%"
                         height="48px"
                         :label="viewConfig.signupButtonLabel"
-                        border-radius="50px"
+                        border-radius="6px"
                         :is-disabled="isLoading"
                         :on-press="onCreateClick"
                     />
@@ -305,7 +300,6 @@ import LogoWithPartnerIcon from '@/../static/images/partnerStorjLogo.svg';
 import LogoIcon from '@/../static/images/logo.svg';
 import SelectedCheckIcon from '@/../static/images/common/selectedCheck.svg';
 import BottomArrowIcon from '@/../static/images/common/lightBottomArrow.svg';
-import RegisterGlobe from '@/../static/images/register/RegisterGlobe.svg';
 import InfoIcon from '@/../static/images/register/info.svg';
 
 type ViewConfig = {
@@ -351,7 +345,7 @@ const storageNeedsError = ref('');
 const positionError = ref('');
 const isTermsAcceptedError = ref(false);
 const isLoading = ref(false);
-const isProfessional = ref(false);
+const isProfessional = ref(true);
 const haveSalesContact = ref(false);
 
 const captchaError = ref(false);
@@ -808,13 +802,18 @@ async function createUser(): Promise<void> {
 </script>
 
 <style scoped lang="scss">
+    .text-blue {
+        color: var(--c-blue-3);
+    }
     %subtitle-text {
         max-width: 550px;
-        margin-top: 27px;
+        margin-top: 16px;
+        margin-bottom: 16px;
         font-size: 16px;
         font-family: 'font_regular', sans-serif;
-        line-height: 24px;
+        line-height: 28px;
         text-align: left;
+        color: #233A6B;
     }
 
     .logo-divider {
@@ -941,12 +940,13 @@ async function createUser(): Promise<void> {
 
             &__title {
                 font-family: 'font_bold', sans-serif;
-                font-size: 48px;
+                font-size: 38px;
                 font-style: normal;
                 font-weight: 800;
-                line-height: 59px;
+                line-height: 51px;
-                letter-spacing: 0;
+                letter-spacing: -1px;
                 text-align: left;
+                color: #091C45;
             }
 
             &__sub-title {
@@ -978,22 +978,12 @@ async function createUser(): Promise<void> {
                     }
                 }
 
-                &__globe-image {
-                    position: relative;
-                    top: 140px;
-                    left: 40px;
-                }
-
-                &__globe-image.professional-globe {
-                    top: 110px;
-                    left: 40px;
-                }
             }
         }
 
         &__input-area {
             box-sizing: border-box;
-            padding: 60px 80px;
+            padding: 20px 40px;
             background-color: #fff;
             border-radius: 20px;
             width: 50%;
@@ -1103,20 +1093,20 @@ async function createUser(): Promise<void> {
                 &__wrapper {
                     display: flex;
                     justify-content: space-between;
-                    margin: 20px 0 15px;
+                    margin: 14px 0 22px;
                     list-style: none;
                     padding: 0;
                 }
 
                 &__personal {
-                    border-top-left-radius: 20px;
+                    border-top-left-radius: 6px;
-                    border-bottom-left-radius: 20px;
+                    border-bottom-left-radius: 6px;
                     border-right: none;
                 }
 
                 &__professional {
-                    border-top-right-radius: 20px;
+                    border-top-right-radius: 6px;
-                    border-bottom-right-radius: 20px;
+                    border-bottom-right-radius: 6px;
                     border-left: none;
                     position: relative;
                     right: 1px;
@@ -1124,19 +1114,19 @@ async function createUser(): Promise<void> {
 
                 &__personal,
                 &__professional {
-                    color: #376fff;
+                    color: var(--c-blue-3);
                     display: block;
                     width: 100%;
                     text-align: center;
                     padding: 8px;
-                    border: 1px solid #376fff;
+                    border: 1px solid var(--c-blue-3);
                     cursor: pointer;
                 }
 
                 &__personal.active,
                 &__professional.active {
                     color: #fff;
-                    background: #376fff;
+                    background: var(--c-blue-3);
                     font-weight: bold;
                 }
             }
@@ -1149,11 +1139,10 @@ async function createUser(): Promise<void> {
                     align-items: center;
 
                     &__title {
-                        font-size: 24px;
+                        font-size: 18px;
                         line-height: 49px;
-                        letter-spacing: -0.1007px;
+                        color: #000;
-                        color: #252525;
+                        font-family: 'font_bold', sans-serif;
-                        font-family: 'font_regular', sans-serif;
                         font-weight: 800;
                         white-space: nowrap;
                     }
@@ -1236,6 +1225,7 @@ async function createUser(): Promise<void> {
                 &__button {
                     margin-top: 30px;
                 }
+
             }
 
             &__footer {
@@ -1256,7 +1246,6 @@ async function createUser(): Promise<void> {
                     font-size: 12px;
                     line-height: 18px;
                     margin-left: 30px;
-                    color: #376fff;
                     text-decoration: none;
                 }
             }
@@ -1272,12 +1261,16 @@ async function createUser(): Promise<void> {
 
                 &__link {
                     font-family: 'font_bold', sans-serif;
+                    color: var(--c-blue-3);
                     text-decoration: none;
                     font-size: 14px;
-                    color: #376fff;
                     margin-left: 5px;
                 }
 
+                &__link:hover {
+                    color: var(--c-blue-5);
+                }
+
                 &__link:focus {
                     text-decoration: underline !important;
                 }
@@ -1454,7 +1447,6 @@ async function createUser(): Promise<void> {
 
                 &__large-content {
 
-                    &__globe-image,
                     &__custom-html-container {
                         display: none;
                     }
@@ -1583,7 +1575,7 @@ async function createUser(): Promise<void> {
             }
 
             &__intro-area__title {
-                font-size: 34px;
+                font-size: 36px;
             }
 
             &__input-area {

web/satellite/src/views/registration/registrationViewConfig.json

@@ -1,12 +1,12 @@
 {
   "default": {
-    "title": "Welcome to the distributed cloud.",
+    "title": "Experience better cloud storage for your business.",
     "partnerUrl": "",
     "partnerLogoTopUrl": "",
     "partnerLogoBottomUrl": "",
-    "description": "Join thousands of developers building on the safer, distributed cloud, and start uploading data in just a few minutes.",
+    "description": "Start for free and get unparalleled performance and security, while shaving a zero of your cloud bill and carbon footprint.",
     "customHtmlDescription": "",
-    "signupButtonLabel": "Sign Up",
+    "signupButtonLabel": "Get Started",
-    "tooltip": "When selecting the Satellite for your project, you'll want to choose the geographic region where the majority of the end users of your service who will be interacting with the objects on Storj DCS will be located."
+    "tooltip": "When selecting the Satellite for your project, you'll want to choose the geographic region where the majority of the end users of your service who will be interacting with the objects on Storj will be located."
   }
 }

web/satellite/static/images/register/RegisterGlobe.svg

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="380px" height="380px" viewBox="0 0 1293 1226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
-    <title>storj-illustration-distribution-cta</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <path d="M1007.91294,172.930521 C777.338913,-57.6435071 403.50455,-57.6435071 172.930521,172.930521 C-57.6435071,403.50455 -57.6435071,777.338913 172.930521,1007.91294 C403.50455,1238.48697 777.338913,1238.48697 1007.91294,1007.91294 C1238.48697,777.338913 1238.48697,403.50455 1007.91294,172.930521 Z" id="path-1"></path>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="storj-illustration-distribution-cta">
-            <g id="Group-13" transform="translate(31.609576, 45.156538)">
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use id="Oval" fill="#0149FF" xlink:href="#path-1"></use>
-                <path d="M406.40874,774.43442 L254.162171,926.681437 C214.371668,924.143979 182.883978,891.067302 182.883978,850.63628 C182.883978,808.551267 217.000622,774.434622 259.085635,774.434622 L406.40874,774.43442 Z M483.988029,203.20442 C533.417515,203.20442 573.488029,243.274935 573.488029,292.70442 L573.488029,315.779926 C573.488029,365.209411 533.417515,405.279926 483.988029,405.279926 L421.08374,405.27942 L421.084715,517.855433 C421.084715,567.284918 381.0142,607.355433 331.584715,607.355433 L245.290055,607.355433 C195.86057,607.355433 155.790055,567.284918 155.790055,517.855433 L155.78974,405.27942 L92.8867403,405.279926 C71.5595899,405.279926 51.974734,397.820277 36.5990177,385.367823 C60.7125271,320.115732 96.7404171,258.270279 144.683176,203.196221 L483.988029,203.20442 Z" id="Combined-Shape" fill="#00E567" mask="url(#mask-2)"></path>
-                <path d="M1007.91294,172.930521 L1014.76099,179.890434 C1238.46391,410.966911 1236.18123,779.644653 1007.91294,1007.91294 C777.338913,1238.48697 403.50455,1238.48697 172.930521,1007.91294 L172.930521,1007.91294 L1007.91294,172.930521 Z" id="Combined-Shape" fill="#00127F" mask="url(#mask-2)"></path>
-                <path d="M1007.91294,1007.91294 C986.479736,1029.34615 963.808648,1048.78701 940.129815,1066.23553 L940.121737,1066.22159 C913.291078,1050.76713 895.228361,1021.79912 895.228361,988.612339 L895.227978,876.036326 L832.325046,876.036832 C782.895561,876.036832 742.825046,835.966318 742.825046,786.536832 L742.825046,763.461326 C742.825046,714.031841 782.895561,673.961326 832.325046,673.961326 L1174.93823,673.963016 C1157.57096,796.145673 1101.89586,913.930022 1007.91294,1007.91294 Z M514.220074,774.434622 C556.305087,774.434622 590.421731,808.551267 590.421731,850.63628 C590.421731,892.721293 556.305087,926.837937 514.220074,926.837937 L259.085635,926.837937 C257.431691,926.837937 255.790054,926.785244 254.162311,926.681445 L406.409241,774.434326 L514.220074,774.434622 Z" id="Combined-Shape" fill="#0149FF" mask="url(#mask-2)"></path>
-                <g id="Group-14" mask="url(#mask-2)">
-                    <g transform="translate(181.930521, 673.930521)"></g>
-                </g>
-            </g>
-            <rect id="Rectangle" fill="#FFC600" x="774.434622" y="0" width="197.559853" height="197.559853"></rect>
-            <rect id="Rectangle-Copy-32" fill="#FFC600" x="165.950276" y="1025.05341" width="159.176796" height="159.176796"></rect>
-            <rect id="Rectangle-Copy-30" fill="#FFC600" x="565.585635" y="381.572744" width="114.020258" height="114.020258"></rect>
-            <rect id="Rectangle-Copy-31" fill="#00127F" x="130.953959" y="579.132597" width="114.020258" height="114.020258"></rect>
-            <rect id="Rectangle-Copy-29" fill="#FF458B" x="31.6095764" y="143.372007" width="197.559853" height="197.559853"></rect>
-            <rect id="Rectangle-Copy-35" fill="#FF458B" x="531.718232" y="914.41989" width="114.020258" height="114.020258"></rect>
-            <rect id="Rectangle-Copy-33" fill="#00E567" x="873.779006" y="579.132597" width="197.559853" height="197.559853"></rect>
-            <rect id="Rectangle-Copy-24" fill="#C8D3DE" x="543.007366" y="0" width="114.020258" height="114.020258"></rect>
-            <rect id="Rectangle-Copy-37" fill="#C8D3DE" x="0" y="752.985267" width="114.020258" height="114.020258"></rect>
-            <rect id="Rectangle-Copy-38" fill="#0149FF" x="873.779006" y="382.701657" width="114.020258" height="114.020258"></rect>
-            <rect id="Rectangle-Copy-34" fill="#C8D3DE" x="794.755064" y="1066.8232" width="159.176796" height="159.176796"></rect>
-            <rect id="Rectangle-Copy-36" fill="#C8D3DE" x="1133.4291" y="439.14733" width="159.176796" height="159.176796"></rect>
-        </g>
-    </g>
-</svg>