From f8e992029ac70a127b2441748f9ec17b23993519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= <andreas@kruhlmann.dev>
Date: Tue, 13 Jan 2026 22:37:33 +0100
Subject: [PATCH] Update dashboard styling

---
 src/main/resources/static/css/styles.css    | 84 +++++++++++++++++++--
 src/main/resources/templates/dashboard.html | 44 ++++++++---
 2 files changed, 113 insertions(+), 15 deletions(-)

diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index a825db9..d9a3e0d 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -682,9 +682,9 @@ button:disabled:hover {
 
 .panel-actions {
     display: flex;
-    flex-direction: row;
-    gap: 20px;
-    padding: 20px;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 0 4px;
 }
 
 .preview-grid {
@@ -874,15 +874,87 @@ button:disabled:hover {
 
 .user-pill {
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 4px;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 16px;
     padding: 10px 12px;
     border-radius: 12px;
     background: rgba(124, 58, 237, 0.1);
     border: 1px solid rgba(124, 58, 237, 0.2);
 }
 
+.user-pill-copy {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+}
+
+.user-logout {
+    margin: 0;
+}
+
+.user-logout .ghost {
+    border-color: rgba(148, 163, 184, 0.4);
+    color: #e2e8f0;
+}
+
+.user-logout .ghost:hover:not(:disabled) {
+    border-color: rgba(196, 181, 253, 0.6);
+    color: #f8fafc;
+}
+
+.dashboard-action {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    background: rgba(124, 58, 237, 0.08);
+    border: 1px solid rgba(124, 58, 237, 0.2);
+    color: #e2e8f0;
+    text-decoration: none;
+    transition:
+        background 120ms ease,
+        border-color 120ms ease,
+        transform 120ms ease;
+}
+
+.dashboard-action:hover {
+    background: rgba(124, 58, 237, 0.16);
+    border-color: rgba(124, 58, 237, 0.35);
+    transform: translateY(-1px);
+}
+
+.dashboard-action-icon {
+    min-width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    display: grid;
+    place-items: center;
+    background: rgba(124, 58, 237, 0.18);
+    color: #c4b5fd;
+    font-weight: 700;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.dashboard-action-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.dashboard-action-copy strong {
+    font-size: 15px;
+}
+
+.dashboard-action-copy small {
+    color: #cbd5e1;
+    font-size: 12px;
+}
+
 .user-display {
     font-weight: 700;
     color: #e2e8f0;
diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html
index b099a51..8d5241f 100644
--- a/src/main/resources/templates/dashboard.html
+++ b/src/main/resources/templates/dashboard.html
@@ -19,8 +19,13 @@
                     </div>
                 </div>
                 <div class="user-pill">
-                    <span class="eyebrow subtle">Signed in as</span>
-                    <span class="user-display" th:text="${username}">user</span>
+                    <div class="user-pill-copy">
+                        <span class="eyebrow subtle">Signed in as</span>
+                        <span class="user-display" th:text="${username}">user</span>
+                    </div>
+                    <form class="user-logout" th:action="@{/logout}" method="post">
+                        <button class="ghost" type="submit">Logout</button>
+                    </form>
                 </div>
             </header>
 
@@ -29,13 +34,34 @@
                 <h3>Shortcuts</h3>
                 <p class="muted">Jump into your overlay</p>
                 <div class="panel-actions">
-                    <a class="button block" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
-                    <a class="button ghost block" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
-                    <a class="button ghost block" th:if="${isSystemAdmin}" href="/settings">Application settings</a>
-                    <a class="button ghost block" href="/channels">Browse channels</a>
-                    <form class="block" th:action="@{/logout}" method="post">
-                        <button class="secondary block" type="submit">Logout</button>
-                    </form>
+                    <a class="dashboard-action" th:href="@{'/view/' + ${channel} + '/broadcast'}">
+                        <span class="dashboard-action-icon">Live</span>
+                        <span class="dashboard-action-copy">
+                            <strong>Open broadcast overlay</strong>
+                            <small>Launch your live overlay view.</small>
+                        </span>
+                    </a>
+                    <a class="dashboard-action" th:href="@{'/view/' + ${channel} + '/admin'}">
+                        <span class="dashboard-action-icon">Admin</span>
+                        <span class="dashboard-action-copy">
+                            <strong>Open admin console</strong>
+                            <small>Manage assets, scripts, and layout.</small>
+                        </span>
+                    </a>
+                    <a class="dashboard-action" th:if="${isSystemAdmin}" href="/settings">
+                        <span class="dashboard-action-icon">App</span>
+                        <span class="dashboard-action-copy">
+                            <strong>Application settings</strong>
+                            <small>Configure server-wide preferences.</small>
+                        </span>
+                    </a>
+                    <a class="dashboard-action" href="/channels">
+                        <span class="dashboard-action-icon">Browse</span>
+                        <span class="dashboard-action-copy">
+                            <strong>Browse channels</strong>
+                            <small>Find other overlays you manage.</small>
+                        </span>
+                    </a>
                 </div>
             </section>