From d8f52cea61a7b0ed97491cd11057e9d09e4faddc Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Mon, 7 Apr 2025 19:04:49 +0200
Subject: [PATCH] Refactor Gitea link styling in MainNav component

Moved inline styles to a scoped CSS class for better maintainability and readability. Added hover effect and smooth transition to enhance user interface consistency.
---
 frontend/src/components/MainNav.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/MainNav.vue b/frontend/src/components/MainNav.vue
index bf1719e..c56118a 100644
--- a/frontend/src/components/MainNav.vue
+++ b/frontend/src/components/MainNav.vue
@@ -5,11 +5,7 @@
         <v-app-bar-title style="align-self: center">
           <span style="font-size: 20px">
             ALHP Status
-            <a
-              class="ms-2"
-              href="https://somegit.dev/ALHP/ALHP.GO"
-              style="color: white; font-size: 25px"
-              target="_blank">
+            <a class="ms-2 gitea-link" href="https://somegit.dev/ALHP/ALHP.GO" target="_blank">
               <i class="fa fa-gitea"></i>
             </a>
           </span>
@@ -28,4 +24,15 @@ import { useDisplay } from 'vuetify'
 const { mobile, width } = useDisplay()
 </script>
 
-<style scoped></style>
+<style scoped>
+.gitea-link {
+  color: white;
+  font-size: 25px;
+  text-decoration: none; /* Optional: To prevent underlining */
+  transition: color 0.2s; /* Smooth color transition */
+}
+
+.gitea-link:hover {
+  color: #609926;
+}
+</style>