From a02b0e94364b7dd18c188ef5ca5bb7637db304da Mon Sep 17 00:00:00 2001
From: troogs <gitea@beging.de>
Date: Fri, 3 Apr 2026 08:57:55 +0200
Subject: [PATCH] Refactor dialog components to use form-container for improved
 layout and styling; update button styles for consistency

---
 .../Components/Dialogs/AddAccountDialog.razor |  4 +-
 .../Components/Dialogs/AddEntryDialog.razor   | 26 +++++-----
 .../Dialogs/AddTransferDialog.razor           | 14 ++----
 .../Components/Dialogs/ConfirmDialog.razor    |  2 +-
 .../Dialogs/EditCarryoverDialog.razor         |  4 +-
 .../Components/Dialogs/EditNameDialog.razor   | 10 ++--
 .../Pages/Accounts/AccountDetail.razor        |  4 ++
 src/Duempelkas.App/Pages/Dashboard.razor      | 35 ++++++++++++-
 src/Duempelkas.Desktop/wwwroot/css/app.css    | 50 ++++++++++++++++++-
 9 files changed, 114 insertions(+), 35 deletions(-)

diff --git a/src/Duempelkas.App/Components/Dialogs/AddAccountDialog.razor b/src/Duempelkas.App/Components/Dialogs/AddAccountDialog.razor
index 27c1b7b..5444265 100644
--- a/src/Duempelkas.App/Components/Dialogs/AddAccountDialog.razor
+++ b/src/Duempelkas.App/Components/Dialogs/AddAccountDialog.razor
@@ -1,14 +1,14 @@
 <div class="dialog-backdrop" @onclick="Cancel">
     <div class="dialog-content" @onclick:stopPropagation="true">
         <h5 class="mb-3">Neues Konto</h5>
-        <div class="mb-3">
+        <div class="form-container">
             <label class="form-label">Kontoname</label>
             <input type="text" class="form-control" @bind="name" @bind:event="oninput"
                    placeholder="z.B. Girokonto" />
         </div>
         <div class="d-flex justify-content-end gap-2">
+            <button class="btn btn-success" @onclick="Save" disabled="@string.IsNullOrWhiteSpace(name)"><i class="bi bi-check-lg"></i> Erstellen</button>
             <button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
-            <button class="btn btn-primary" @onclick="Save" disabled="@string.IsNullOrWhiteSpace(name)"><i class="bi bi-check-lg"></i> Erstellen</button>
         </div>
     </div>
 </div>
diff --git a/src/Duempelkas.App/Components/Dialogs/AddEntryDialog.razor b/src/Duempelkas.App/Components/Dialogs/AddEntryDialog.razor
index 0737830..a80553e 100644
--- a/src/Duempelkas.App/Components/Dialogs/AddEntryDialog.razor
+++ b/src/Duempelkas.App/Components/Dialogs/AddEntryDialog.razor
@@ -3,34 +3,32 @@
 <div class="dialog-backdrop" @onclick="Cancel">
     <div class="dialog-content" @onclick:stopPropagation="true">
         <h5>@(EditEntry != null ? "Eintrag bearbeiten" : "Neuer Eintrag")</h5>
-        @if (EditEntry == null)
-        {
-            <div class="mb-3">
+
+        <div class="form-container">
+            @if(EditEntry == null) {
                 <label class="form-label">Art</label>
-                <select class="form-select" @bind="entryType">
+                <select @bind="entryType">
                     <option value="@EntryType.Income">Einnahme</option>
                     <option value="@EntryType.Expense">Ausgabe</option>
                 </select>
-            </div>
-        }
-        <div class="mb-3">
+            }
+
             <label class="form-label">Datum</label>
-            <input type="date" class="form-control" @bind="date" />
-        </div>
-        <div class="mb-3">
+            <input type="date" @bind="date" />
+
             <label class="form-label">Bezeichnung</label>
             <input type="text" class="form-control" @bind="title" placeholder="Beschreibung" />
-        </div>
-        <div class="mb-3">
+
             <label class="form-label">Betrag (€)</label>
             <input type="number" class="form-control" @bind="amount" step="0.01" min="0.01" />
         </div>
