...dialog

Pages/Dialog/ConfirmationDialogComponent.razor

@@ -2,24 +2,25 @@
 @inject IMyDialogService MyDialogService
 @inject IJSRuntime JsRuntime
 
-
 @inject NavigationManager NavigationManager
 
 @if (MyDialogService.IsVisible)
 {
-    <div class="confirmDialogBackground" onclick="@CloseDialog">
-        <div class="confirmDialogContainer"
+    <div class="dialogOverlay" onclick="@CloseDialog">
+        <div class="dialogContainer dialogConfirm"
              @onclick:preventDefault="true"
              @onclick:stopPropagation="true">
 
-            <div class="confirmDialogHeader">
-                @MyDialogService.GetDialogContents().Title
+            <div class="dialogHeader">
+                <div class="dialogTitle">@MyDialogService.GetDialogContents().Title</div>
+                <button class="dialogCloseBtn" @onclick="CloseDialog">&times;</button>
             </div>
-            <div class="confirmDialogBody">
+
+            <div class="dialogBody">
                 @MyDialogService.GetDialogContents().Message
             </div>
 
-            <div class="confirmDialogFooter">
+            <div class="dialogFooter">
                 <ButtonComponent MyButtonType="MyButtonType.Secondary"
                                  OnClick="MyDialogService.GetDialogContents().OnCancel">
                     Cancel
@@ -33,71 +34,97 @@
     </div>
 
     <style>
-        .pageContents * {
-            filter: blur(2px);
-        }
-
-        .confirmDialogBackground {
+        .dialogOverlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100vw;
             height: 100vh;
-            background-color: rgba(0, 0, 0, 0.5);
+            background-color: rgba(0, 0, 0, 0.6);
             display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            z-index: 1000;
+            padding-top: 64px;
         }
 
-
-        .confirmDialogContainer {
-            margin-left: auto;
-            margin-right: auto;
-            margin-top: 64px;
-            width: 800px;
-            height: 600px;
-
-            background-color: var(--background);
-            border-width: var(--dialog-border-width);
-            border-style: solid;
-            border-color: var(--dialog-border-color);
+        .dialogContainer {
+            background-color: var(--paper);
             border-radius: var(--dialog-radius);
-
-            padding: 8px;
-
-
-            box-shadow: 1px 2px 2px black;
-
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
             display: flex;
             flex-direction: column;
-
+            max-height: calc(100vh - 128px);
+            overflow: hidden;
         }
 
-        .confirmDialogHeader {
-            font-size: 1.4em;
-            padding: 12px;
+        .dialogConfirm {
+            width: 480px;
         }
 
-        .confirmDialogBody {
-            padding: 12px;
-            flex-grow: 1;
+        .dialogHeader {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--paper-border);
+            background-color: var(--accent);
+            border-radius: var(--dialog-radius) var(--dialog-radius) 0 0;
+            min-height: 56px;
         }
 
-        .confirmDialogFooter {
+        .dialogTitle {
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: white;
+        }
+
+        .dialogCloseBtn {
+            background: none;
+            border: none;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            transition: background 0.15s, color 0.15s;
+        }
+
+        .dialogCloseBtn:hover {
+            background: rgba(255, 255, 255, 0.15);
+            color: white;
+        }
+
+        .dialogBody {
+            padding: 20px;
+            overflow-y: auto;
+            flex: 1;
+            color: var(--text-primary, #ddd);
+            line-height: 1.6;
+        }
+
+        .dialogFooter {
             display: flex;
             gap: 12px;
             justify-content: flex-end;
-            padding: 12px;
+            padding: 16px 20px;
+            border-top: 1px solid var(--paper-border);
+            background-color: var(--background);
+            border-radius: 0 0 var(--dialog-radius) var(--dialog-radius);
         }
-
     </style>
 }
 
-
 @code {
-
     protected override void OnInitialized()
     {
         base.OnInitialized();
-
         MyDialogService.Subscribe(() => InvokeAsync(StateHasChanged));
     }
 
@@ -106,11 +133,8 @@
         MyDialogService.Unsubscribe(() => InvokeAsync(StateHasChanged));
     }
 
-
     public void CloseDialog()
     {
         MyDialogService.Hide();
     }
-
-
-}
+}