Replace mat-chip Sign in button with Sign in with Google button (#2413)

Co-authored-by: Roberto Fontanarosa <robertofontanarosa@gmail.com>

Author: sidd190

web/src/app/components/shared/sign-in-page/sign-in-page.component.html

@@ -30,16 +30,13 @@
       </p>
 
       <div class="buttons">
-        <button
-          mat-flat-button
-          color="primary"
+        <button 
+          class="google-signin-btn" 
           (click)="onGoogleSignIn()"
-          i18n-aria-label="@@app.login.signInWithGoogle"
-          aria-label="Sign in with Google"
+          type="button"
         >
-          <ng-container i18n="@@app.login.signInWithGoogle"
-            >Sign in with Google</ng-container
-          >
+          <img src="assets/img/web_light_rd_na.svg" alt="" class="google-logo" />
+          <span i18n="@@app.login.signInWithGoogle">Sign in with Google</span>
         </button>
       </div>
     </mat-card-content>

web/src/app/components/shared/sign-in-page/sign-in-page.component.scss

@@ -42,4 +42,46 @@
 
 .buttons {
   margin-top: 48px;
+  display: flex;
+  justify-content: center;
+}
+
+.google-signin-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 0 0 12px 0;
+  border: 1px solid #dadce0;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #3c4043;
+  font-family: 'Google Sans', Roboto, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 40px;
+
+  &:hover {
+    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+    background-color: #f8f9fa;
+  }
+
+  &:active {
+    background-color: #f1f3f4;
+    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+  }
+
+  &:disabled {
+    background-color: #f1f3f4;
+    color: #9aa0a6;
+    cursor: not-allowed;
+    border-color: #f1f3f4;
+  }
 }