+
         <div class="d-flex justify-content-end gap-2">
-            <button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
-            <button class="btn btn-primary" @onclick="Save"
+            <button class="btn btn-success" @onclick="Save"
                     disabled="@(string.IsNullOrWhiteSpace(title) || amount <= 0)">
                 <i class="bi bi-check-lg"></i> @(EditEntry != null ? "Speichern" : "Hinzufügen")
             </button>
+            <button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
         </div>
     </div>
 </div>
diff --git a/src/Duempelkas.App/Components/Dialogs/AddTransferDialog.razor b/src/Duempelkas.App/Components/Dialogs/AddTransferDialog.razor
index 5434e03..31f53d7 100644
--- a/src/Duempelkas.App/Components/Dialogs/AddTransferDialog.razor
+++ b/src/Duempelkas.App/Components/Dialogs/AddTransferDialog.razor
@@ -5,7 +5,7 @@
     <div class="dialog-content" @onclick:stopPropagation="true">
         <h5 class="mb-3">@(EditEntry != null ? "Umbuchung bearbeiten" : "Neue Umbuchung")</h5>
 
-        <div class="mb-3">
+        <div class="form-container">
             <label class="form-label">Zielkonto</label>
             <select class="form-select" @bind="targetAccountId">
                 <option value="0">— Auswählen —</option>
@@ -14,25 +14,21 @@
                     <option value="@acc.Id">@acc.Name</option>
                 }
             </select>
-        </div>
 
-        <div class="mb-3">
             <label class="form-label">Datum</label>
             <input type="date" class="form-control" @bind="date" />
-        </div>
-        <div class="mb-3">
+
             <label class="form-label">Bezeichnung</label>
             <input type="text" class="form-control" @bind="title" placeholder="Beschreibung der Umbuchung" />
-        </div>
-        <div class="mb-3">
+
             <label class="form-label">Betrag (€)</label>
             <input type="number" class="form-control" @bind="amount" step="0.01" min="0.01" />
         </div>
 
         <div class="d-flex justify-content-end gap-2">
-            <button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
-            <button class="btn btn-primary" @onclick="Save"
+            <button class="btn btn-success" @onclick="Save"
                     disabled="@(!CanSave)"><i class="bi bi-arrow-left-right"></i> @(EditEntry != null ? "Speichern" : "Umbuchen")</button>
+            <button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
         </div>
     </div>
 </div>
diff --git a/src/Duempelkas.App/Components/Dialogs/ConfirmDialog.razor b/src/Duempelkas.App/Components/Dialogs/ConfirmDialog.razor
index f6ca716..1d45d78 100644
--- a/src/Duempelkas.App/Components/Dialogs/ConfirmDialog.razor
+++ b/src/Duempelkas.App/Components/Dialogs/ConfirmDialog.razor
@@ -3,8 +3,8 @@
         <h5>@Title</h5>
         <p>@Message</p>
         <div class="d-flex justify-content-end gap-2">
-            <button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> @CancelText</button>
             <button class="@ConfirmButtonClass" @onclick="Confirm"><i class="@ConfirmIconClass"></i> @ConfirmText</button>
+            <button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> @CancelText</button>
         </div>
     </div>
 </div>
diff --git a/src/Duempelkas.App/Components/Dialogs/EditCarryoverDialog.razor b/src/Duempelkas.App/Components/Dialogs/EditCarryoverDialog.razor
index 46a5392..2b83869 100644
--- a/src/Duempelkas.App/Components/Dialogs/EditCarryoverDialog.razor
+++ b/src/Duempelkas.App/Components/Dialogs/EditCarryoverDialog.razor
@@ -1,13 +1,13 @@
 <div class="dialog-backdrop" @onclick="Cancel">
     <div class="dialog-content" @onclick:stopPropagation="true">
         <h5 class="mb-3">Übertrag bearbeiten</h5>
-        <div class="mb-3">
+        <div class="form-container">
             <label class="form-label">Übertrag (€)</label>
             <input type="number" class="form-control" step="0.01" @bind="amount" />
         </div>
         <div class="d-flex justify-content-end gap-2">
