From 638b73464882d3bb0dae87f3dbad56c50f094914 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Mon, 9 Nov 2026 11:22:53 +0100
Subject: [PATCH] Enhance UI with tooltips and MudBlazor integration

Added contextual tooltips (`MudTooltip` and `MudIconButton`) to form fields in `CreateEnvelopeWizardPopup.razor` for improved user guidance. Updated label layouts using the new `sender-create-wizard__label-row` class for better alignment with tooltips. Integrated MudBlazor components (`MudThemeProvider`, `MudPopoverProvider`, `MudDialogProvider`, `MudSnackbarProvider`) in `SenderPage.razor` to enable enhanced UI features.

Updated `_Imports.razor` to include `MudBlazor` for global availability. Enhanced accessibility by adding `aria-label` attributes to help icons. Improved user experience with detailed explanations for fields like "Title," "Envelope Type," and others. Updated checkbox labels and numeric input fields with tooltips for additional context.

Added new CSS styles in `sender-page.css` to ensure proper alignment and sizing of tooltips and icons. These changes improve the overall usability, accessibility, and design consistency of the application.
---
 .../Sender/CreateEnvelopeWizardPopup.razor    | 113 ++++++++++++++----
 .../Pages/SenderPage.razor                    |   5 +
 .../_Imports.razor                            |   1 +
 .../wwwroot/css/sender-page.css               |  19 +++
 4 files changed, 114 insertions(+), 24 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
