Merge pull request #54 from dinukadesilva/gh-31-imrpove-login-and-sig…

…nup-ui gh-31: Improve login and signup UI
apache · Oct 12, 2020 · 2eb127d · 2eb127d
2 parents e76c6e6 + bc4bf5f
commit 2eb127d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/custos-demo-gateway/src/components/landing/Landing.vue b/custos-demo-gateway/src/components/landing/Landing.vue
@@ -1,18 +1,25 @@
 <template>
     <b-container>
         <b-row align-v="top" align-h="center">
-            <b-col style="min-width: 300px; max-width: 100%">
+            <b-col style="min-width: 300px; max-width: 100%" class="text-center">
                 <h2>Welcome to Custos</h2>
                 <p class="h2-sub">Sign up and start authenticating</p>
+                <div class="main-links">
+                    <b-link href="http://airavata.apache.org/custos/">Learn more</b-link>
+                    <b-link class="ml-5"
+                            href="https://cwiki.apache.org/confluence/display/CUSTOS/Gateways+2020%3ACustos+Tutorial">
+                        Get started
+                    </b-link>
+                </div>
                 <img class="w-100" src="./../../assets/custos_home.png">
             </b-col>
-            <b-col style="max-width: 300px;min-width: 400px;" align-h="center">
+            <b-col style="max-width: 600px;min-width: 300px;" align-h="center">
                 <b-card class="w-100 login-card">
                     <div class="p-2">
-                        <h3 class="mb-2">Do you have an Institution Login ?</h3>
+                        <h3 class="mb-2">(Recommended Option)</h3>
                         <b-button class="primary-btn w-100 text-center mt-2" variant="warning"
                                   v-on:click="this.loadAuthURL">
-                            Register or Login with the Institution Login
+                            Register or Login with your Institution Identity
                         </b-button>
                     </div>
                 </b-card>
@@ -150,7 +157,6 @@
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     h2 {
-        text-align: left;
         font-family: Avenir;
         font-size: 35px;
         font-weight: 900;
@@ -160,7 +166,6 @@
     .h2-sub {
         font-family: Avenir-Roman;
         font-size: 22px;
-        text-align: left;
         color: #203a43;
     }
 
@@ -219,6 +224,13 @@
         font-size: 15px;
     }
 
+    .main-links a {
+        font-family: Avenir;
+        font-size: 20px;
+        font-weight: 600;
+        color: #ea6a0a;
+    }
+
     .additional-links {
         font-size: 13px;
     }

diff --git a/custos-demo-gateway/src/components/registration/CreateAccount.vue b/custos-demo-gateway/src/components/registration/CreateAccount.vue
@@ -1,13 +1,20 @@
 <template>
     <b-container>
         <b-row align-v="top" align-h="center">
-            <b-col style="min-width: 300px; max-width: 100%">
+            <b-col style="min-width: 300px; max-width: 100%" class="text-center">
                 <h2>Welcome to Custos</h2>
                 <p class="h2-sub">Sign up and start authenticating</p>
+                <div class="main-links">
+                    <b-link href="http://airavata.apache.org/custos/">Learn more</b-link>
+                    <b-link class="ml-5"
+                            href="https://cwiki.apache.org/confluence/display/CUSTOS/Gateways+2020%3ACustos+Tutorial">
+                        Get started
+                    </b-link>
+                </div>
                 <img class="w-100" src="./../../assets/custos_home.png">
             </b-col>
             <b-col style="max-width: 600px;min-width: 300px;" align-h="center">
-                <b-card class="w-100 mt-3 login-card">
+                <b-card class="w-100 login-card">
                     <form v-on:submit.prevent="registerUser" class="p-2 text-left">
                         <h3 class="mb-3">Create Account</h3>
                         <div class="p-2">
@@ -229,7 +236,6 @@
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     h2 {
-        text-align: left;
         font-family: Avenir;
         font-size: 35px;
         font-weight: 900;
@@ -239,7 +245,6 @@
     .h2-sub {
         font-family: Avenir-Roman;
         font-size: 22px;
-        text-align: left;
         color: #203a43;
     }
 
@@ -298,6 +303,13 @@
         font-size: 15px;
     }
 
+    .main-links a {
+        font-family: Avenir;
+        font-size: 20px;
+        font-weight: 600;
+        color: #ea6a0a;
+    }
+
     .additional-links {
         font-size: 13px;
     }