style: added the logos on loginpage Azure-Samples#292

Surya-V-28 · Aug 28, 2023 · f880ec1 · f880ec1
1 parent f9e3bdc
commit f880ec1
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 4 deletions.
diff --git a/packages/portal/src/app/authentication/authentication.component.html b/packages/portal/src/app/authentication/authentication.component.html
@@ -6,7 +6,11 @@ <h1>Join with your favorite social media account</h1>
     <nav>
 
       <a *ngFor="let provider of providers" mat-raised-button class="button btn__{{provider.id}}" [href]="loginWith(provider.id)">
-        Sign in with {{ provider.name }}
+        <div class="content">
+          <mat-icon svgIcon="{{provider.id}}" />
+
+          <span class="text">Sign in with {{ provider.name }}</span>
+        </div>
       </a>
 
     </nav>

diff --git a/packages/portal/src/app/authentication/authentication.component.scss b/packages/portal/src/app/authentication/authentication.component.scss
@@ -24,9 +24,20 @@ section {
     width: 100%;
     max-width: 400px;
 
-    button {
+    a {
       width: 100%;
       margin: 10px 0;
+
+      .content {
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+
+        .text {
+          margin-left: 16px;
+        }
+      }
     }
   }
   img {
@@ -46,7 +57,7 @@ section {
 }
 
 .btn__twitter {
-  background-color: #1da1f2;
+  background-color: #183343dd;
   color: #fff;
 }
 

diff --git a/packages/portal/src/app/authentication/authentication.component.ts b/packages/portal/src/app/authentication/authentication.component.ts
@@ -1,6 +1,8 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnInit, inject } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
+import { DomSanitizer } from "@angular/platform-browser";
+import { MatIconRegistry, MatIconModule } from "@angular/material/icon";
 import { MatCardModule } from "@angular/material/card";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
@@ -12,10 +14,16 @@ import { TextBlockComponent } from "../shared/text-block/text-block.component";
   selector: "app-authentication",
   templateUrl: "./authentication.component.html",
   styleUrls: ["./authentication.component.scss"],
-  imports: [CommonModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, TextBlockComponent],
+  imports: [CommonModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, TextBlockComponent, MatIconModule],
   standalone: true,
 })
 export class AuthenticationComponent implements OnInit {
+  public constructor(iconRegistry: MatIconRegistry, santizer: DomSanitizer) {
+    for (const provider of this.providers) {
+      iconRegistry.addSvgIcon(provider.id, santizer.bypassSecurityTrustResourceUrl(`../assets/company-logos/${provider.id}.svg`));
+    }
+  }
+
   redirectURL = "/home";
 
   providers = [

diff --git a/packages/portal/src/assets/company-logos/apple.svg b/packages/portal/src/assets/company-logos/apple.svg
diff --git a/packages/portal/src/assets/company-logos/facebook.svg b/packages/portal/src/assets/company-logos/facebook.svg
diff --git a/packages/portal/src/assets/company-logos/github.svg b/packages/portal/src/assets/company-logos/github.svg
diff --git a/packages/portal/src/assets/company-logos/google.svg b/packages/portal/src/assets/company-logos/google.svg
diff --git a/packages/portal/src/assets/company-logos/microsoft.svg b/packages/portal/src/assets/company-logos/microsoft.svg
diff --git a/packages/portal/src/assets/company-logos/twitter.svg b/packages/portal/src/assets/company-logos/twitter.svg