From 7a747774fdea1a45546f7b04c6e1b947dda2e580 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 26 Mar 2025 11:30:45 +0100
Subject: [PATCH] Use custom styled headerbar actions

---
 dashboard/src/components/Headerbar.vue | 50 +++++++++++---------------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/dashboard/src/components/Headerbar.vue b/dashboard/src/components/Headerbar.vue
index 73c220099..a7f8dd65a 100644
--- a/dashboard/src/components/Headerbar.vue
+++ b/dashboard/src/components/Headerbar.vue
@@ -3,7 +3,7 @@
 import { onMounted, ref, useTemplateRef } from 'vue';
 import { marked } from 'marked';
 import { eachLimit } from 'async';
-import { Button, Popover } from 'pankow';
+import { Button, Popover, Icon } from 'pankow';
 import NotificationsModel from '../models/NotificationsModel.js';
 
 const props = defineProps(['config', 'profile', 'subscription']);
@@ -81,8 +81,8 @@ onMounted(async () => {
     </Popover>
 
     <div v-if="!profile.isAtLeastUserManager">
-      <a href="#/" class="headerbar-logo">
-        <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
+      <a href="#/" class="headerbar-action">
+        <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`"/> {{ config.cloudronName || 'Cloudron' }}
       </a>
     </div>
 
@@ -96,9 +96,9 @@ onMounted(async () => {
     <div v-show="!profile.isAtLeastOwner && subscription.plan.id === 'expired'">
       <span class="badge badge-danger">Subscription Expired</span>
     </div>
-    <Button plain secondary tool v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton.$el)" :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'">{{ notifications.length > 99 ? '99+' : notifications.length }}</Button>
-    <Button plain secondary tool v-if="profile.isAtLeastAdmin" href="#/support" icon="fa fa-question fa-fw"/>
-    <Button plain secondary href="#/profile"><img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}</Button>
+    <div class="headerbar-action" v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton.$el)"><Icon :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'"/> {{ notifications.length > 99 ? '99+' : notifications.length }}</div>
+    <a class="headerbar-action"  v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a>
+    <a class="headerbar-action" href="#/profile"><img :src="profile.avatarUrl" /> {{ profile.username }}</a>
   </div>
 </template>
 
@@ -106,8 +106,7 @@ onMounted(async () => {
 
 .headerbar {
   display: flex;
-  padding: 10px;
-  padding-bottom: 6px;
+  padding: 15px;
   align-items: center;
   gap: 15px;
 }
@@ -124,30 +123,23 @@ body.has-background .headerbar {
   }
 }
 
-.headerbar a {
-  display: flex;
-  align-items: center;
-}
-
-.headerbar-avatar {
-  width: 32px;
-  height: 32px;
-  margin-right: 10px;
-  border-radius: var(--pankow-border-radius);
-}
-
-.headerbar-logo img {
-  margin-right: 10px;
-  border-radius: var(--pankow-border-radius);
-}
-
-.headerbar-logo,
-.headerbar-logo:hover {
+.headerbar-action {
   display: flex;
   align-items: center;
+  cursor: pointer;
   color: var(--pankow-text-color);
-  text-decoration: none;
-/*  padding-left: 10px;*/
+  padding: 4px 15px;
+}
+
+.headerbar-action img {
+  margin-right: 10px;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--pankow-border-radius);
+}
+
+.headerbar-action:hover {
+  color: var(--pankow-color-primary-hover);
 }
 
 .notification-item {