From 4dadd6b30e35e1ad13e31cc769d370027c5595b9 Mon Sep 17 00:00:00 2001
From: baztian <bastian.dev@gmail.com>
Date: Mon, 13 Apr 2026 17:42:56 +0200
Subject: [PATCH 1/3] Some styling improvements

Replaced script/typewriter fonts with a modern sans-serif stack.

Reduced the very large fixed title size to a responsive size (clamp(...)) so it looks cleaner on both desktop and smaller screens.

Some minor other improvemnts
---
 frontend/src/components/DashboardHeader.vue | 42 ++++++++++++++++-----
 frontend/vite.config.js                     |  2 +-
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/DashboardHeader.vue b/frontend/src/components/DashboardHeader.vue
index 142ab082..c1469df1 100644
--- a/frontend/src/components/DashboardHeader.vue
+++ b/frontend/src/components/DashboardHeader.vue
@@ -1,11 +1,12 @@
 <template>
   <v-app-bar
-    elevation="5"
+    class="dashboard-header"
+    elevation="2"
   >
     <v-row no-gutters>
       <v-col cols="10">
         <v-app-bar-title
-          class="header-title text-center font-weight-bold pl-10"
+          class="header-title text-center font-weight-bold pl-8"
         >
           <span>Gitaction Board</span> <span class="version">(v{{ version }})</span>
         </v-app-bar-title>
@@ -16,7 +17,7 @@
       >
         <v-app-bar-title
           id="sub-header"
-          class="pr-4 text-right font-weight-bold align-center fill-height d-inline-flex flex-row-reverse mt-3"
+          class="sub-header pr-6 text-right font-weight-medium align-center fill-height d-inline-flex flex-row-reverse"
         >
           {{ subHeader }}
         </v-app-bar-title>
@@ -45,20 +46,41 @@ export default {
 </script>
 
 <style scoped>
+.dashboard-header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  background: linear-gradient(180deg, rgba(250, 251, 252, 0.98) 0%, rgba(245, 247, 249, 0.98) 100%);
+  backdrop-filter: blur(6px);
+}
+
 .header-title {
-    line-height: normal;
-    font-size: 50px;
-    font-family: "Snell Roundhand", cursive;
+  line-height: 1.1;
+  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
+  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 0.01em;
 }
 
 .version {
-    font-size: 15px;
-    font-family: "American Typewriter", serif;
+  font-size: 0.95rem;
+  font-family: inherit;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.58);
 }
 
 #sub-header {
