From 7300bfbebd89eaae0e2153aa8421e58a38f2ec7f Mon Sep 17 00:00:00 2001
From: Nikolay Yurchenko <nickolai.yurchenko@gmail.com>
Date: Thu, 25 Apr 2019 23:08:00 +1000
Subject: [PATCH] [V3-1315] link bug fix (#1392)

---
 .../components/navigation/navigationArea.html |  2 +-
 .../src/components/team/AddUserPopup.vue      | 42 ++++++++++++++-----
 web/satellite/src/views/login/login.scss      | 14 +++++--
 .../src/views/register/register.html          | 12 +++---
 .../src/views/register/register.scss          |  2 +-
 5 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/web/satellite/src/components/navigation/navigationArea.html b/web/satellite/src/components/navigation/navigationArea.html
index ed99553e5..ac8508e7d 100644
--- a/web/satellite/src/components/navigation/navigationArea.html
+++ b/web/satellite/src/components/navigation/navigationArea.html
@@ -38,7 +38,7 @@
 		</router-link>
 		<a class="navigation-area__item-container" href="https://github.com/storj/docs/blob/master/Vanguard-Release-Setup-Instructions.md" target="_blank">
 			<div class="navigation-area__item-container__link-container">
-				<svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<svg class="svg" width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path d="M17.975 5.74811C17.9448 5.71786 17.9448 5.68878 17.9157 5.65853L17.8854 5.62828L17.8261 5.56895C17.7959 5.53871 17.7668 5.50962 17.7365 5.47937L13.0017 0.744565C12.9715 0.714318 12.9424 0.685233 12.9121 0.654985C12.9121 0.656149 12.8819 0.625901 12.8528 0.625901L12.8226 0.595654C12.7923 0.565407 12.7632 0.565407 12.733 0.536321C12.2862 0.179171 11.7209 0 11.1543 0H3.35157C1.92178 0 0.760742 1.16104 0.760742 2.59083V20.7277C0.760742 22.1575 1.92178 23.3186 3.35157 23.3186H15.9195C17.3493 23.3186 18.5103 22.1575 18.5103 20.7277L18.5115 7.32683C18.5115 6.76144 18.3032 6.19486 17.9751 5.74812L17.975 5.74811ZM16.2183 20.6986C16.2183 20.8475 16.0997 20.9964 15.9205 20.9964H3.35143C3.20252 20.9964 3.05361 20.8777 3.05361 20.6986V2.59177C3.05361 2.44286 3.17227 2.29395 3.35143 2.29395H10.1117V5.77819C10.1117 7.20799 11.2728 8.36902 12.7026 8.36902H16.1868L16.188 20.6983L16.2183 20.6986Z" fill="#354049"/>
 					<path d="M7.46108 12.5629C7.46108 13.3151 7.25209 13.88 6.85591 14.2795C6.46064 14.679 5.8791 14.8912 5.15762 14.8912H3.73828V10.4238H5.27393C5.97178 10.4238 6.52969 10.6121 6.90224 10.9648C7.27571 11.3405 7.46106 11.8814 7.46106 12.5629L7.46108 12.5629ZM6.22893 12.6107C6.22893 12.2111 6.15897 11.9053 5.99632 11.694C5.83367 11.4828 5.60105 11.3882 5.27483 11.3882L4.92591 11.3873V13.8801H5.18216C5.55472 13.8801 5.81004 13.7625 5.97268 13.5513C6.13533 13.3391 6.22893 13.0571 6.22893 12.6108V12.6107Z" fill="#354049"/>
 					<path d="M11.9283 12.6459C11.9283 13.3788 11.7339 13.9292 11.3696 14.3185C11.0054 14.7077 10.4231 14.8912 9.69462 14.8912C8.96618 14.8912 8.40752 14.7077 8.0433 14.3185C7.65441 13.9292 7.46094 13.3788 7.46094 12.6459C7.46094 11.9129 7.65538 11.3626 8.0433 10.9966C8.43219 10.6073 8.98988 10.4238 9.71832 10.4238C10.4468 10.4238 11.0054 10.6073 11.3933 10.9966C11.7338 11.3626 11.9283 11.9129 11.9283 12.6459H11.9283ZM8.74794 12.6459C8.74794 13.4933 9.06379 13.9059 9.67082 13.9059C9.98667 13.9059 10.2295 13.8146 10.3746 13.6079C10.5207 13.4021 10.5927 13.0808 10.5927 12.6459C10.5927 12.211 10.5197 11.8897 10.3499 11.6839C10.1802 11.478 9.96104 11.3635 9.66986 11.3635C9.06283 11.3859 8.74793 11.7984 8.74793 12.6459L8.74794 12.6459Z" fill="#354049"/>
diff --git a/web/satellite/src/components/team/AddUserPopup.vue b/web/satellite/src/components/team/AddUserPopup.vue
index d308d809c..6df71ec9f 100644
--- a/web/satellite/src/components/team/AddUserPopup.vue
+++ b/web/satellite/src/components/team/AddUserPopup.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class='add-user-container' v-on:keyup.enter="onAddUsersClick" v-on:keyup.esc="onClose">
+    <div class='add-user-container' @keyup.enter="onAddUsersClick" @keyup.esc="onClose">
         <div class='add-user' id="addTeamMemberPopup">
             <div class="add-user__main">
                 <div class='add-user__info-panel-container'>
@@ -18,24 +18,24 @@
                     <div :class="[inputs.length > 4 ? 'add-user__form-container__inputs-group scrollable' : 'add-user__form-container__inputs-group']">
                         <div v-for="(input, index) in inputs"
                             class="add-user__form-container__inputs-group__item"
-                            v-bind:key="index" >
+                            :key="index" >
                             <input
                                 placeholder="test@test.net"
                                 v-model="input.value"
-                                v-bind:class="[input.error ? 'error' : 'no-error']"
-                                v-on:keyup="resetFormErrors(index)" />
+                                :class="[input.error ? 'error' : 'no-error']"
+                                @keyup="resetFormErrors(index)" />
                             <span v-html="imageDeleteUser" @click="deleteInput(index)"></span>
                         </div>
                     </div>
                     <div class="add-user-row">
-                        <div v-on:click='addInput' class="add-user-row__item" id="addUserButton">
-                            <div v-bind:class="[isMaxInputsCount ? 'inactive-image' : '']">
+                        <div @click='addInput' class="add-user-row__item" id="addUserButton">
+                            <div :class="[isMaxInputsCount ? 'inactive-image' : '']">
                                 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <rect width="40" height="40" rx="20" fill="#2683FF" />
                                     <path d="M25 18.977V21.046H20.9722V25H19.0046V21.046H15V18.977H19.0046V15H20.9722V18.977H25Z" fill="white" />
                                 </svg>
                             </div>
-                            <p v-bind:class="[isMaxInputsCount ? 'inactive-label' : '']">Add Another</p>
+                            <p :class="[ isMaxInputsCount ? 'inactive-label' : '' ]">Add Another</p>
                         </div>
                     </div>
                     <div class='add-user__form-container__button-container'>
@@ -44,7 +44,7 @@
                     </div>
                 </div>
                 <div class='add-user__close-cross-container'>
-                    <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' v-on:click='onClose'>
+                    <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' @click='onClose'>
                         <path d='M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z' fill='#384B65'/>
                     </svg>
                 </div>
@@ -55,7 +55,7 @@
                     <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/>
                 </svg>
                 <div class="notification-wrap__text">
-                    <p>If the team member you want to invite to join the project is still not on this Satellite, please share this link to the signup page and ask them to register here: <a>www.storj.io/satellite/register</a></p>
+                    <p>If the team member you want to invite to join the project is still not on this Satellite, please share this link to the signup page and ask them to register here: <router-link target="_blank" exact to="/register" >{{registerPath}}</router-link></p>
                 </div>
             </div>
         </div>
@@ -69,6 +69,7 @@ import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
 import { PM_ACTIONS, NOTIFICATION_ACTIONS, APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { EmailInput } from '@/types/EmailInput';
 import { validateEmail } from '@/utils/validation';
+import ROUTES from '@/utils/constants/routerConstants';
 
 @Component(
     {
@@ -190,7 +191,7 @@ import { validateEmail } from '@/utils/validation';
                 return this.$data.inputs.some((element: EmailInput) => {
                     return element.error;
                 });
-            }
+            },
          },
         computed: {
             isMaxInputsCount: function(): boolean {
@@ -207,6 +208,9 @@ import { validateEmail } from '@/utils/validation';
 
                 return false;
             },
+            registerPath: function (): string {
+                return location.host + ROUTES.REGISTER.path;
+            }
         },
         components: {
             Button
@@ -299,6 +303,15 @@ export default class AddUserPopup extends Vue {}
         font-family: 'font_regular' !important;
         font-size: 16px;
         line-height: 25px;
+
+        a {
+            color: #2683FF;
+            cursor: pointer;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
     }
 
     .add-user {
@@ -485,6 +498,15 @@ export default class AddUserPopup extends Vue {}
                     margin-right: 10px;
                 }
             }
+
+            a {
+                cursor: pointer;
+                color: #2683FF;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
         }
     }
 
