From 894c84b94ade47dd15e3fee14f46a9bfd19ee6c1 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 17 Apr 2026 11:58:37 +0200
Subject: [PATCH] feat(DiaryParticipantsPanel): enhance gallery button styling
 and functionality

- Updated the gallery button to include icons for improved visual feedback during loading states.
- Refined button styles with a new gradient background and hover effects for better user interaction.
- Adjusted button layout to ensure consistent alignment and spacing of elements.
---
 .../src/components/DiaryParticipantsPanel.vue | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/DiaryParticipantsPanel.vue b/frontend/src/components/DiaryParticipantsPanel.vue
index 82cd734d..23d83189 100644
--- a/frontend/src/components/DiaryParticipantsPanel.vue
+++ b/frontend/src/components/DiaryParticipantsPanel.vue
@@ -9,7 +9,8 @@
                     :disabled="galleryLoading"
                     @click="$emit('open-gallery')"
                 >
-                    {{ galleryLoading ? $t('diary.galleryCreating') : $t('diary.gallery') }}
+                    <span class="participant-gallery-button-icon" aria-hidden="true">{{ galleryLoading ? '⏳' : '🖼️' }}</span>
+                    <span>{{ galleryLoading ? $t('diary.galleryCreating') : $t('diary.gallery') }}</span>
                 </button>
             </div>
             <input
@@ -166,17 +167,33 @@ export default {
 
 .participant-gallery-button {
     padding: 0.45rem 0.75rem;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--primary-soft);
     border-radius: 10px;
-    background: var(--surface-muted);
-    color: var(--text-color);
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+    color: var(--text-on-primary);
     font-weight: 600;
     cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    box-shadow: 0 2px 8px rgba(47, 122, 95, 0.18);
+}
+
+.participant-gallery-button:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(47, 122, 95, 0.26);
+}
+
+.participant-gallery-button-icon {
+    font-size: 1rem;
+    line-height: 1;
 }
 
 .participant-gallery-button:disabled {
     opacity: 0.6;
     cursor: default;
+    transform: none;
+    box-shadow: none;
 }
 
 .participant-search-input {