Merge pull request #108 from GSA/feature/80_login_gov

Update the Format for Login Page

Author: BuckinghamAJ

src/app/auth/userlogin/userlogin.component.html

@@ -5,7 +5,7 @@
   </div>
 
   <div class="text-center">
-    <button class="srt-button"
+    <button class="srt-button m-2"
             style="float:none; display:inline; margin-top:3em;"
             id="login"
             aria-label="Login with MAX"
@@ -21,10 +21,8 @@
                         window.location = 'http://' + server_host + '/api/casLogin'
                       }()) ">Login with MAX
     </button>
-  </div>
-  <div class="text-center">
-    <button class="srt-button"
-            style="float:none; display:inline; margin-top:3em;"
+    <button class="srt-button m-2"
+            style="float:none; display:inline; margin-top:3em; "
             id="login"
             aria-label="Login with Login.gov"
             onClick=" (function() {
@@ -37,10 +35,11 @@
                         //default to current name for dev servers
                         if (server_host === '') { server_host = 'localhost:3000';}
                         window.location = 'http://' + server_host + '/api/login'
-                      }()) ">Login with Login.gov
+                      }()) ">
+                      <img src="/assets/login-gov-logo.svg" alt="login-gov-logo" style="width: -webkit-fill-available;"/>
     </button>
   </div>
-
+  
 </main>
 
 

src/assets/login-gov-logo.svg

@@ -68,19 +68,19 @@ button.p-button {
 button.srt-button,
 div.srt-button {
   width: 150px;
-  background-color: #112e51;
+  background-color: #bbbbbb;
 }
 
 .srt-button {
   background-color: #337ab7;
   border-radius: 5px;
   border: none #2e6da4;
-  color: #fff;
+  color: #112e51;
   cursor: pointer;
   display: table;
   float: right;
-  font-weight: 500;
-  font-size: 16px;
+  font-weight: 800;
+  font-size: 20px;
   height: 35px;
   text-align: center;
   transition: all 100ms linear;