[satlab-ui] Use official Google G icon on Sign in with Google button Replace the generic login Material icon on the Google Account Authentication Sign in with Google buttons with the standard 4-color Google G badge to align with Google Sign-In branding guidelines. BUG=b:581401180 TEST=npm run compile && ng build --configuration=production && ng test --watch=false Change-Id: I9e10dfea6c11806f32910f04e433ea9f9b41e277 Reviewed-on: https://chromium-review.googlesource.com/c/chromiumos/platform/satlab/+/8752162 Auto-Submit: Misha Bilyi <mykhailobilyi@google.com> Reviewed-by: Tomasz Jakubowski <jakubowskit@google.com> Tested-by: Misha Bilyi <mykhailobilyi@google.com> Commit-Queue: Misha Bilyi <mykhailobilyi@google.com>
diff --git a/src/satlab-ui/src/app/configuration/configuration.component.html b/src/satlab-ui/src/app/configuration/configuration.component.html index d3df211..e637dcb 100644 --- a/src/satlab-ui/src/app/configuration/configuration.component.html +++ b/src/satlab-ui/src/app/configuration/configuration.component.html
@@ -93,6 +93,33 @@ </div> </mat-card-content> + <ng-template #googleGIcon> + <svg + viewBox="0 0 48 48" + width="16" + height="16" + focusable="false" + aria-hidden="true" + > + <path + fill="#4285F4" + d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" + /> + <path + fill="#EA4335" + d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" + /> + <path + fill="#FBBC05" + d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" + /> + <path + fill="#34A853" + d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" + /> + </svg> + </ng-template> + <mat-card-actions class="google-card-actions"> <!-- View mode when already authenticated --> <ng-container *ngIf="isAuthenticated && cloudConfigurationDisable"> @@ -114,7 +141,9 @@ class="google-signin-btn" (click)="onStartGoogleSignIn()" > - <mat-icon>login</mat-icon> + <span matButtonIcon class="google-g-badge" aria-hidden="true"> + <ng-container *ngTemplateOutlet="googleGIcon"></ng-container> + </span> Sign in with Google </button> </ng-container> @@ -148,10 +177,13 @@ <button mat-raised-button color="primary" + class="google-signin-btn" [disabled]="!oauthBucket.trim() || cloudConfigurationLoading" (click)="onStartGoogleSignIn()" > - <mat-icon>login</mat-icon> + <span matButtonIcon class="google-g-badge" aria-hidden="true"> + <ng-container *ngTemplateOutlet="googleGIcon"></ng-container> + </span> Sign in with Google to Apply </button> <button
diff --git a/src/satlab-ui/src/app/configuration/configuration.component.scss b/src/satlab-ui/src/app/configuration/configuration.component.scss index eeee254..b2ec25b 100644 --- a/src/satlab-ui/src/app/configuration/configuration.component.scss +++ b/src/satlab-ui/src/app/configuration/configuration.component.scss
@@ -143,10 +143,27 @@ .google-signin-btn { display: inline-flex; align-items: center; - gap: 0.5rem; - padding: 0 1.5rem; + padding: 0 1.25rem 0 0.65rem; height: 40px; font-weight: 500; + + .google-g-badge { + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: 50%; + background-color: $color-white; + margin-right: 0.6rem; + flex-shrink: 0; + } + + &:disabled .google-g-badge { + opacity: 0.55; + } } } }
diff --git a/src/satlab-ui/src/app/configuration/configuration.component.spec.ts b/src/satlab-ui/src/app/configuration/configuration.component.spec.ts index bf5db2f..678ebe8 100644 --- a/src/satlab-ui/src/app/configuration/configuration.component.spec.ts +++ b/src/satlab-ui/src/app/configuration/configuration.component.spec.ts
@@ -371,6 +371,18 @@ component.ngOnDestroy(); expect(component['stopPolling']).toHaveBeenCalled(); }); + + it('should render the Google G icon inside the Sign in with Google button', fakeAsync(() => { + fixture.detectChanges(); + tick(); + + const host = fixture.nativeElement as HTMLElement; + const googleGIcon = host.querySelector( + '.google-signin-btn .google-g-badge svg' + ); + expect(googleGIcon).not.toBeNull(); + expect(googleGIcon?.querySelectorAll('path').length).toBe(4); + })); }); describe('Completing Setup', () => {