feat: enhance ReleaseNotesDialog with improved UI elements and animations; update button labels and alert messages

src/FrontOffice.Main/Shared/ReleaseNotesDialog.razor

@@ -4,41 +4,54 @@
 <MudDialog>
     <TitleContent>
         <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
-            <MudIcon Icon="@Icons.Material.Filled.SystemUpdateAlt" Color="Color.Primary" Size="Size.Large"/>
+            @if (IsForceUpdate)
-            <MudText Typo="Typo.h6">
+            {
-                @if (IsForceUpdate)
+                <MudIcon Icon="@Icons.Material.Filled.Warning" Color="Color.Warning" Size="Size.Large"/>
-                {
+                <MudText Typo="Typo.h6" Color="Color.Warning">بروزرسانی اجباری</MudText>
-                    <span>بروزرسانی اجباری</span>
+            }
-                }
+            else
-                else
+            {
-                {
+                <MudIcon Icon="@Icons.Material.Filled.NewReleases" Color="Color.Success" Size="Size.Large"/>
-                    <span>نسخه جدید موجود است</span>
+                <MudText Typo="Typo.h6">نسخه جدید موجود است 🎉</MudText>
-                }
+            }
-            </MudText>
         </MudStack>
     </TitleContent>
     
     <DialogContent>
         <MudStack Spacing="3">
-            @* اطلاعات نسخه *@
+            @* اطلاعات نسخه با انیمیشن *@
-            <MudPaper Class="pa-3" Elevation="0" Style="background-color: var(--mud-palette-background-grey);">
+            <MudPaper Class="pa-4 rounded-lg" Elevation="0" 
-                <MudStack Row="true" Justify="Justify.SpaceBetween">
+                      Style="background: linear-gradient(135deg, var(--mud-palette-primary-lighten) 0%, var(--mud-palette-background) 100%);">
-                    <MudText>نسخه فعلی:</MudText>
+                <MudGrid Spacing="2">
-                    <MudText Color="Color.Secondary">@(OldVersion ?? "---")</MudText>
+                    <MudItem xs="6">
-                </MudStack>
+                        <MudStack AlignItems="AlignItems.Center" Spacing="1">
-                <MudDivider Class="my-2"/>
+                            <MudIcon Icon="@Icons.Material.Outlined.History" Size="Size.Medium" Color="Color.Secondary"/>
-                <MudStack Row="true" Justify="Justify.SpaceBetween">
+                            <MudText Typo="Typo.caption" Color="Color.Secondary">نسخه فعلی</MudText>
-                    <MudText>نسخه جدید:</MudText>
+                            <MudChip T="string" Size="Size.Small" Variant="Variant.Outlined" Color="Color.Secondary">
-                    <MudText Color="Color.Primary"><b>@NewVersion</b></MudText>
+                                @(OldVersion ?? "---")
-                </MudStack>
+                            </MudChip>
+                        </MudStack>
+                    </MudItem>
+                    <MudItem xs="6">
+                        <MudStack AlignItems="AlignItems.Center" Spacing="1">
+                            <MudIcon Icon="@Icons.Material.Filled.Verified" Size="Size.Medium" Color="Color.Success"/>
+                            <MudText Typo="Typo.caption" Color="Color.Success">نسخه جدید</MudText>
+                            <MudChip T="string" Size="Size.Small" Variant="Variant.Filled" Color="Color.Success">
+                                @NewVersion
+                            </MudChip>
+                        </MudStack>
+                    </MudItem>
+                </MudGrid>
             </MudPaper>
             
             @* پیام آپدیت *@
             @if (!string.IsNullOrWhiteSpace(UpdateMessage))
             {
                 <MudAlert Severity="@(IsForceUpdate ? Severity.Warning : Severity.Info)" 
-                          Variant="Variant.Outlined" 
+                          Variant="Variant.Text" 
-                          Dense="true">
+                          Dense="true"
+                          Icon="@Icons.Material.Filled.Info"
+                          Class="rounded-lg">
                     @UpdateMessage
                 </MudAlert>
             }
@@ -46,18 +59,27 @@
             @* یادداشت‌های انتشار *@
             @if (!string.IsNullOrWhiteSpace(ReleaseNotes))
             {
-                <MudText Typo="Typo.subtitle2" Color="Color.Primary">تغییرات این نسخه:</MudText>
+                <MudStack Spacing="1">
-                <MudPaper Class="pa-3" Elevation="1" Style="max-height: 250px; overflow-y: auto;">
+                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
-                    @((MarkupString)ReleaseNotes)
+                        <MudIcon Icon="@Icons.Material.Filled.Article" Size="Size.Small" Color="Color.Primary"/>
-                </MudPaper>
+                        <MudText Typo="Typo.subtitle2" Color="Color.Primary">تغییرات این نسخه:</MudText>
+                    </MudStack>
+                    <MudPaper Class="pa-3 rounded-lg release-notes-content" Elevation="0" 
+                              Style="max-height: 220px; overflow-y: auto; background-color: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default);">
+                        @((MarkupString)ReleaseNotes)
+                    </MudPaper>
+                </MudStack>
             }
             
             @if (IsForceUpdate)
             {
-                <MudAlert Severity="Severity.Error" Variant="Variant.Filled" Dense="true">
+                <MudAlert Severity="Severity.Error" Variant="Variant.Filled" Dense="true" Class="rounded-lg">
-                    <MudText Typo="Typo.body2">
+                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
-                        این بروزرسانی اجباری است و باید انجام شود.
+                        <MudIcon Icon="@Icons.Material.Filled.Error" Size="Size.Small"/>
-                    </MudText>
+                        <MudText Typo="Typo.body2">
+                            این بروزرسانی اجباری است و باید انجام شود.
+                        </MudText>
+                    </MudStack>
                 </MudAlert>
             }
         </MudStack>
@@ -68,14 +90,17 @@
         {
             <MudButton OnClick="OnSkipClicked" 
                        Color="Color.Default" 
-                       Variant="Variant.Text">
+                       Variant="Variant.Text"
-                بعداً
+                       Size="Size.Medium">
+                بعداً یادآوری کن
             </MudButton>
         }
         <MudButton OnClick="OnUpdateClicked" 
-                   Color="Color.Primary" 
+                   Color="@(IsForceUpdate ? Color.Warning : Color.Success)" 
                    Variant="Variant.Filled"
-                   StartIcon="@Icons.Material.Filled.Update">
+                   Size="Size.Medium"
+                   StartIcon="@(_isUpdating ? null : Icons.Material.Filled.SystemUpdateAlt)"
+                   Class="px-6">
             @if (_isUpdating)
             {
                 <MudProgressCircular Size="Size.Small" Indeterminate="true" Color="Color.Surface"/>
@@ -83,12 +108,29 @@
             }
             else
             {
-                <span>بروزرسانی</span>
+                <span>بروزرسانی کن!</span>
             }
         </MudButton>
     </DialogActions>
 </MudDialog>
 
+<style>
+    .release-notes-content {
+        font-size: 0.9rem;
+        line-height: 1.8;
+    }
+    .release-notes-content ul, .release-notes-content ol {
+        padding-right: 1.5rem;
+        margin: 0.5rem 0;
+    }
+    .release-notes-content li {
+        margin-bottom: 0.3rem;
+    }
+    .release-notes-content p {
+        margin: 0.5rem 0;
+    }
+</style>
+
 @code {
     [CascadingParameter] 
     private IMudDialogInstance MudDialog { get; set; } = default!;