+            <button class="btn btn-success" @onclick="Save"><i class="bi bi-check-lg"></i> Speichern</button>
             <button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
-            <button class="btn btn-primary" @onclick="Save"><i class="bi bi-check-lg"></i> Speichern</button>
         </div>
     </div>
 </div>
diff --git a/src/Duempelkas.App/Components/Dialogs/EditNameDialog.razor b/src/Duempelkas.App/Components/Dialogs/EditNameDialog.razor
index 9ca4eb6..a821d22 100644
--- a/src/Duempelkas.App/Components/Dialogs/EditNameDialog.razor
+++ b/src/Duempelkas.App/Components/Dialogs/EditNameDialog.razor
@@ -1,19 +1,21 @@
 <div class="dialog-backdrop" @onclick="Cancel">
     <div class="dialog-content" @onclick:stopPropagation="true">
-        <h5 class="mb-3">Kontoname bearbeiten</h5>
-        <div class="mb-3">
-            <label class="form-label">Kontoname</label>
+        <h5 class="mb-3">@DialogTitle</h5>
+        <div class="form-container">
+            <label class="form-label">@NameLabel</label>
             <input type="text" class="form-control" @bind="name" @bind:event="oninput" />
         </div>
         <div class="d-flex justify-content-end gap-2">
+            <button class="btn btn-success" @onclick="Save" disabled="@string.IsNullOrWhiteSpace(name)"><i class="bi bi-check-lg"></i> Speichern</button>
             <button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
-            <button class="btn btn-primary" @onclick="Save" disabled="@string.IsNullOrWhiteSpace(name)"><i class="bi bi-check-lg"></i> Speichern</button>
         </div>
     </div>
 </div>
 
 @code {
     [Parameter] public string CurrentName { get; set; } = string.Empty;
+    [Parameter] public string DialogTitle { get; set; } = "Kontoname bearbeiten";
+    [Parameter] public string NameLabel { get; set; } = "Kontoname";
     [Parameter] public EventCallback<string> OnSave { get; set; }
     [Parameter] public EventCallback OnCancel { get; set; }
 
diff --git a/src/Duempelkas.App/Pages/Accounts/AccountDetail.razor b/src/Duempelkas.App/Pages/Accounts/AccountDetail.razor
index ccdc89d..c682ec2 100644
--- a/src/Duempelkas.App/Pages/Accounts/AccountDetail.razor
+++ b/src/Duempelkas.App/Pages/Accounts/AccountDetail.razor
@@ -130,6 +130,8 @@
                    Message="@($"Soll \"{confirmDeleteEntryTitle}\" wirklich gelöscht werden?")"
                    ConfirmText="Ja, löschen"
                    CancelText="Nein, abbrechen"
+                   ConfirmButtonClass="btn btn-danger"
+                   ConfirmIconClass="bi bi-trash"
                    OnConfirm="HandleConfirmDelete"
                    OnCancel="CancelDeleteConfirm" />
 }
@@ -140,6 +142,8 @@
                    Message="@($"Soll \"{confirmRestoreEntryTitle}\" wiederhergestellt werden?")"
                    ConfirmText="Ja, wiederherstellen"
                    CancelText="Nein, abbrechen"
+                   ConfirmButtonClass="btn btn-warning"
+                   ConfirmIconClass="bi bi-arrow-clockwise"
                    OnConfirm="HandleConfirmRestore"
                    OnCancel="CancelRestoreConfirm" />
 }
diff --git a/src/Duempelkas.App/Pages/Dashboard.razor b/src/Duempelkas.App/Pages/Dashboard.razor
index 6ae53b6..7974e40 100644
--- a/src/Duempelkas.App/Pages/Dashboard.razor
+++ b/src/Duempelkas.App/Pages/Dashboard.razor
@@ -1,9 +1,17 @@
 @page "/"
 @inject IAccountService AccountService
+@inject ISettingsService SettingsService
 
 <div class="container-fluid">
     <div class="d-flex justify-content-between align-items-center mb-4">
