Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rfontanarosa merged 15 commits into from
Mar 1, 2026
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
623007d
Replace mat-chip Sign in button with Sign in with Google button
sidd190 Jan 26, 2026
c8d2033
Merge branch 'master' into fix/2368/update-sign-in-button-styling
sidd190 Jan 26, 2026
29a49db
Merge branch 'master' into fix/2368/update-sign-in-button-styling
sidd190 Jan 27, 2026
8eea1be
Merge branch 'master' into fix/2368/update-sign-in-button-styling
rfontanarosa Feb 4, 2026
0e9c770
Merge branch 'master' into fix/2368/update-sign-in-button-styling
rfontanarosa Feb 9, 2026
860e975
Merge branch 'master' into fix/2368/update-sign-in-button-styling
rfontanarosa Feb 13, 2026
b79d03e
Merge branch 'master' into fix/2368/update-sign-in-button-styling
rfontanarosa Feb 15, 2026
e492ab8
Merge branch 'master' into fix/2368/update-sign-in-button-styling
rfontanarosa Feb 17, 2026
608092f
Merge branch 'master' into fix/2368/update-sign-in-button-styling
rfontanarosa Feb 20, 2026
b6ee6f0
Merge branch 'master' into fix/2368/update-sign-in-button-styling
rfontanarosa Feb 24, 2026
b9a7407
Merge branch 'master' into fix/2368/update-sign-in-button-styling
rfontanarosa Feb 27, 2026
0ae6f1e
Fix according to review and add logo element as per branding guidelines
sidd190 Mar 1, 2026
e709abe
Merge branch 'fix/2368/update-sign-in-button-styling' of https://gith…
sidd190 Mar 1, 2026
c6ca005
Merge branch 'master' into fix/2368/update-sign-in-button-styling
rfontanarosa Mar 1, 2026
c09d79b
Update Google sign-in button text for localization
rfontanarosa Mar 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion web/src/app/components/shared/sign-in-page/sign-in-page.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,17 @@
Sign in to continue
</p>
<div class="buttons">
<button mat-flat-button color="primary" (click)="onGoogleSignIn()">
Copy link
Copy Markdown
Collaborator

@rfontanarosa rfontanarosa Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @sidd190, instead of hardcoding the SVG paths, I'd suggest using the official asset. I've found it here: https://developers.google.com/identity/branding-guidelines.

<img src="assets/img/web_light_rd_na.svg" alt="" />

I've already updated the file to have a transparent background (fill="none") and removed the border, so the hover state on the button will work correctly without being blocked by a white box. This should also help you clean up some CSS.

Image

<button
class="google-signin-btn"
(click)="onGoogleSignIn()"
type="button"
aria-label="Sign in with Google">
Copy link
Copy Markdown
Collaborator

@rfontanarosa rfontanarosa Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you please remove the aria-label? we already have "Sign in with Google" inside.

<svg class="google-logo" viewBox="0 0 24 24" aria-hidden="true">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
Sign in with Google
</button>
</div>
Expand Down
48 changes: 48 additions & 0 deletions web/src/app/components/shared/sign-in-page/sign-in-page.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,52 @@

.buttons {
margin-top: 48px;
display: flex;
justify-content: center;
}

.google-signin-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 24px;
Copy link
Copy Markdown
Collaborator

@rfontanarosa rfontanarosa Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;
}
}

.google-logo {
Copy link
Copy Markdown
Collaborator

@rfontanarosa rfontanarosa Feb 9, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this .google-logo

width: 18px;
height: 18px;
flex-shrink: 0;
}