From bb81920d44ef44fb9efd958c7122e9e746abc412 Mon Sep 17 00:00:00 2001 From: TekH Date: Tue, 16 Jun 2026 15:05:00 +0200 Subject: [PATCH] Refactor sender page styles and add versioned URLs Moved inline styles from `EnvelopeSenderPage.razor` to a new `sender-page.css` file for better maintainability and separation of concerns. Updated `EnvelopeSenderPage.razor` to use versioned URLs for stylesheets via the newly injected `AppVersionService`, enabling cache-busting. Added responsive design support in `sender-page.css` to improve layout on smaller screens. --- .../Pages/EnvelopeSenderPage.razor | 302 +----------------- .../wwwroot/css/sender-page.css | 292 +++++++++++++++++ 2 files changed, 296 insertions(+), 298 deletions(-) create mode 100644 EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css diff --git a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeSenderPage.razor b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeSenderPage.razor index 6b6dfcc8..b9b8818b 100644 --- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeSenderPage.razor +++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeSenderPage.razor @@ -4,310 +4,16 @@ @using System.Text.Json @using EnvelopeGenerator.ReceiverUI.Models @using DevExpress.Blazor +@using EnvelopeGenerator.ReceiverUI.Services @inject EnvelopeGenerator.ReceiverUI.Services.EnvelopeService EnvelopeService @inject EnvelopeGenerator.ReceiverUI.Services.AuthService AuthService @inject NavigationManager Navigation @inject IJSRuntime JSRuntime +@inject AppVersionService AppVersion - - - + +
diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css b/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css new file mode 100644 index 00000000..cff932bd --- /dev/null +++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css @@ -0,0 +1,292 @@ +.sender-dashboard-layout { + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; + background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%); +} + +.sender-action-bar { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(20px); + border-bottom: 3px solid rgba(126, 34, 206, 0.3); + padding: 1rem 2rem; + flex-shrink: 0; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +.sender-action-bar__inner { + max-width: 1600px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; +} + +.sender-title-section { + display: flex; + align-items: center; + gap: 1rem; +} + +.sender-logo svg { + filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3)); + color: #7e22ce; +} + +.sender-title { + font-size: 1.25rem; + font-weight: 700; + color: #1e293b; + letter-spacing: -0.025em; +} + +.sender-toolbar { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; +} + +.sender-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 1.125rem; + background: linear-gradient(135deg, rgba(126, 34, 206, 0.05) 0%, rgba(42, 82, 152, 0.05) 100%); + border: 1px solid rgba(126, 34, 206, 0.2); + border-radius: 8px; + font-size: 0.875rem; + font-weight: 600; + color: #1e293b; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; +} + + .sender-btn:hover:not(:disabled) { + background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%); + border-color: rgba(126, 34, 206, 0.4); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(126, 34, 206, 0.2); + } + + .sender-btn:disabled { + opacity: 0.4; + cursor: not-allowed; + background: rgba(0, 0, 0, 0.02); + border-color: rgba(0, 0, 0, 0.1); + } + +.sender-btn--primary { + background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%); + border-color: transparent; + color: white; +} + + .sender-btn--primary:hover:not(:disabled) { + background: linear-gradient(135deg, #6b1cb0 0%, #1e3a72 100%); + transform: translateY(-1px); + box-shadow: 0 4px 16px rgba(126, 34, 206, 0.3); + } + +.sender-btn--danger { + background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.08) 100%); + border-color: rgba(239, 68, 68, 0.3); + color: #dc2626; +} + + .sender-btn--danger:hover:not(:disabled) { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + border-color: transparent; + color: white; + } + +.sender-btn--logout { + padding: 0.5rem; + min-width: 38px; +} + +.sender-content { + flex: 1; + min-height: 0; + padding: 1.5rem; + position: relative; + overflow: auto; +} + +.sender-grid-container { + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(20px); + border-radius: 16px; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1); + overflow: hidden; + position: relative; + max-width: 1600px; + margin: 0 auto; +} + + .sender-grid-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%); + z-index: 1; + border-radius: 16px 16px 0 0; + } + +.sender-tabs { + display: flex; + border-bottom: 2px solid rgba(126, 34, 206, 0.1); + padding: 0 2rem; + background: rgba(126, 34, 206, 0.02); +} + +.sender-tab { + padding: 1rem 1.5rem; + font-size: 0.875rem; + font-weight: 600; + color: #6b7280; + background: transparent; + border: none; + border-bottom: 3px solid transparent; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; +} + + .sender-tab:hover { + color: #7e22ce; + background: rgba(126, 34, 206, 0.05); + } + +.sender-tab--active { + color: #7e22ce; + border-bottom-color: #7e22ce; + background: white; +} + +.sender-grid-wrapper { + padding: 1.5rem 2rem 2rem; +} + +.status-badge { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.25rem 0.625rem; + border-radius: 6px; + font-size: 0.75rem; + font-weight: 600; + white-space: nowrap; +} + +.status-badge--partly-signed, +.status-badge--completed { + background: rgba(129, 199, 132, 0.15); + color: #2e7d32; +} + +.status-badge--queued, +.status-badge--sent { + background: rgba(255, 183, 77, 0.15); + color: #e65100; +} + +.status-badge--deleted, +.status-badge--rejected, +.status-badge--withdrawn { + background: rgba(229, 115, 115, 0.15); + color: #c62828; +} + +.status-badge--created, +.status-badge--saved { + background: rgba(100, 181, 246, 0.15); + color: #1565c0; +} + +.status-dot { + width: 6px; + height: 6px; + border-radius: 50%; +} + +.status-dot--green { + background: #81c784; +} + +.status-dot--orange { + background: #ffb74d; +} + +.status-dot--red { + background: #e57373; +} + +.status-dot--blue { + background: #64b5f6; +} + +.receiver-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.125rem 0.5rem; + background: #f3f4f6; + border-radius: 4px; + font-size: 0.75rem; + color: #374151; + white-space: nowrap; +} + +.receiver-badge--signed { + background: rgba(129, 199, 132, 0.15); + color: #2e7d32; +} + +.receiver-badge--unsigned { + background: rgba(229, 115, 115, 0.15); + color: #c62828; +} + +@@media (max-width: 768px) { + .sender-action-bar { + padding: 1rem 1.25rem; + } + + .sender-action-bar__inner { + flex-wrap: wrap; + } + + .sender-toolbar { + width: 100%; + justify-content: flex-start; + } + + .sender-title { + font-size: 1.125rem; + } + + .sender-content { + padding: 0.75rem; + } + + .sender-grid-wrapper { + padding: 1rem; + } + + .sender-tabs { + padding: 0 1rem; + overflow-x: auto; + } + + .sender-tab { + padding: 0.875rem 1rem; + font-size: 0.813rem; + } +}