From 83c89f98bd328d96d41568fd9ff72c2e079ed207 Mon Sep 17 00:00:00 2001
From: Matthijs Smets <matthijs.smets@hotmail.com>
Date: Fri, 13 Dec 2024 16:23:54 +0100
Subject: [PATCH 1/2] feat: add ladybug mascot to top right corner next to
 version

---
 src/app/app.component.css  | 12 ++++++++++++
 src/app/app.component.html |  4 ++--
 src/app/app.component.ts   |  4 ++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index d2286894..77bc0d10 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -34,3 +34,15 @@ a:hover {
     color: red;
   }
 }
+
+.version {
+  margin: auto 0.25rem auto auto;
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.mascot {
+  width: 1.2rem;
+  height: 1.2rem;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index f5bce3e4..860008c7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -15,9 +15,9 @@
         </a>
       </li>
     }
-    <li class="ml-auto my-auto mr-1" id="version">
+    <li class="version" id="version">
+      <img ngSrc="favicon.ico" alt="" width="64" height="64" class="mascot">
       <a>v{{ frontendVersion }}</a>
-      <ng-template></ng-template>
     </li>
   </ul>
   <router-outlet></router-outlet>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 87a990ad..f30ee673 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { Location } from '@angular/common';
+import { Location, NgOptimizedImage } from '@angular/common';
 import { Title } from '@angular/platform-browser';
 import { CompareComponent } from './compare/compare.component';
 import { TestComponent } from './test/test.component';
@@ -25,7 +25,7 @@ import { VersionService } from './shared/services/version.service';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   standalone: true,
-  imports: [RouterLinkActive, RouterLink, RouterOutlet, ToastComponent],
+  imports: [RouterLinkActive, RouterLink, RouterOutlet, ToastComponent, NgOptimizedImage],
 })
 export class AppComponent implements OnInit, OnDestroy {
   frontendVersion?: string;

From 9bafd887558c263293195b1739c1948d14d0f385 Mon Sep 17 00:00:00 2001
From: Matthijs Smets <matthijs.smets@hotmail.com>
Date: Fri, 13 Dec 2024 16:27:34 +0100
Subject: [PATCH 2/2] refactor: remove redundant styling

---
 src/app/app.component.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 77bc0d10..7702ac8e 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,7 +1,3 @@
-#version:hover {
-  background-color: #f3f3f4 !important;
-}
-
 .nav-link {
   display: flex;
   flex-direction: row;