refactor: Update favicon and application logo in App.vue

halbritter-lab · Sep 8, 2024 · 508184e · 508184e
1 parent 53e5e3c
commit 508184e
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Loading...</title> <!-- Temporary title while JS sets the final one -->
   </head>

diff --git a/public/logo.png b/public/logo.png
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/logo.webp b/public/logo.webp
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,15 @@
 <template>
   <v-app :theme="isDark ? 'dark' : 'light'">
     <v-toolbar color="secondary" dark>
+      <img
+        src="../logo.webp"
+        alt="ADPKD-Risk Logo"
+        class="mx-3 app-logo"
+      >
       <v-toolbar-title class="d-flex align-center">
-        <h1 class="app-title">ADPKD Risk Calculator</h1>
+        <h1 class="app-title">
+          ADPKD Risk Calculator
+          </h1>
          <span class="app-version">v{{ version }}</span>
       </v-toolbar-title>
       <v-spacer></v-spacer>
@@ -443,4 +450,11 @@ export default {
   font-weight: normal; /* Less emphasis compared to the title */
   padding-left: 10px; /* Space between title and version number */
 }
+
+/* Styles for the application logo */
+.app-logo {
+  max-width: 48px; /* Fixed maximum width */
+  margin-right: 20px; /* Spacing between logo and title */
+  animation: fadeIn 2s ease-out forwards;
+}
 </style>