-    font-size: 20px;
-    font-family: "American Typewriter", serif;
+  font-size: 1rem;
+  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 0.02em;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+:global(.v-theme--dark) .dashboard-header {
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+  background: linear-gradient(180deg, rgba(24, 28, 34, 0.96) 0%, rgba(20, 24, 30, 0.96) 100%);
+}
+
+:global(.v-theme--dark) .version,
+:global(.v-theme--dark) #sub-header {
+  color: rgba(255, 255, 255, 0.8);
 }
 
 </style>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 1b4eb0c7..7f852cd3 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -26,7 +26,7 @@ export default defineConfig({
   server: {
     proxy: {
       '^/v1|^/config|^/login|^/oauth2|^/logout': {
-        target: 'http://localhost:8080',
+        target: process.env.VITE_PROXY_API_TARGET || 'http://localhost:8080',
         changeOrigin: true
       }
     },

From 027bc3ffa981c97d10945915a8a5829e747217a0 Mon Sep 17 00:00:00 2001
From: baztian <bastian.dev@gmail.com>
Date: Mon, 13 Apr 2026 17:49:23 +0200
Subject: [PATCH 2/3] Further modernize dashboard ui polish

Refresh dashboard visuals with a clean sans-serif look and subtle modern surface styling.
Add light interaction polish: smoother loading/content transitions and refined card hover depth.
Align login page typography/card styling with the updated dashboard header
---
 frontend/src/components/Dashboard.vue | 24 ++++++++++++++++++++++++
 frontend/src/components/GridCell.vue  | 16 ++++++++++++++++
 frontend/src/components/LoginPage.vue | 18 +++++++++++++-----
 frontend/src/components/Spinner.vue   | 15 +++++++++++++++
 4 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index bc3083a0..8e34353e 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -223,10 +223,12 @@ export default {
 <style scoped>
 .spinner-container {
     height: 90vh !important;
+  animation: softPulse 900ms ease-in-out infinite alternate;
 }
 
 .grid-cells {
     display: grid;
+  animation: fadeLiftIn 170ms ease-out;
 
   &.build-monitor {
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -236,4 +238,26 @@ export default {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   }
 }
+
+@keyframes fadeLiftIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes softPulse {
+  from {
+    opacity: 0.72;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
 </style>
diff --git a/frontend/src/components/GridCell.vue b/frontend/src/components/GridCell.vue
index 53eac7af..837ac755 100644
--- a/frontend/src/components/GridCell.vue
+++ b/frontend/src/components/GridCell.vue
@@ -165,6 +165,17 @@ export default {
 .grid-cell {
   display: flex;
   flex-direction: column;
+  border: 1px solid rgb(255 255 255 / 22%);
+  box-shadow: 0 6px 18px rgb(17 24 39 / 18%);
+  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .grid-cell:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 28px rgb(17 24 39 / 26%);
+    filter: saturate(1.03);
+  }
 }
 
 .success {
@@ -179,4 +190,9 @@ export default {
   background-color: #6d6a6a;
 }
 
+:global(.v-theme--dark) .grid-cell {
+  border-color: rgb(255 255 255 / 10%);
+  box-shadow: 0 8px 22px rgb(0 0 0 / 48%);
+}
+
 </style>
diff --git a/frontend/src/components/LoginPage.vue b/frontend/src/components/LoginPage.vue
index af9bfba2..39058059 100644
--- a/frontend/src/components/LoginPage.vue
+++ b/frontend/src/components/LoginPage.vue
@@ -184,16 +184,24 @@ export default {
   background-image: radial-gradient(#5f8d77, #282a27);
 }
 
+.v-card {
+  border: 1px solid rgb(255 255 255 / 10%);
+  box-shadow: 0 20px 40px rgb(0 0 0 / 28%);
+}
+
 .header {
-  font-family: "American Typewriter", serif;
-  font-size: 40px;
+  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
+  font-weight: 700;
+  letter-spacing: 0.01em;
 }
 
 .welcome-message {
   margin-bottom: 30px;
-  font-size: 25px;
-  font-weight: bold;
-  font-family: "Snell Roundhand", cursive;
+  font-size: clamp(1rem, 1.8vw, 1.2rem);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  color: rgb(255 255 255 / 88%);
 }
 
 </style>
diff --git a/frontend/src/components/Spinner.vue b/frontend/src/components/Spinner.vue
index 4b0517d6..f68d98c4 100644
--- a/frontend/src/components/Spinner.vue
+++ b/frontend/src/components/Spinner.vue
@@ -14,4 +14,19 @@ export default {
 </script>
 
 <style scoped>
+.v-progress-circular {
+  animation: spinnerEntrance 180ms ease-out;
+}
+
+@keyframes spinnerEntrance {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style>

From 9f0e463731991652a3236df16f541ec696a9c852 Mon Sep 17 00:00:00 2001
From: baztian <bastian.dev@gmail.com>
Date: Mon, 13 Apr 2026 18:11:02 +0200
Subject: [PATCH 3/3] Refine dashboard spacing and toolbar polish

Add consistent padding to workflow dashboard layout.
Improve hidden-items toolbar/button styling for cleaner visual hierarchy.
---
 frontend/src/components/Dashboard.vue         | 33 ++++++++-----------
 frontend/src/components/WorkflowDashboard.vue |  3 ++
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index 8e34353e..59188b19 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -223,12 +223,10 @@ export default {
 <style scoped>
 .spinner-container {
     height: 90vh !important;
-  animation: softPulse 900ms ease-in-out infinite alternate;
 }
 
 .grid-cells {
     display: grid;
-  animation: fadeLiftIn 170ms ease-out;
 
   &.build-monitor {
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -239,25 +237,22 @@ export default {
   }
 }
 
-@keyframes fadeLiftIn {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+:deep(.v-toolbar) {
+  margin-top: 6px;
+  border: 1px solid rgb(15 23 42 / 8%);
+  border-radius: 12px;
+  background-color: rgb(248 250 252 / 92%);
+  padding-inline: 6px;
 }
 
-@keyframes softPulse {
-  from {
-    opacity: 0.72;
-  }
+:deep(.v-toolbar-title) {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: rgb(15 23 42 / 78%);
+}
 
-  to {
-    opacity: 1;
-  }
+:deep(.v-btn.v-btn--icon) {
+  width: 34px;
+  height: 34px;
 }
 </style>
diff --git a/frontend/src/components/WorkflowDashboard.vue b/frontend/src/components/WorkflowDashboard.vue
index d04e51d1..d39f504c 100644
--- a/frontend/src/components/WorkflowDashboard.vue
+++ b/frontend/src/components/WorkflowDashboard.vue
@@ -68,5 +68,8 @@ export default {
 </script>
 
 <style scoped>
+#workflows-dashboard {
+  padding: 0 12px 16px;
+}
 
 </style>