From 2af8815cf6bff83e0eaa9488d2361409c3aa503e Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Wed, 1 Jul 2026 17:02:19 +0200
Subject: [PATCH] Replace DxButton with HTML buttons and update styles

Replaced DevExpress DxButton components with standard HTML
<button> elements in EnvelopeSenderEditorPage.razor for
"Add Receiver" and "Add Signature" actions. The new buttons
include SVG icons and text for improved customization and
styling.

Updated envelope-viewer.css to add new styles for the
buttons, including `.sender-toolbar-action-btn` and
`.sender-toolbar-action-btn--compact` classes. Removed
unused styles related to DxButton components and adjusted
`.sender-receiver-chip__action` for proper width handling.

These changes improve design flexibility and maintainability.
---
 .../Pages/EnvelopeSenderEditorPage.razor      | 26 ++++++++++++-------
 .../wwwroot/css/envelope-viewer.css           | 17 +++++++-----
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderEditorPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderEditorPage.razor
index 8ec8991f..71bce201 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderEditorPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderEditorPage.razor
@@ -49,11 +49,14 @@
                             <span class="sender-receivers-panel__count">@_receivers.Count</span>
                         </div>
 
-                        <DxButton CssClass="sender-receivers-panel__add-btn pdf-toolbar-like-btn pdf-toolbar-like-btn--add"
-                                  Text="Empfänger hinzufügen"
-                                  RenderStyle="ButtonRenderStyle.Secondary"
-                                  SizeMode="SizeMode.Small"
-                                  Click="OpenAddReceiverPopup" />
+                        <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-change sender-toolbar-action-btn"
+                                @onclick="OpenAddReceiverPopup"
+                                title="Empfänger hinzufügen">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M8 1a.5.5 0 0 1 .5.5v6h6a.5.5 0 0 1 0 1h-6v6a.5.5 0 0 1-1 0v-6h-6a.5.5 0 0 1 0-1h6v-6A.5.5 0 0 1 8 1z" />
+                            </svg>
+                            <span class="pdf-toolbar__btn-text">Empfänger hinzufügen</span>
+                        </button>
                     </div>
 
                     @if (_receivers.Count == 0)
@@ -73,11 +76,14 @@
                                         <div class="sender-receiver-chip__email">@receiver.Email</div>
                                     </div>
 
-                                    <DxButton CssClass="sender-receiver-chip__action pdf-toolbar-like-btn pdf-toolbar-like-btn--signature"
-                                              Text="Signatur hinzufügen"
-                                              RenderStyle="ButtonRenderStyle.Secondary"
-                                              SizeMode="SizeMode.Small"
-                                              Click="@(() => AddSignatureForReceiver(receiver))" />
+                                    <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-change sender-toolbar-action-btn sender-toolbar-action-btn--compact"
+                                            @onclick="() => AddSignatureForReceiver(receiver)"
+                                            title="Signatur hinzufügen">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10z" />
+                                        </svg>
+                                        <span class="pdf-toolbar__btn-text">Signatur hinzufügen</span>
+                                    </button>
                                 </div>
                             }
                         </div>
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
index fa214406..795f8901 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
@@ -573,6 +573,15 @@ body.resizing {
     white-space: nowrap;
 }
 
+.sender-toolbar-action-btn {
+    min-width: auto;
+    padding: 0.5rem 0.75rem;
+}
+
+.sender-toolbar-action-btn--compact {
+    padding: 0.45rem 0.7rem;
+}
+
 .sender-receivers-panel {
     display: flex;
     flex-direction: column;
@@ -726,12 +735,6 @@ body.resizing {
     text-overflow: ellipsis;
 }
 
-.sender-receiver-chip__action .dxbl-btn {
-    border-radius: 8px;
-    font-weight: 600;
-    white-space: nowrap;
-}
-
 .sender-receiver-popup .dxbl-modal {
     border-radius: 18px;
 }
@@ -1056,7 +1059,7 @@ body.resizing {
         width: 100%;
     }
 
-    .sender-receiver-chip__action .dxbl-btn {
+    .sender-receiver-chip__action {
         width: 100%;
     }