From 7da71d876917484b1039287aba2f7e24c222143c Mon Sep 17 00:00:00 2001
From: Paola <paosanchez30@hotmai.com>
Date: Sat, 10 Jul 2021 20:02:17 -0600
Subject: [PATCH] arreglo de estilos GoogleLogIn

---
 .../webapp/app/login/login.component.html     | 11 +++-
 .../webapp/app/login/login.component.scss     | 53 +++++++++++++++++++
 src/main/webapp/app/login/login.component.ts  |  1 +
 3 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/login/login.component.html b/src/main/webapp/app/login/login.component.html
index 60fbfa0..0e533ea 100644
--- a/src/main/webapp/app/login/login.component.html
+++ b/src/main/webapp/app/login/login.component.html
@@ -129,11 +129,18 @@
               </div>
             </form>
 
-            <div class="mb-3 mb-0">
+            <div class="google-btn w-80 m-auto">
+              <div class="google-icon-wrapper">
+                <img class="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
+              </div>
+              <button class="btn-text" (click)="signInWithGoogle()">Iniciar con Google</button>
+            </div>
+
+            <!--<div class="mb-3 mb-0">
               <button class="btn" (click)="signInWithGoogle()">
                 <i class="fa fa-Google">Iniciar con Google</i>
               </button>
-            </div>
+            </div>-->
           </div>
           <!-- end card-body -->
         </div>
diff --git a/src/main/webapp/app/login/login.component.scss b/src/main/webapp/app/login/login.component.scss
index 192b03b..3ae8435 100644
--- a/src/main/webapp/app/login/login.component.scss
+++ b/src/main/webapp/app/login/login.component.scss
@@ -1,3 +1,56 @@
 body {
   background-color: #f2f2f2 !important;
 }
+
+$white: #fff;
+$google-blue: #4285f4;
+$button-active-blue: #1669f2;
+
+.google-btn {
+  width: 184px;
+  height: 42px;
+  background-color: $google-blue !important;
+  border-radius: 2px;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
+  .google-icon-wrapper {
+    position: absolute;
+    margin-top: 1px;
+    margin-left: 1px;
+    width: 40px;
+    height: 40px;
+    border-radius: 2px;
+    background-color: $white;
+  }
+  .google-icon {
+    position: absolute;
+    margin-top: 11px;
+    margin-left: 11px;
+    width: 18px;
+    height: 18px;
+  }
+  .btn-text {
+    float: right;
+    margin: 5px 5px 0px 0px;
+    color: $white;
+    font-size: 14px;
+    letter-spacing: 0.2px;
+    font-family: 'Roboto';
+    background-color: $google-blue;
+    width: 135px;
+    height: 30px;
+    padding: 6px 6px 7px 6px;
+    border: $google-blue;
+  }
+  &:hover {
+    box-shadow: 0 0 6px $google-blue !important;
+  }
+  &:active {
+    background: $button-active-blue !important;
+  }
+
+  .google-div {
+    margin-left: 150px !important;
+  }
+}
+
+@import url(https://fonts.googleapis.com/css?family=Roboto:500);
diff --git a/src/main/webapp/app/login/login.component.ts b/src/main/webapp/app/login/login.component.ts
index 0176be5..4d2abbd 100644
--- a/src/main/webapp/app/login/login.component.ts
+++ b/src/main/webapp/app/login/login.component.ts
@@ -91,6 +91,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
       () => {
         this.authenticationError = false;
         if (!this.router.getCurrentNavigation()) {
+          window.localStorage.setItem('IsGoogle', 'true');
           // There were no routing during login (eg from navigationToStoredUrl)
           this.router.navigate(['']);
         }