fresh look

frontend/src/components/Dashboard.vue

@@ -236,4 +236,23 @@ export default {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   }
 }
+
+: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;
+}
+
+:deep(.v-toolbar-title) {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: rgb(15 23 42 / 78%);
+}
+
+:deep(.v-btn.v-btn--icon) {
+  width: 34px;
+  height: 34px;
+}
 </style>

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>

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>

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>

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>

frontend/src/components/WorkflowDashboard.vue

@@ -68,5 +68,8 @@ export default {
 </script>
 
 <style scoped>
+#workflows-dashboard {
+  padding: 0 12px 16px;
+}
 
 </style>

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
       }
     },