now

Author: esteecodes

src/app/app.component.ts

@@ -1,7 +1,11 @@
-import { Component } from "@angular/core";
+import { Component, Inject, inject } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
 import { HeaderComponent } from "./components/header.component";
 import { FooterComponent } from "./components/footer.component";
+import { Subscription } from "rxjs";
+import { BlogInfo } from "./models/blog-info";
+import { BlogService } from "./services/blog.service";
+import { DOCUMENT } from "@angular/common";
 
 
 @Component({
@@ -26,4 +30,42 @@ import { FooterComponent } from "./components/footer.component";
 		`,
 	],
 })
-export class AppComponent {}
+export class AppComponent {
+  title = "angular-material-app";
+	blogURL!: string;
+	blogInfo!: BlogInfo;
+	siteFavicon: any;
+	blogService: BlogService = inject(BlogService);
+	private querySubscription?: Subscription;
+
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+	ngOnInit(): void {
+		this.blogURL = this.blogService.getBlogURL();
+		this.siteFavicon = this.document.querySelector(
+			'link[rel="icon"]'
+		) as HTMLLinkElement;
+		this.querySubscription = this.blogService
+			.getBlogInfo(this.blogURL)
+			.subscribe((data) => {
+				this.blogInfo = data;
+				if (this.blogInfo.isTeam && this.blogInfo.favicon) {
+					this.siteFavicon.href = this.blogInfo.favicon;
+				} else {
+					this.siteFavicon.href = "favicon.ico";
+				}
+				if (!this.blogInfo.isTeam) {
+					this.blogService.getAuthorInfo(this.blogURL).subscribe((data) => {
+						if (data.profilePicture) {
+							this.siteFavicon.href = data.profilePicture;
+						} else {
+							this.siteFavicon.href = "favicon.ico";
+						}
+					});
+				}
+			});
+	}
+	ngOnDestroy(): void {
+		this.querySubscription?.unsubscribe();
+	}
+}

src/app/components/header.component.ts

@@ -126,10 +126,8 @@ import { FollowDialogComponent } from "../partials/follow-dialog.component";
 						display: flex;
 						align-items: center;
 						justify-content: center;
+            gap: 0.6rem;
 
-						.control-button {
-							margin-right: 0.6rem;
-						}
 					}
 
 					.follow {

src/styles.scss

@@ -62,10 +62,6 @@ body {
     color: $button-color;
   }
 
-  .mat-mdc-text-field-wrapper {
-    background-color: $button-bg !important;
-  }
-
   mat-toolbar {
     color: $light-text-color;
     color: $button-color;
@@ -104,7 +100,7 @@ body {
 
   .search-result {
     &:hover {
-      background-color: #444 !important;
+      background-color: #808080a2;
       color: #a97aa7;
     }
   }
@@ -181,6 +177,12 @@ body {
       }
     }
 
+    .search-result {
+      &:hover {
+        color: $light-button-color;
+      }
+    }
+
     .footer {
       background-color: $light-bg-color;