-        <h2>Übersicht</h2>
+        <div class="d-flex align-items-center flex-grow-1" style="min-width: 0;">
+            <h2 class="mb-0 mt-0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                @DisplayClubName
+                <button class="btn-edit-pen" @onclick="() => showEditClubName = true" title="Vereinsname bearbeiten">
+                    <i class="bi bi-pencil"></i>
+                </button>
+            </h2>
+        </div>
         <div class="d-flex gap-2">
             <button class="btn btn-primary" @onclick="() => showAddAccount = true">
                 <i class="bi bi-plus-lg"></i> Neues Konto
@@ -38,12 +46,25 @@
     <AddAccountDialog OnSave="HandleAccountCreated" OnCancel="() => showAddAccount = false" />
 }
 
+@if (showEditClubName)
+{
+    <EditNameDialog CurrentName="clubName"
+                    DialogTitle="Vereinsname bearbeiten"
+                    NameLabel="Vereinsname"
+                    OnSave="HandleSaveClubName"
+                    OnCancel="() => showEditClubName = false" />
+}
+
 @code {
     private List<AccountSummaryDto>? accounts;
     private bool showAddAccount;
+    private bool showEditClubName;
+    private string clubName = string.Empty;
+    private string DisplayClubName => string.IsNullOrWhiteSpace(clubName) ? "Mein Verein" : clubName;
 
     protected override async Task OnInitializedAsync()
     {
+        await LoadClubName();
         await LoadAccounts();
     }
 
@@ -52,10 +73,22 @@
         accounts = await AccountService.GetAllAccountsAsync();
     }
 
+    private async Task LoadClubName()
+    {
+        clubName = await SettingsService.GetClubNameAsync() ?? string.Empty;
+    }
+
     private async Task HandleAccountCreated(string name)
     {
         await AccountService.CreateAccountAsync(name);
         showAddAccount = false;
         await LoadAccounts();
     }
+
+    private async Task HandleSaveClubName(string newName)
+    {
+        await SettingsService.SetClubNameAsync(newName);
+        showEditClubName = false;
+        await LoadClubName();
+    }
 }
diff --git a/src/Duempelkas.Desktop/wwwroot/css/app.css b/src/Duempelkas.Desktop/wwwroot/css/app.css
index 23c4325..0c37191 100644
--- a/src/Duempelkas.Desktop/wwwroot/css/app.css
+++ b/src/Duempelkas.Desktop/wwwroot/css/app.css
@@ -172,8 +172,6 @@ html, body {
 
 /* Buttons – modern style */
 .btn {
-    border-radius: 0.5rem;
-    font-weight: 500;
     font-size: 0.85rem;
     padding: 0.35rem 0.85rem;
     display: inline-flex;
@@ -208,6 +206,28 @@ html, body {
     border-color: #16a34a;
 }
 
+.btn-danger {
+    background-color: #ef4444;
+    border-color: #ef4444;
+    color: #fff;
+}
+
+.btn-danger:hover {
+    background-color: #dc2626;
+    border-color: #dc2626;
+}
+
+.btn-warning {
+    background-color: #facc15;
+    border-color: #facc15;
+    color: #000;
+}
+
+.btn-warning:hover {
+    background-color: #eab308;
+    border-color: #eab308;
+}
+
 .btn-info {
     background-color: #3b82f6;
     border-color: #3b82f6;
@@ -284,6 +304,32 @@ html, body {
     border-bottom-color: var(--color-border);
 }
 
+/* Form container */
+.form-container {
+  display: grid;
+  /* Col 1: fits largest label | Col 2: takes the rest */
+  grid-template-columns: max-content 1fr;
+  gap: 1rem;
+  align-items: center;
+  max-width: 500px;
+  padding-bottom: 1rem;
+}
+
+/* Ensure the label and input stay on the same row */
+.form-container label {
+  grid-column: 1;
+  font-weight: 600;
+}
+
+.form-container input, 
+.form-container select, 
+.form-container textarea {
+  grid-column: 2;
+  padding: 0.5rem;
+  width: 100%; /* Fill the available space in col 2 */
+  box-sizing: border-box;
+}
+
 /* Form controls in dark */
 .form-control, .form-select {
     background-color: var(--color-bg);