chore(design): Add logout icon and use mdi (#392)

* wip

* remove unused code

* use mdi heart outline

package.json

@@ -42,6 +42,7 @@
     "@angular/router": "^18.2.12",
     "@auth0/auth0-angular": "^2.2.3",
     "@azure/storage-blob": "^12.26.0",
+    "@mdi/font": "^7.4.47",
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
     "express": "^4.21.2",

src/app/shared/components/footer/footer.component.html

@@ -11,7 +11,7 @@
   <div class="flex-1 flex justify-center">
     <div class="flex items-center text-sm text-black/70 space-x-1 text-center">
       <p class="flex items-center flex-wrap justify-center">
-        © {{ currentYear }} - made with <app-icon-heart /> by
+        © {{ currentYear }} - made with <i class="mdi mdi-heart-outline text-lg mx-1"></i> by
         <a
           class="ml-1 mr-2 hover:underline font-bold"
           target="_blank"

src/app/shared/components/footer/footer.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 import { IconLogoComponent } from '../icon-logo/icon-logo.component';
-import { IconHeartComponent } from '../icon-heart/icon-heart.component';
 
 @Component({
   selector: 'app-footer',
   standalone: true,
-  imports: [IconLogoComponent, IconHeartComponent],
+  imports: [IconLogoComponent],
   templateUrl: './footer.component.html',
 })
 export class FooterComponent {

src/app/shared/components/login-button/login-button.component.html

@@ -1,8 +1,9 @@
 <ng-container *ngIf="authState$ | async as authState">
   <button
-    class="rounded-full bg-tint text-primary text-[16px] font-bold py-3 px-5 text-secondary"
+    class="rounded-full bg-tint text-secondary text-[16px] font-bold py-3 px-5 flex items-center gap-2"
     (click)="loginOrLogout()"
     [disabled]="authState.isLoading">
-    {{ buttonText$ | async }}
+    <span>{{ buttonText$ | async }}</span>
+    <i *ngIf="authState.isAuthenticated" class="mdi mdi-logout text-lg"></i>
   </button>
 </ng-container>

src/styles.scss

@@ -1,3 +1,4 @@
+@import '@mdi/font/css/materialdesignicons.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;