index 7aaf75c0..560eafdc 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
@@ -55,8 +55,11 @@
                                         {
                                             <div class="sender-create-wizard__form-grid">
                                                 <div class="sender-create-wizard__field">
-                                                    <label class="sender-create-wizard__label">
-                                                        @L("Title", "Titel") <span class="sender-create-wizard__required">*</span>
+                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                        <span>@L("Title", "Titel") <span class="sender-create-wizard__required">*</span></span>
+                                                        <MudTooltip Text='@L("SenderWizard_Help_Title", "Ein kurzer, eindeutiger Titel hilft beim schnellen Wiederfinden des Umschlags.")'>
+                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_Title", "Hilfe zum Feld Titel")' />
+                                                        </MudTooltip>
                                                     </label>
                                                     <DxTextBox Text="@_title"
                                                                TextChanged="OnTitleChanged"
@@ -66,8 +69,11 @@
                                                 </div>
 
                                                 <div class="sender-create-wizard__field">
-                                                    <label class="sender-create-wizard__label">
-                                                        @L("EnvelopeType", "Umschlagtyp") <span class="sender-create-wizard__required">*</span>
+                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                        <span>@L("EnvelopeType", "Umschlagtyp") <span class="sender-create-wizard__required">*</span></span>
+                                                        <MudTooltip Text='@L("SenderWizard_Help_EnvelopeType", "Der Umschlagtyp kann Standardwerte wie Sprache, Erinnerungen und Sicherheit vorbelegen.")'>
+                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_EnvelopeType", "Hilfe zum Feld Umschlagtyp")' />
+                                                        </MudTooltip>
                                                     </label>
                                                     <select value="@(_selectedEnvelopeTypeId?.ToString() ?? string.Empty)"
                                                             @onchange="OnEnvelopeTypeChanged"
@@ -84,8 +90,11 @@
                                         {
                                             <div class="sender-create-wizard__form-grid">
                                                 <div class="sender-create-wizard__field sender-create-wizard__field--full">
-                                                    <label class="sender-create-wizard__label">
-                                                        @L("Message", "Nachricht") <span class="sender-create-wizard__optional">(@L("Optional", "optional"))</span>
+                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                        <span>@L("Message", "Nachricht") <span class="sender-create-wizard__optional">(@L("Optional", "optional"))</span></span>
+                                                        <MudTooltip Text='@L("SenderWizard_Help_Message", "Diese Nachricht wird den Empfaengern in der E-Mail und im Signaturprozess angezeigt.")'>
+                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_Message", "Hilfe zum Feld Nachricht")' />
+                                                        </MudTooltip>
                                                     </label>
                                                     <DxMemo Text="@_message"
                                                             TextChanged="OnMessageChanged"
@@ -96,8 +105,11 @@
                                                 </div>
 
                                                 <div class="sender-create-wizard__field">
-                                                    <label class="sender-create-wizard__label">
-                                                        @L("Language", "Sprache")
+                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                        <span>@L("Language", "Sprache")</span>
+                                                        <MudTooltip Text='@L("SenderWizard_Help_Language", "Legt die Sprache fuer Hinweise, E-Mails und Oberflaechentexte fest.")'>
+                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_Language", "Hilfe zum Feld Sprache")' />
+                                                        </MudTooltip>
                                                     </label>
                                                     <select @bind="_language" class="sender-create-wizard__select">
                                                         <option value="de-DE">Deutsch (de-DE)</option>
@@ -118,7 +130,12 @@
 
                                                     <div class="sender-create-wizard__form-grid">
                                                         <div class="sender-create-wizard__field">
-                                                            <label class="sender-create-wizard__label">@L("CertificationType", "Zertifizierung")</label>
+                                                            <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                                <span>@L("CertificationType", "Zertifizierung")</span>
+                                                                <MudTooltip Text='@L("SenderWizard_Help_CertificationType", "Bestimmt das Signaturniveau fuer diesen Umschlag.")'>
+                                                                    <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_CertificationType", "Hilfe zum Feld Zertifizierung")' />
+                                                                </MudTooltip>
+                                                            </label>
                                                             <select @bind="_certificationType" class="sender-create-wizard__select">
                                                                 <option value="@CertificationType.AdvancedElectronicSignature">@L("AdvancedElectronicSignature", "Advanced Electronic Signature")</option>
                                                                 <option value="@CertificationType.ElectronicSignature">@L("ElectronicSignature", "Electronic Signature")</option>
@@ -126,7 +143,12 @@
                                                         </div>
 
                                                         <div class="sender-create-wizard__field">
-                                                            <label class="sender-create-wizard__label">@L("FinalEmailToCreator", "Finale E-Mail an Ersteller")</label>
+                                                            <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                                <span>@L("FinalEmailToCreator", "Finale E-Mail an Ersteller")</span>
+                                                                <MudTooltip Text='@L("SenderWizard_Help_FinalEmailToCreator", "Steuert, ob der Ersteller nach Abschluss eine finale E-Mail erhaelt und ob das Dokument angehaengt wird.")'>
+                                                                    <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_FinalEmailToCreator", "Hilfe zum Feld Finale E-Mail an Ersteller")' />
+                                                                </MudTooltip>
+                                                            </label>
                                                             <select @bind="_finalEmailToCreator" class="sender-create-wizard__select">
                                                                 <option value="0">@L("No", "Nein")</option>
                                                                 <option value="1">@L("Yes", "Ja")</option>
@@ -135,7 +157,12 @@
                                                         </div>
 
                                                         <div class="sender-create-wizard__field">
-                                                            <label class="sender-create-wizard__label">@L("FinalEmailToReceivers", "Finale E-Mail an Empfänger")</label>
+                                                            <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                                <span>@L("FinalEmailToReceivers", "Finale E-Mail an Empfänger")</span>
+                                                                <MudTooltip Text='@L("SenderWizard_Help_FinalEmailToReceivers", "Steuert, ob Empfaenger nach Abschluss eine finale E-Mail erhalten und ob das Dokument angehaengt wird.")'>
+                                                                    <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_FinalEmailToReceivers", "Hilfe zum Feld Finale E-Mail an Empfaenger")' />
+                                                                </MudTooltip>
+                                                            </label>
                                                             <select @bind="_finalEmailToReceivers" class="sender-create-wizard__select">
                                                                 <option value="0">@L("No", "Nein")</option>
                                                                 <option value="1">@L("Yes", "Ja")</option>
@@ -147,11 +174,17 @@
                                                             <div class="sender-create-wizard__settings-toggles">
                                                                 <label class="sender-create-wizard__settings-toggle">
                                                                     <input type="checkbox" checked="@_tfaEnabled" @onchange="OnTfaChanged" />
-                                                                    @L("TFAEnabled", "2FA aktiviert")
+                                                                    <span>@L("TFAEnabled", "2FA aktiviert")</span>
+                                                                    <MudTooltip Text='@L("SenderWizard_Help_TfaEnabled", "Wenn aktiviert, ist die Signaturfreigabe nur mit zusaetzlicher Verifizierung moeglich.")'>
+                                                                        <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_TfaEnabled", "Hilfe zur Option 2FA")' />
+                                                                    </MudTooltip>
                                                                 </label>
                                                                 <label class="sender-create-wizard__settings-toggle">
                                                                     <input type="checkbox" checked="@_useAccessCode" @onchange="OnUseAccessCodeChanged" disabled="@_tfaEnabled" />
-                                                                    @L("UseAccessCode", "Zugriffscode verwenden")
+                                                                    <span>@L("UseAccessCode", "Zugriffscode verwenden")</span>
+                                                                    <MudTooltip Text='@L("SenderWizard_Help_UseAccessCode", "Empfaenger muessen einen Zugriffscode eingeben. Bei aktivem 2FA bleibt diese Option immer aktiv.")'>
+                                                                        <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_UseAccessCode", "Hilfe zur Option Zugriffscode verwenden")' />
+                                                                    </MudTooltip>
                                                                 </label>
                                                             </div>
                                                         </div>
@@ -167,27 +200,50 @@
                                                         <div class="sender-create-wizard__field sender-create-wizard__field--full">
                                                             <label class="sender-create-wizard__settings-toggle">
                                                                 <input type="checkbox" checked="@_sendReminderEmails" @onchange="OnSendReminderEmailsChanged" />
-                                                                @L("SendReminderEmails", "Erinnerungs-E-Mails senden")
+                                                                <span>@L("SendReminderEmails", "Erinnerungs-E-Mails senden")</span>
+                                                                <MudTooltip Text='@L("SenderWizard_Help_SendReminderEmails", "Aktiviert automatische Erinnerungsmails fuer noch offene Signaturen.")'>
+                                                                    <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_SendReminderEmails", "Hilfe zur Option Erinnerungs-E-Mails senden")' />
+                                                                </MudTooltip>
                                                             </label>
                                                         </div>
 
                                                         <div class="sender-create-wizard__field">
-                                                            <label class="sender-create-wizard__label">@L("FirstReminderDays", "Erste Erinnerung (Tage)")</label>
+                                                            <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                                <span>@L("FirstReminderDays", "Erste Erinnerung (Tage)")</span>
+                                                                <MudTooltip Text='@L("SenderWizard_Help_FirstReminderDays", "Anzahl Tage nach Versand bis zur ersten Erinnerung.")'>
+                                                                    <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_FirstReminderDays", "Hilfe zum Feld Erste Erinnerung")' />
+                                                                </MudTooltip>
+                                                            </label>
                                                             <InputNumber @bind-Value="_firstReminderDays" class="form-control form-control-sm" disabled="@(!_sendReminderEmails)" />
                                                         </div>
 
                                                         <div class="sender-create-wizard__field">
-                                                            <label class="sender-create-wizard__label">@L("ReminderIntervalDays", "Erinnerungsintervall (Tage)")</label>
+                                                            <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                                <span>@L("ReminderIntervalDays", "Erinnerungsintervall (Tage)")</span>
+                                                                <MudTooltip Text='@L("SenderWizard_Help_ReminderIntervalDays", "Abstand in Tagen zwischen den weiteren Erinnerungen.")'>
+                                                                    <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_ReminderIntervalDays", "Hilfe zum Feld Erinnerungsintervall")' />
+                                                                </MudTooltip>
+                                                            </label>
                                                             <InputNumber @bind-Value="_reminderIntervalDays" class="form-control form-control-sm" disabled="@(!_sendReminderEmails)" />
                                                         </div>
 
                                                         <div class="sender-create-wizard__field">
-                                                            <label class="sender-create-wizard__label">@L("ExpiresWhenDays", "Läuft ab nach (Tage)")</label>
+                                                            <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                                <span>@L("ExpiresWhenDays", "Laeuft ab nach (Tage)")</span>
+                                                                <MudTooltip Text='@L("SenderWizard_Help_ExpiresWhenDays", "Legt fest, nach wie vielen Tagen der Umschlag automatisch ablaeuft.")'>
+                                                                    <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_ExpiresWhenDays", "Hilfe zum Feld Laeuft ab nach")' />
+                                                                </MudTooltip>
+                                                            </label>
                                                             <InputNumber @bind-Value="_expiresWhenDays" class="form-control form-control-sm" />
                                                         </div>
 
                                                         <div class="sender-create-wizard__field">
-                                                            <label class="sender-create-wizard__label">@L("ExpiresWarningWhenDays", "Ablaufwarnung (Tage)")</label>
+                                                            <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                                <span>@L("ExpiresWarningWhenDays", "Ablaufwarnung (Tage)")</span>
+                                                                <MudTooltip Text='@L("SenderWizard_Help_ExpiresWarningWhenDays", "Tage vor Ablauf, an denen eine Warnung versendet wird.")'>
+                                                                    <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_ExpiresWarningWhenDays", "Hilfe zum Feld Ablaufwarnung")' />
+                                                                </MudTooltip>
+                                                            </label>
                                                             <InputNumber @bind-Value="_expiresWarningWhenDays" class="form-control form-control-sm" />
                                                         </div>
                                                     </div>
@@ -222,8 +278,11 @@
 
                                             <div class="sender-create-wizard__form-grid">
                                                 <div class="sender-create-wizard__field">
-                                                    <label class="sender-create-wizard__label">
-                                                        @L("FullName", "Vor- und Nachname") <span class="sender-create-wizard__required">*</span>
+                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                        <span>@L("FullName", "Vor- und Nachname") <span class="sender-create-wizard__required">*</span></span>
+                                                        <MudTooltip Text='@L("SenderWizard_Help_FullName", "Name des Empfaengers wie er in E-Mails und Signaturansicht angezeigt wird.")'>
+                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_FullName", "Hilfe zum Feld Vor- und Nachname")' />
+                                                        </MudTooltip>
                                                     </label>
                                                     <DxTextBox Text="@_receiverName"
                                                                TextChanged="OnReceiverNameChanged"
@@ -233,8 +292,11 @@
                                                 </div>
 
                                                 <div class="sender-create-wizard__field">
-                                                    <label class="sender-create-wizard__label">
-                                                        @L("EmailAddress", "E-Mail-Adresse") <span class="sender-create-wizard__required">*</span>
+                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                        <span>@L("EmailAddress", "E-Mail-Adresse") <span class="sender-create-wizard__required">*</span></span>
+                                                        <MudTooltip Text='@L("SenderWizard_Help_EmailAddress", "An diese Adresse wird die Signaturanfrage gesendet.")'>
+                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_EmailAddress", "Hilfe zum Feld E-Mail-Adresse")' />
+                                                        </MudTooltip>
                                                     </label>
                                                     <DxTextBox Text="@_receiverEmail"
                                                                TextChanged="OnReceiverEmailChanged"
@@ -265,8 +327,11 @@
                                             else
                                             {
                                                 <div class="sender-create-wizard__receiver-tagbox-wrap">
-                                                    <label class="sender-create-wizard__label" for="wizardReceiversTagBox">
-                                                        @L("Receiver", "Empfänger")
+                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row" for="wizardReceiversTagBox">
+                                                        <span>@L("Receiver", "Empfänger")</span>
+                                                        <MudTooltip Text='@L("SenderWizard_Help_ReceiverList", "Hier sehen und verwalten Sie alle aktuell hinzugefuegten Empfaenger.")'>
+                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_ReceiverList", "Hilfe zur Empfaengerliste")' />
+                                                        </MudTooltip>
                                                     </label>
                                                     <DxTagBox Data="@_receivers"
                                                               TData="CreateEnvelopeWizardReceiver"
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderPage.razor
index ca52de05..7fe9a363 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderPage.razor
@@ -32,6 +32,11 @@
 <link href="@AppVersion.GetVersionedUrl("css/envelope-viewer.css")" rel="stylesheet" />
 <link href="@AppVersion.GetVersionedUrl("css/sender-page.css")" rel="stylesheet" />
 
+<MudThemeProvider />
+<MudPopoverProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />
+
 <div class="sender-dashboard-layout">
     <div class="sender-action-bar">
         <div class="sender-action-bar__inner">
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/_Imports.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/_Imports.razor
index 84ebf4e7..fd7ce3e2 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/_Imports.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/_Imports.razor
@@ -12,6 +12,7 @@
 @using EnvelopeGenerator.Server.Client.Models
 @using EnvelopeGenerator.Server.Client.Options
 @using EnvelopeGenerator.Server.Client.Components.PdfEditor
+@using MudBlazor
 @using DevExpress.Blazor
 @using DevExpress.Blazor.PdfViewer
 @using DevExpress.Blazor.Reporting
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
index ed5a0a3c..c24e39e4 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
@@ -1327,6 +1327,25 @@
     color: #334155;
 }
 
+.sender-create-wizard__label-row {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.3rem;
+}
+
+.sender-create-wizard__help-icon {
+    width: 1.2rem;
+    height: 1.2rem;
+    padding: 0;
+    min-width: 1.2rem;
+    min-height: 1.2rem;
+}
+
+.sender-create-wizard__help-icon .mud-icon-root {
+    font-size: 1rem;
+}
+
 .sender-create-wizard__required {
     color: #dc2626;
 }