diff --git a/web/satellite/src/views/login/login.scss b/web/satellite/src/views/login/login.scss
index ebf5ebbd7..f28b83e7f 100644
--- a/web/satellite/src/views/login/login.scss
+++ b/web/satellite/src/views/login/login.scss
@@ -180,10 +180,13 @@
       font-size: 15px;
       line-height: 18px;
       text-align: center;
-      text-decoration: none;
-      color: #66686C;
+      color: #2683FF;
       margin-block-start: 0;
       margin-block-end: 0;
+
+      &:hover {
+        text-decoration: underline;
+      }
     }
 
     &__signature {
@@ -218,8 +221,11 @@
       padding-left: 15px;
       padding-right: 15px;
       min-width: 140px;
-      text-decoration: none;
-      color: #66686C;
+      color: #2683FF;
+
+      &:hover {
+        text-decoration: underline;
+      }
 
       .bold {
         font-family: 'font_medium';
diff --git a/web/satellite/src/views/register/register.html b/web/satellite/src/views/register/register.html
index 36cc9d057..0a658c7ee 100644
--- a/web/satellite/src/views/register/register.html
+++ b/web/satellite/src/views/register/register.html
@@ -1,15 +1,15 @@
 <!--Copyright (C) 2019 Storj Labs, Inc.-->
 <!--See LICENSE for copying information.-->
 
-<div class="register-container" v-on:keyup.enter="onCreateClick">
-	<div v-bind:class="loadingClassName">
+<div class="register-container" @keyup.enter="onCreateClick">
+	<div :class="loadingClassName">
 		<img src="../../../static/images/register/Loading.gif">
 	</div>
 	<img class="image" src="../../../static/images/AuthImage.svg" alt="" >
 	<div class="register-container__wrapper">
 		<div class="register-container__header">
-			<img class="register-container__logo" src="../../../static/images/Logo.svg" alt="logo" v-on:click="onLogoClick">
-			<div class="register-container__register-button" v-on:click.prevent="onLoginClick">
+			<img class="register-container__logo" src="../../../static/images/Logo.svg" alt="logo" @click="onLogoClick">
+			<div class="register-container__register-button" @click.prevent="onLoginClick">
 				<p>Login</p>
 			</div>
 		</div>
@@ -77,11 +77,11 @@
 					<div class="register-area__submit-container__terms-area">
 						<label class="container">
 							<input type="checkbox" v-model="isTermsAccepted">
-							<span v-bind:class="[isTermsAcceptedError ? 'checkmark error': 'checkmark']"></span>
+							<span :class="[isTermsAcceptedError ? 'checkmark error': 'checkmark']"></span>
 						</label>
 						<h2>I agree to the <a href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a></h2>
 					</div>
-					<div id="createAccountButton" class="register-area__submit-container__create-button" v-on:click.prevent="onCreateClick">
+					<div id="createAccountButton" class="register-area__submit-container__create-button" @click.prevent="onCreateClick">
 						<p>Create Account</p>
 					</div>
 				</div>
diff --git a/web/satellite/src/views/register/register.scss b/web/satellite/src/views/register/register.scss
index 1528ee527..aee684bce 100644
--- a/web/satellite/src/views/register/register.scss
+++ b/web/satellite/src/views/register/register.scss
@@ -161,7 +161,7 @@ body {
       }
 
       a {
-        color: #384B65;
+        color: #2683FF;
         font-family: 'font_bold';
 
         &:hover {