feat(FastProductCreateDialog),refactor(Pages),refactor(Commands)

-ADD FAST PRODUCT CREATE DIALOG
-Refactor page and layout and fix some responsive issues
-Refactor brand and product command and return Guid in response create

Netina.AdminPanel.PWA/Dialogs/BlogActionDialogBox.razor

@@ -30,9 +30,9 @@
                                     <ProgressIndicatorInPopoverTemplate>
                                         <MudList Clickable="false">
                                             <MudListItem>
-                                                <div class="flex flex-row w-full mx-auto">
+                                                <div class="mx-auto flex w-full flex-row">
-                                                    <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
+                                                    <MudProgressCircular class="my-auto -ml-4 mr-1" Size="Size.Small" Indeterminate="true" />
-                                                    <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
+                                                    <p class="text-md mx-auto my-1 font-bold">منتظر بمانید</p>
                                                 </div>
                                             </MudListItem>
                                         </MudList>
@@ -63,7 +63,6 @@
 
                     <div class="min-h-[33rem]">
                         <MudStack class="mt-4" Spacing="0">
-
                             <MudText Typo="Typo.h6">متن بلاگ</MudText>
                             <MudText Typo="Typo.caption">می توانید کتن کامل بلاگــــ خود را کامل وارد کنید</MudText>
                         </MudStack>
@@ -79,7 +78,7 @@
                 <MudTabPanel Text="تـــــصاویر" Icon="@Icons.Material.Outlined.ImageSearch">
 
                     <div class="min-h-[33rem]">
-                        <MudStack class="mt-4 mb-2" Spacing="0">
+                        <MudStack class="mb-2 mt-4" Spacing="0">
 
                             <MudText Typo="Typo.h6">تصاویر محصول</MudText>
                             <MudText Typo="Typo.caption">می توانید برای محصول چند تصویر اپلود کنید</MudText>
@@ -88,15 +87,15 @@
                             <MudIconButton HtmlTag="label"
                                            Color="Color.Info"
                                            Variant="Variant.Outlined"
-                                           class="w-28 h-28"
+                                           class="h-28 w-28"
                                            Size="Size.Large"
                                            Icon="@Icons.Material.Outlined.Wallpaper"
                                            OnClick="async () => await ViewModel.SelectFileAsync()">
                             </MudIconButton>
                             @foreach (var item in ViewModel.Files)
                             {
-                                <div class="w-28 h-28">
+                                <div class="h-28 w-28">
-                                    <MudImage Src="@item.GetLink()" Elevation="25" Class="rounded-lg w-28 h-28 absolute" />
+                                    <MudImage Src="@item.GetLink()" Elevation="25" Class="absolute h-28 w-28 rounded-lg" />
 
                                     <MudIconButton DisableElevation="true"
                                                    class="absolute m-1.5"
@@ -107,11 +106,11 @@
                                                    Icon="@Icons.Material.Outlined.Delete" />
                                     @if (item.IsHeader)
                                     {
-                                        <p class="bg-pink-500 px-1.5 py-0.5 absolute bottom-0 mr-2 rounded-lg text-white">هدر</p>
+                                        <p class="absolute bottom-0 mr-2 rounded-lg bg-pink-500 px-1.5 py-0.5 text-white">هدر</p>
                                     }
                                     @if (item.IsPrimary)
                                     {
-                                        <p class="bg-blue-500 px-1.5 py-0.5 absolute bottom-0 mr-2 rounded-lg text-white">اصلی</p>
+                                        <p class="absolute bottom-0 mr-2 rounded-lg bg-blue-500 px-1.5 py-0.5 text-white">اصلی</p>
                                     }
                                 </div>
                             }
@@ -124,7 +123,7 @@
         </MudContainer>
     </DialogContent>
     <DialogActions>
-        <MudStack Row="true" class="w-full h-fit mx-4 bottom-0">
+        <MudStack Row="true" class="bottom-0 mx-4 h-fit w-full">
 
             @if (ViewModel.IsEditing)
             {

Netina.AdminPanel.PWA/Dialogs/FastProductCreateDialogBox.razor

@@ -0,0 +1,142 @@
+@inject ISnackbar Snackbar
+@inject IRestWrapper RestWrapper
+@inject IUserUtility UserUtility
+@inject IDialogService DialogService
+
+
+<MudDialog class="mx-auto h-screen overflow-y-auto p-0">
+    <DialogContent>
+        <MudContainer class="p-0">
+            <MudStack Row="true">
+                <MudText Typo="Typo.h6" class="my-auto">افزودن سریع محصول</MudText>
+                <MudSpacer />
+                <MudIconButton Icon="@Icons.Material.Filled.Close" OnClick="()=>MudDialog.Close()"></MudIconButton>
+            </MudStack>
+            <MudAlert Dense="true" NoIcon="true" Variant="Variant.Outlined" ContentAlignment="HorizontalAlignment.Center" class="mb-4 mt-2" Severity="Severity.Warning">در این صفحه تنها اطلاعات اولیه ثبت میشوند و باید برای تکمیل اطلاعات محصول به صحفه اصلی تغییرات محصول بروید</MudAlert>
+            <MudStack Row="true" class="no-scrollbar h-full w-full overflow-x-auto">
+                <MudStack class="min-w-[310px]">
+                    <MudText Typo="Typo.h6"><b>1. انتخاب دسته بندی</b></MudText>
+                    <MudTextField class="-mt-3 flex-none" T="string" Label="جست جو دسته" />
+                    <MudTreeView MultiSelection="false" @bind-SelectedValue="@ViewModel.SelectedCategory" T="ProductCategorySDto" ServerData="ViewModel.LoadCategories" Items="ViewModel.Categories">
+                        <ItemTemplate>
+                            <MudTreeViewItem class="my-1" Value="@context" LoadingIconColor="Color.Info"
+                                             Text="@context.Name"
+                                             EndTextTypo="@Typo.caption" />
+                        </ItemTemplate>
+                    </MudTreeView>
+                </MudStack>
+                <MudDivider Vertical="true" FlexItem="true" class="mx-1" />
+
+                <MudStack class="min-w-[310px] sm:w-full">
+                    <MudText Typo="Typo.h6">1. افزودن محصول به <b> @ViewModel.SelectedCategory?.Name</b></MudText>
+                    <MudGrid Spacing="1" class="-ml-1 w-full">
+                        <MudItem xs="12" md="6">
+                            <MudTextField Disabled="@ViewModel.FormEnable.Not()" @bind-Value="@ViewModel.PageDto.PersianName" Variant="Variant.Outlined" T="string" Label="نام فارسی کالا" />
+                        </MudItem>
+                        <MudItem xs="12" md="6">
+                            <MudAutocomplete Disabled="@ViewModel.FormEnable.Not()" Required="true" ToStringFunc="dto => dto.PersianName" @bind-Value="@ViewModel.SelectedBrand"
+                                             SearchFunc="ViewModel.SearchBrand"
+                                             @bind-Text="@brandAutocompleteText"
+                                             T="BrandSDto"
+                                             Label="برند"
+                                             Variant="Variant.Outlined">
+                                <NoItemsTemplate>
+                                    <MudStack Row="true" class="p-1">
+                                        <MudChip Variant="Variant.Text" class="my-auto"
+                                                 Color="Color.Info">@brandAutocompleteText</MudChip>
+                                        <MudSpacer />
+                                        <MudIconButton Icon="@Icons.Material.Filled.Add"
+                                                       Size="@Size.Small"
+                                                       Variant="@Variant.Outlined"
+                                                       OnClick="()=>ViewModel.AddBrand(brandAutocompleteText)"
+                                                       Color="@Color.Secondary" />
+                                    </MudStack>
+                                </NoItemsTemplate>
+                                <BeforeItemsTemplate>
+                                    @if (!brandAutocompleteText.IsNullOrEmpty())
+                                    {
+                                        <MudStack Row="true">
+                                            <MudChip Variant="Variant.Text" class="my-auto"
+                                                     Color="Color.Info">@brandAutocompleteText</MudChip>
+                                            <MudSpacer />
+                                            <MudIconButton Icon="@Icons.Material.Filled.Add"
+                                                           Size="@Size.Small"
+                                                           Variant="@Variant.Outlined"
+                                                           Color="@Color.Secondary" />
+                                        </MudStack>
+                                    }
+                                </BeforeItemsTemplate>
+                                <ProgressIndicatorInPopoverTemplate>
+                                    <MudList Clickable="false">
+                                        <MudListItem>
+                                            <div class="mx-auto flex w-full flex-row">
+                                                <MudProgressCircular class="my-auto -ml-4 mr-1" Size="Size.Small" Indeterminate="true" />
+                                                <p class="text-md mx-auto my-1 font-bold">منتظر بمانید</p>
+                                            </div>
+                                        </MudListItem>
+                                    </MudList>
+                                </ProgressIndicatorInPopoverTemplate>
+                                <ItemTemplate Context="e">
+                                    <p>@e.PersianName</p>
+                                </ItemTemplate>
+                            </MudAutocomplete>
+                        </MudItem>
+                        <MudItem xs="12" md="6">
+                            <MudTextField Disabled="@ViewModel.FormEnable.Not()" @bind-Value="@ViewModel.PageDto.Stock" Variant="Variant.Outlined" T="int" Label="تعداد موجودی" />
+                        </MudItem>
+                        <MudItem xs="12" md="6">
+                            <MudTextField Disabled="@ViewModel.FormEnable.Not()" @bind-Value="@ViewModel.PageDto.Cost" Format="N0" Variant="Variant.Outlined" T="double" Label="قیمت ( تومان )" />
+                        </MudItem>
+                    </MudGrid>
+                    <MudFileUpload T="IReadOnlyList<IBrowserFile>"
+                                   AppendMultipleFiles
+                                   OnFilesChanged="@ViewModel.OnInputFileChanged"
+                                   Hidden="@false"
+                                   Disabled="@ViewModel.FormEnable.Not()"
+                                   InputClass="absolute mud-width-full mud-height-full overflow-hidden z-20"
+                                   InputStyle="opacity:0"
+                                   class="flex-none"
+                                   Accept=".png, .jpg"
+                                   @ondragenter="@ViewModel.SetDragClass"
+                                   @ondragleave="@ViewModel.ClearDragClass"
+                                   @ondragend="@ViewModel.ClearDragClass">
+                        <ButtonTemplate>
+                            <MudPaper Height="300px"
+                                      Outlined="true"
+                                      Class="@ViewModel.DragClass">
+                                <MudText Typo="Typo.h6">
+                                    فایل های خود را داخل کادر بکشید یا با کلیک روی کادر انتخاب کنید
+                                </MudText>
+                                @foreach (var file in ViewModel.FileNames)
+                                {
+                                    <MudChip Color="Color.Dark" Text="@file" />
+                                }
+                            </MudPaper>
+                        </ButtonTemplate>
+                    </MudFileUpload>
+                    
+                    <MudButton Disabled="@ViewModel.FormEnable.Not()" Color="Color.Success" StartIcon="@Icons.Material.Filled.Check" OnClick="@ViewModel.SubmitCreateProduct">ثبت محصول</MudButton>
+                </MudStack>
+
+
+            </MudStack>
+        </MudContainer>
+    </DialogContent>
+</MudDialog>
+@code
+{
+
+    [CascadingParameter]
+    MudDialogInstance MudDialog { get; set; }
+
+    string brandAutocompleteText = string.Empty;
+    public FastProductCreateDialogBoxViewModel ViewModel { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        ViewModel = new FastProductCreateDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog);
+        await ViewModel.InitializeAsync();
+        await base.OnInitializedAsync();
+    }
+
+}

Netina.AdminPanel.PWA/Dialogs/FastProductCreateDialogBox.razor.cs

@@ -0,0 +1,159 @@
+using Microsoft.AspNetCore.Components.Forms;
+using Netina.Common.Models.Api;
+using Netina.Domain.Entities.Brands;
+
+namespace Netina.AdminPanel.PWA.Dialogs;
+
+public class FastProductCreateDialogBoxViewModel(ISnackbar snackbar, IRestWrapper restWrapper, IUserUtility userUtility, IDialogService dialogService, MudDialogInstance dialogInstance)
+    : BaseViewModel<ProductLDto>(userUtility)
+{
+    public HashSet<ProductCategorySDto> Categories { get; set; } = new();
+    public bool FormEnable = false;
+    private ProductCategorySDto? _selectedCategory;
+    public ProductCategorySDto? SelectedCategory
+    {
+        get => _selectedCategory;
+        set
+        {
+            _selectedCategory = value;
+            FormEnable = _selectedCategory != null;
+        }
+    }
+
+    public BrandSDto? SelectedBrand { get; set; }
+    public override async Task InitializeAsync()
+    {
+        var categories = await restWrapper.ProductCategoryRestApi.ReadAll(true);
+        categories.ForEach(c => Categories.Add(c));
+        PageDto.Stock = 1;
+        await base.InitializeAsync();
+    }
+
+    public async Task<HashSet<ProductCategorySDto>> LoadCategories(ProductCategorySDto arg)
+    {
+        return arg.Children.ToHashSet();
+    }
+
+    private readonly List<IBrowserFile> Files = new();
+    public readonly List<string> FileNames = new();
+    private const string DefaultDragClass = "relative rounded-lg border-2 border-dashed pa-4 mt-4 mud-width-full mud-height-full z-10";
+    public string DragClass = DefaultDragClass;
+    public void SetDragClass()
+        => DragClass = $"{DefaultDragClass} mud-border-primary";
+    public void ClearDragClass()
+        => DragClass = DefaultDragClass;
+
+    public void OnInputFileChanged(InputFileChangeEventArgs e)
+    {
+        ClearDragClass();
+        var files = e.GetMultipleFiles();
+        foreach (var file in files)
+        {
+            FileNames.Add(file.Name);
+            Files.Add(file);
+        }
+
+
+    }
+    private List<BrandSDto> brands = new();
+    public async Task<IEnumerable<BrandSDto>> SearchBrand(string brand)
+    {
+        try
+        {
+            if (brands.Count == 0)
+                brands = await restWrapper.BrandRestApi.ReadAll();
+            if (brand.IsNullOrEmpty().Not())
+                return brands.Where(b => b.PersianName.Trim().ToUpper().Contains(brand.Trim().ToUpper()));
+            return brands;
+        }
+        catch (ApiException ex)
+        {
+            var exe = await ex.GetContentAsAsync<ApiResult>();
+            snackbar.Add(exe != null ? exe.Message : ex.Content, Severity.Error);
+            return brands;
+        }
+        catch (Exception e)
+        {
+            snackbar.Add(e.Message, Severity.Error);
+            return brands;
+        }
+    }
+
+    public void AddBrand(string brandName)
+    {
+        if (brandName.IsNullOrEmpty())
+            return;
+        Task.Run(async () =>
+        {
+            var token = await userUtility.GetBearerTokenAsync();
+            if (token == null)
+                return;
+            var brand = new BrandSDto { PersianName = brandName };
+            brands.Add(brand);
+            var command = brand.Adapt<CreateBrandCommand>() with {Files = new()};
+            var response = await restWrapper.CrudApiRest<Brand, Guid>(Address.BrandController)
+                .Create(command, token);
+            brand.Id = response;
+            SelectedBrand = brand;
+        });
+    }
+    public void SubmitCreateProduct()
+    {
+        try
+        {
+            if (SelectedCategory == null)
+                throw new Exception("دسته بندی انتخاب نشده است");
+            if (SelectedBrand == null || SelectedBrand.Id == default)
+                throw new Exception("برند انتخاب نشده است");
+            if (PageDto.PersianName.IsNullOrEmpty())
+                throw new Exception("نام فارسی را وارد کنید");
+            var product = PageDto.Clone();
+            var brand = SelectedBrand.Clone();
+            var browserFiles = Files.ToList();
+            Task.Run(async () =>
+            {
+                var token = await userUtility.GetBearerTokenAsync();
+                if (token == null)
+                    return;
+                var files = new List<StorageFileSDto>();
+                foreach (var file in browserFiles)
+                {
+                    using var memoryStream = new MemoryStream();
+                    var stream = file.OpenReadStream();
+                    await stream.CopyToAsync(memoryStream);
+                    var fileUpload = new FileUploadRequest
+                    {
+                        ContentType = file.ContentType,
+                        FileName = file.Name,
+                        FileUploadType = FileUploadType.Image,
+                        StringBaseFile = Convert.ToBase64String(memoryStream.ToArray())
+                    };
+                    var rest = await restWrapper.FileRestApi.UploadFileAsync(fileUpload, token);
+                    files.Add(new StorageFileSDto
+                    {
+                        FileLocation = rest.FileLocation,
+                        FileName = rest.FileName,
+                        FileType = StorageFileType.Image
+                    });
+                }
+                var command = product.Adapt<CreateProductCommand>() with
+                {
+                    BeDisplayed = true,
+                    BrandId = brand.Id,
+                    CategoryId = SelectedCategory.Id,
+                    Files = files
+                };
+                await restWrapper.CrudApiRest<Product, Guid>(Address.ProductController)
+                    .Create(command, token);
+                
+            });
+            PageDto = new ProductLDto{Stock = 1};
+            FileNames.Clear();
+            Files.Clear();
+        }
+        catch (Exception e)
+        {
+            snackbar.Add(e.Message, Severity.Error);
+        }
+    }
+}

Netina.AdminPanel.PWA/Layout/MainLayout.razor

@@ -5,7 +5,7 @@
 @inherits LayoutComponentBase
 @inject NavigationManager NavigationManager
 @inject IUserUtility UserUtility
-
+@inject IBrowserViewportService BrowserViewportService
 <style>
 
     body .pwa-updater[b-pwa-updater] {
@@ -34,7 +34,40 @@
 <AuthorizeView>
 
     <Authorized>
+
         <MudRTLProvider RightToLeft="true">
+            <MudThemeProvider IsDarkMode="@MainTheme.IsDarkMode" Theme="@MainTheme.MyCustomTheme" />
+            <MudDialogProvider />
+            <MudSnackbarProvider />
+
+            <MudLayout>
+                <MudAppBar Elevation="1" class="py-2">
+                    <MudHidden Breakpoint="Breakpoint.MdAndUp">
+                        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" OnClick="@ToggleDrawer" Edge="Edge.Start"/>
+                    </MudHidden>
+
+
+                    <RadzenGravatar class="h-14 w-14" Email="@_user?.Email"/>
+                    <MudStack class="mr-2" Spacing="0">
+                        <MudText Color="Color.Inherit" Typo="Typo.body1"><b>@_user?.FullName</b></MudText>
+                        <MudText Color="Color.Inherit" Typo="Typo.caption">@_user?.PhoneNumber</MudText>
+                    </MudStack>
+                    <MudSpacer/>
+                    <MudToggleIconButton @bind-Toggled="@MainTheme.IsDarkMode"
+                                         Icon="@Icons.Material.Outlined.DarkMode" Color="@Color.Default" Title="تاریک"
+                                         ToggledIcon="@Icons.Material.Filled.LightMode" ToggledColor="@Color.Default" ToggledTitle="روشن"/>
+                    <MudIconButton Size="Size.Medium" Color="Color.Error" OnClick="LogoutAsync" Icon="@Icons.Material.Outlined.ExitToApp"/>
+                </MudAppBar>
+                <MudDrawer @bind-Open="open" ClipMode="DrawerClipMode.Always" Elevation="2">
+                    <SideBarUi />
+                </MudDrawer>
+                <MudMainContent class="bg-[--mud-palette-background-grey] h-screen overflow-y-auto">
+                    @Body
+                </MudMainContent>
+            </MudLayout>
+        </MudRTLProvider>
+
+        @* <MudRTLProvider RightToLeft="true">
         <MudThemeProvider IsDarkMode="@MainTheme.IsDarkMode" Theme="@MainTheme.MyCustomTheme"/>
         <MudDialogProvider/>
         <MudSnackbarProvider/>
@@ -57,42 +90,31 @@
         <MudIconButton Size="Size.Medium" Color="Color.Error" OnClick="LogoutAsync" Icon="@Icons.Material.Outlined.ExitToApp"/>
         </MudAppBar>
 
-                <MudDrawer @bind-Open="@open" Breakpoint="Breakpoint.MdAndUp" Elevation="1" Variant="@DrawerVariant.Responsive">
+        <MudDrawer @bind-Open="@open" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.MdAndUp" Elevation="1" Variant="@DrawerVariant.Responsive">
         <SideBarUi/>
         </MudDrawer>
 
-                <MudGrid Spacing="0">
+        <MudMainContent class="h-screen">
-
-                    <MudItem xs="0" md="3" lg="2">
-                        <MudHidden Breakpoint="Breakpoint.SmAndDown">
-                            <SideBarUi/>
-                        </MudHidden>
-                    </MudItem>
-                    <MudItem xs="12" sm="12" md="9" lg="10">
-
-                        <div>
         @Body
-                        </div>
+        </MudMainContent>
-                    </MudItem>
-                </MudGrid>
         </MudLayout>
         <div dir="ltr">
         <PWAUpdater Align="PWAUpdater.Aligns.Buttom" Text="@_updateText" ButtonCaption="اپدیت کنید"/>
         </div>
-        </MudRTLProvider>
+        </MudRTLProvider> *@
     </Authorized>
 
     <NotAuthorized>
         <MudRTLProvider RightToLeft="true">
-            <MudThemeProvider Theme="@MainTheme.MyCustomTheme"/>
+            <MudThemeProvider Theme="@MainTheme.MyCustomTheme" />
-            <MudDialogProvider/>
+            <MudDialogProvider />
-            <MudSnackbarProvider/>
+            <MudSnackbarProvider />
 
             <MudLayout>
                 <div>
-                    <LoginPage/>
+                    <LoginPage />
                     <div dir="ltr">
-                        <PWAUpdater Text="@_updateText" ButtonCaption="اپدیت کنید"/>
+                        <PWAUpdater Text="@_updateText" ButtonCaption="اپدیت کنید" />
                     </div>
                 </div>
             </MudLayout>
@@ -125,6 +147,9 @@
 
     protected override async Task OnInitializedAsync()
     {
+        var screen = await BrowserViewportService.GetCurrentBreakpointAsync();
+        if (screen > Breakpoint.Md)
+            open = true;
         _user = await UserUtility.GetUserAsync();
         await base.OnInitializedAsync();
     }

Netina.AdminPanel.PWA/Pages/BlogCategoriesPage.razor

@@ -7,7 +7,7 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="no-scrollbar h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudStack Row="true" class="mb-5">
@@ -58,7 +58,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
-                                           SelectedChanged="@ViewModel.ChangePageAsync" class="my-4 mx-auto" />
+                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4" />
                         </MudStack>
 
                     </PagerContent>

Netina.AdminPanel.PWA/Pages/BlogsPage.razor

@@ -9,7 +9,7 @@
 @inject IConfiguration Configuration
 @inject IJSRuntime JsRuntime
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="no-scrollbar h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudStack Row="true" class="mb-5">
@@ -67,7 +67,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
-                                           SelectedChanged="@ViewModel.ChangePageAsync" class="my-4 mx-auto" />
+                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4" />
                         </MudStack>
 
                     </PagerContent>

Netina.AdminPanel.PWA/Pages/BrandsPage.razor

@@ -7,7 +7,7 @@
 @inject IUserUtility UserUtility
 
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="no-scrollbar h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudStack Row="true" class="mb-5">
@@ -72,7 +72,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
-                                           SelectedChanged="@ViewModel.ChangePageAsync" class="my-4 mx-auto" />
+                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4" />
                         </MudStack>
 
                     </PagerContent>

Netina.AdminPanel.PWA/Pages/CategoriesPage.razor

@@ -11,7 +11,6 @@
     }
 </style>  *@
 <MudPaper class="bg-[--mud-palette-background-grey] h-screen w-full p-3 md:p-8">
-
     <MudStack Row="true" class="overflow-x-auto pb-3">
         <MudStack Spacing="1" class="min-w-[340px]">
             <MudStack Row="true" class="mb-5">
@@ -119,80 +118,3 @@
     }
 
 }
-
-
-            @* <MudPaper class="!max-h-[80vh] overflow-auto">
-                <MudDataGrid FixedFooter="true" FixedHeader="true" Striped="true"
-                             T="ProductCategorySDto" Items="@ViewModel.PageDto" CurrentPage="@ViewModel.CurrentPage"
-                             RowsPerPage="15" Filterable="false" Loading="@ViewModel.IsProcessing"
-                             SortMode="@SortMode.None" Groupable="false">
-                    <ToolBarContent>
-                        <MudTextField T="string" Placeholder="جست جو بر اساس نام" Adornment="Adornment.Start" Immediate="true"
-                                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" class="my-auto"
-                                      @bind-Value="@ViewModel.Search"
-                                      OnAdornmentClick="@ViewModel.SearchAsync"></MudTextField>
-                    </ToolBarContent>
-
-                    <Columns>
-                        <HierarchyColumn T="ProductCategorySDto" ButtonDisabledFunc="@(x => x.Description.IsNullOrEmpty())" />
-                        <PropertyColumn Title="نام دسته" Resizable="false"  Property="arg => arg.Name"/>
-                        <TemplateColumn Title="توضیحاتــ" Resizable="false" T="ProductCategorySDto">
-                            <CellTemplate>
-                                <p class="line-clamp-1">@context.Item.Description</p>
-                            </CellTemplate>
-                        </TemplateColumn>
-                        <TemplateColumn Resizable="false" Title="دسته اصلی" T="ProductCategorySDto">
-                            <CellTemplate>
-                                @if (@context.Item.IsMain)
-                                {
-                                    <p>بلی</p>
-                                }
-                                else
-                                {
-                                    <p>خیر</p>
-
-                                }
-                            </CellTemplate>
-                        </TemplateColumn>
-                        <PropertyColumn Title="دسته پدر" Resizable="false" Property="arg => arg.ParentName" />
-                        <TemplateColumn CellClass="d-flex justify-end">
-                            <CellTemplate>
-                                <MudStack Row="true">
-                                    <MudIconButton Icon="@Icons.Material.Filled.Edit"
-                                                   Size="@Size.Small"
-                                                   Variant="@Variant.Outlined"
-                                                   OnClick="async () => await ViewModel.EditProductCategoryClicked(context.Item)"
-                                                   Color="@Color.Info"/>
-
-                                    <MudIconButton Icon="@Icons.Material.Filled.Delete"
-                                                   Size="@Size.Small"
-                                                   Variant="@Variant.Outlined"
-                                                   OnClick="async () => await ViewModel.DeleteProductCategoryAsync(context.Item.Id)"
-                                                   Color="@Color.Error"/>
-                                </MudStack>
-                            </CellTemplate>
-                        </TemplateColumn>
-                    </Columns>
-
-                    <ChildRowContent>
-                        <MudCard>
-                            <MudCardHeader>
-                                <CardHeaderContent>
-                                    <MudText Typo="Typo.h6">توضیحاتــ</MudText>
-                                </CardHeaderContent>
-                            </MudCardHeader>
-                            <MudCardContent>
-                                <MudText>@context.Item.Description</MudText>
-                            </MudCardContent>
-                        </MudCard>
-                    </ChildRowContent>
-                    <PagerContent>
-                        <MudStack Row="true" class="w-full">
-
-                            <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
-                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4"/>
-                        </MudStack>
-
-                    </PagerContent>
-                </MudDataGrid>
-            </MudPaper> *@

Netina.AdminPanel.PWA/Pages/DiscountPage.razor

@@ -7,7 +7,7 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="no-scrollbar h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudStack Row="true" class="mb-5">
@@ -125,7 +125,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
-                                           SelectedChanged="@ViewModel.ChangePageAsync" class="my-4 mx-auto" />
+                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4" />
                         </MudStack>
 
                     </PagerContent>

Netina.AdminPanel.PWA/Pages/FaqManagementPage.razor

@@ -7,7 +7,7 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudStack Row="true" class="mb-8">
@@ -23,7 +23,7 @@
                     <MudTextField T="string" Label="پاسخ" @bind-Value="@ViewModel.Answer" Variant="Variant.Outlined"></MudTextField>
                 </MudItem>
                 <MudItem>
-                    <MudButton class="py-3 mt-2" EndIcon="@Icons.Material.Outlined.Add" 
+                    <MudButton class="mt-2 py-3" EndIcon="@Icons.Material.Outlined.Add" 
                                Variant="Variant.Outlined" Size="Size.Large" Color="Color.Info" OnClick="@ViewModel.AddNewQuestion">افزودن</MudButton>
                 </MudItem>
             </MudGrid>

Netina.AdminPanel.PWA/Pages/Home.razor

@@ -8,72 +8,72 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="px-0 md:p-5 lg:p-8 w-full h-screen overflow-x-hidden overflow-y-scroll bg-[--mud-palette-background-grey]">
+<MudStack class="no-scrollbar h-full w-full overflow-x-hidden px-0 md:p-5 lg:p-8">
     <MudHidden Breakpoint="Breakpoint.Xs">
         <MudGrid>
             <MudItem xs="12" sm="4" lg="2">
-                <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
+                <MudPaper class="m-2 rounded-md p-3" Elevation="2">
                     <MudText Typo="Typo.body1" class="mb-4">تعداد محصولاتــ</MudText>
                     <MudText Typo="Typo.h3" Align="Align.Center" class="text-amber-600"><b>@ViewModel.PageDto.ProductsCount</b></MudText>
-                    <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
+                    <MudText Typo="Typo.h6" Align="Align.Center" class="-mt-1 mb-4"><b>عدد</b></MudText>
                 </MudPaper>
             </MudItem>
             <MudItem xs="12" sm="4" lg="2">
-                <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
+                <MudPaper class="m-2 rounded-md p-3" Elevation="2">
                     <MudText Typo="Typo.body1" class="mb-4">تعداد بلاگــ ها</MudText>
                     <MudText Typo="Typo.h3" Align="Align.Center" class="text-blue-600"><b>@ViewModel.PageDto.BlogsCount</b></MudText>
-                    <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
+                    <MudText Typo="Typo.h6" Align="Align.Center" class="-mt-1 mb-4"><b>عدد</b></MudText>
                 </MudPaper>
             </MudItem>
             <MudItem xs="12" sm="4" lg="2">
-                <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
+                <MudPaper class="m-2 rounded-md p-3" Elevation="2">
                     <MudText Typo="Typo.body1" class="mb-4">فروش های امروز</MudText>
                     <MudText Typo="Typo.h3" Align="Align.Center" class="text-lime-600"><b>@ViewModel.PageDto.TodayOrdersCount</b></MudText>
-                    <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
+                    <MudText Typo="Typo.h6" Align="Align.Center" class="-mt-1 mb-4"><b>عدد</b></MudText>
                 </MudPaper>
             </MudItem>
             <MudItem xs="12" sm="4" lg="2">
-                <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
+                <MudPaper class="m-2 rounded-md p-3" Elevation="2">
                     <MudText Typo="Typo.body1" class="mb-4">تایید نشده</MudText>
                     <MudText Typo="Typo.h3" Align="Align.Center" class="text-rose-600"><b>@ViewModel.PageDto.UnSubmittedOrdersCount</b></MudText>
-                    <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
+                    <MudText Typo="Typo.h6" Align="Align.Center" class="-mt-1 mb-4"><b>عدد</b></MudText>
                 </MudPaper>
             </MudItem>
             <MudItem xs="12" sm="4" lg="2">
-                <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
+                <MudPaper class="m-2 rounded-md p-3" Elevation="2">
                     <MudText Typo="Typo.body1" class="mb-4">تعداد برنـــدها</MudText>
                     <MudText Typo="Typo.h3" Align="Align.Center" class="text-gray-600"><b>@ViewModel.PageDto.BrandsCount</b></MudText>
-                    <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
+                    <MudText Typo="Typo.h6" Align="Align.Center" class="-mt-1 mb-4"><b>عدد</b></MudText>
                 </MudPaper>
             </MudItem>
             <MudItem xs="12" sm="4" lg="2">
-                <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
+                <MudPaper class="m-2 rounded-md p-3" Elevation="2">
                     <MudText Typo="Typo.body1" class="mb-4">تعداد مشترکین</MudText>
                     <MudText Typo="Typo.h3" Align="Align.Center" class="text-purple-600"><b>@ViewModel.PageDto.SubscribersCount</b></MudText>
-                    <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>نفر</b></MudText>
+                    <MudText Typo="Typo.h6" Align="Align.Center" class="-mt-1 mb-4"><b>نفر</b></MudText>
                 </MudPaper>
             </MudItem>
         </MudGrid>
     </MudHidden>
     <MudHidden Breakpoint="Breakpoint.SmAndUp">
-        <MudStack Row="true" class="whitespace-nowrap overflow-x-scroll w-screen no-scrollbar">
+        <MudStack Row="true" class="no-scrollbar w-screen overflow-x-scroll whitespace-nowrap">
             
-            <MudPaper class="w-fit p-3 m-2 rounded-md" Elevation="2">
+            <MudPaper class="m-2 w-fit rounded-md px-3 pb-5 pt-3" Elevation="2">
                 <MudText Typo="Typo.body1" class="mb-6 ml-16">تعداد محصولاتــ</MudText>
                 <MudText Typo="Typo.h3" Align="Align.Center" class="text-amber-600"><b>1124</b></MudText>
-                <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
+                <MudText Typo="Typo.h6" Align="Align.Center" class="-mt-1"><b>عدد</b></MudText>
             </MudPaper>
             
-            <MudPaper class="w-fit p-3 m-2 rounded-md" Elevation="2">
+            <MudPaper class="m-2 w-fit rounded-md px-3 pb-5 pt-3" Elevation="2">
                 <MudText Typo="Typo.body1" class="mb-6 ml-16">تعداد محصولاتــ</MudText>
                 <MudText Typo="Typo.h3" Align="Align.Center" class="text-amber-600"><b>1124</b></MudText>
-                <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
+                <MudText Typo="Typo.h6" Align="Align.Center" class="-mt-1"><b>عدد</b></MudText>
             </MudPaper>
             
-            <MudPaper class="w-fit p-3 m-2 rounded-md" Elevation="2">
+            <MudPaper class="m-2 w-fit rounded-md px-3 pb-5 pt-3" Elevation="2">
                 <MudText Typo="Typo.body1" class="mb-6 ml-16">تعداد محصولاتــ</MudText>
                 <MudText Typo="Typo.h3" Align="Align.Center" class="text-amber-600"><b>1124</b></MudText>
-                <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
+                <MudText Typo="Typo.h6" Align="Align.Center" class="-mt-1"><b>عدد</b></MudText>
             </MudPaper>
         </MudStack>
     </MudHidden>
@@ -85,7 +85,7 @@
                               Icon="@Icons.Material.Outlined.AddCard"
                               Variant="Variant.Outlined" Color="Color.Default"
                               OnClickCallback="@ViewModel.AddProductClicked"
-                              Content="محصول جدید" />
+                              Content="افزودن سریع محصولات" />
             </MudStack>
         </MudItem>
 
@@ -96,7 +96,7 @@
                               Icon="@Icons.Material.Outlined.AddLink"
                               Variant="Variant.Outlined" Color="Color.Default"
                               OnClickCallback="@ViewModel.AddBlogClicked"
-                              Content="بلاگ جدید" />
+                              Content="دسته بندی های محصولات" />
             </MudStack>
         </MudItem>
 
@@ -143,7 +143,7 @@
                         <PagerContent>
                             <MudStack Row="true" class="w-full">
 
-                                <MudPagination Rectangular="true" Variant="Variant.Filled" class="my-4 mx-auto" />
+                                <MudPagination Rectangular="true" Variant="Variant.Filled" class="mx-auto my-4" />
                             </MudStack>
 
                         </PagerContent>

Netina.AdminPanel.PWA/Pages/MarketerManagementPage.razor

@@ -7,19 +7,19 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="no-scrollbar h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudPaper class="px-5 py-5">
                 <MudStack Row="true">
-                    <MudStack class="mb-5 mx-2">
+                    <MudStack class="mx-2 mb-5">
                         <MudText Typo="Typo.h4">jتنظیماتـــ بازاریاب ها</MudText>
                         <MudText Typo="Typo.caption">شما می توانید تنظیمات بازاریاب های خود را ویرایش نمایید</MudText>
                     </MudStack>
                     <MudSpacer />
                     <BaseButtonUi Size="Size.Large"
                                   OnClickCallback="ViewModel.SubmitSettingAsync"
-                                  class="mt-2 mb-8 w-64 rounded-md"
+                                  class="mb-8 mt-2 w-64 rounded-md"
                                   IsProcessing="@ViewModel.IsProcessing"
                                   Icon="@Icons.Material.Outlined.Check"
                                   Content="ثبتـــ اطلاعات" Variant="Variant.Filled" Color="Color.Success" />

Netina.AdminPanel.PWA/Pages/NewsletterManagementPage.razor

@@ -6,7 +6,7 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudStack Row="true" class="mb-5">
@@ -27,7 +27,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
-                                           SelectedChanged="@ViewModel.ChangePageAsync" class="my-4 mx-auto" />
+                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4" />
                         </MudStack>
 
                     </PagerContent>

Netina.AdminPanel.PWA/Pages/NotFoundPage.razor

@@ -3,12 +3,12 @@
 @page "/notfound"
 @inject NavigationManager NavigationManager
 
-<div class="w-screen h-screen p-0 overflow-hidden  bg-[--mud-palette-background]">
+<div class="h-full w-screen overflow-hidden p-0">
-    <div class="h-full w-fulll">
+    <div class="w-fulll h-full">
 
         <MudStack class="mx-auto my-auto">
             <dotlottie-player src="https://lottie.host/4b415b83-5315-4e7f-b174-d036d9f8612f/4qKuHHyOxk.json"
-                              background="transparent" speed="1" class="mx-auto w-96 h-96 lg:w-[38rem] lg:h-[38rem]" loop autoplay />
+                              background="transparent" speed="1" class="mx-auto h-96 w-96 lg:w-[38rem] lg:h-[38rem]" loop autoplay />
 
             <MudText Typo="Typo.h2" Align="Align.Center"><b>صفحه مورد نظر پیدا نشد</b></MudText>
             <MudText Typo="Typo.h5" Align="Align.Center">صفحه مورد نظر شما پیدا نشد یا از بین رفته است ، سریع کام بک بزن به جای قبلی جیگر </MudText>
@@ -17,7 +17,7 @@
                           Icon="@Icons.Material.Outlined.Login" 
                           OnClickCallback="NavigateToHomeAsync"
                           Color="Color.Default" 
-                          class="w-64 rounded-full mt-6 mx-auto"
+                          class="mx-auto mt-6 w-64 rounded-full"
                           Content="کام بکــــ"></BaseButtonUi>
 
         </MudStack>

Netina.AdminPanel.PWA/Pages/OrdersPage.razor

@@ -8,7 +8,7 @@
 @inject IRestWrapper RestWrapper
 @inject IBrowserViewportService BrowserViewportService
 
-<MudStack class="bg-[--mud-palette-background-grey] h-screen w-full overflow-x-hidden overflow-y-scroll md:p-5 lg:px-8">
+<MudStack class="no-scrollbar h-full w-full overflow-x-hidden overflow-y-scroll md:p-5 lg:px-8">
     
     <MudHidden Breakpoint="Breakpoint.Xs">
         <MudGrid>

Netina.AdminPanel.PWA/Pages/PagesManagementPage.razor

@@ -7,11 +7,11 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="h-full w-full p-8">
     <MudPaper class="px-5 py-5">
         <MudStack>
             <MudStack Row="true">
-                <MudStack class="mb-5 mx-2">
+                <MudStack class="mx-2 mb-5">
                     <MudText Typo="Typo.h4">تنظیمات برگه ها</MudText>
                     <MudText Typo="Typo.caption">برگه های وب سایت خود را ویرایش نمایید</MudText>
                 </MudStack>
@@ -19,7 +19,7 @@
                 <MudSpacer />
                 @* <BaseButtonUi Size="Size.Large"
                               OnClickCallback="ViewModel.SubmitPagesSettingAsync"
-                              class="mt-2 mb-8 w-64 rounded-md"
+                              class="mb-8 mt-2 w-64 rounded-md"
                               IsProcessing="@ViewModel.IsProcessing"
                               Icon="@Icons.Material.Outlined.Check"
                               Content="ثبتـــ اطلاعات" Variant="Variant.Filled" Color="Color.Success" /> *@
@@ -28,13 +28,13 @@
                 <MudItem xs="6">
 
                     <MudDivider />
-                    <MudText class="mt-4 mb-5" Typo="Typo.h6">افزودن برگه جدید</MudText>
+                    <MudText class="mb-5 mt-4" Typo="Typo.h6">افزودن برگه جدید</MudText>
 
                     <MudTextField @bind-Value="@ViewModel.NewPageDto.Title" T="string" Label="عنوان" Variant="Variant.Outlined" />
 
                     <MudTextField class="my-3" @bind-Value="@ViewModel.NewPageDto.Slug" T="string" Label="اسلاگ" Variant="Variant.Outlined" />
 
-                    <MudButton class="w-full py-3 mt-1" Variant="Variant.Outlined" Color="Color.Secondary" OnClick="ViewModel.AddPageAsync">افزودن +</MudButton>
+                    <MudButton class="mt-1 w-full py-3" Variant="Variant.Outlined" Color="Color.Secondary" OnClick="ViewModel.AddPageAsync">افزودن +</MudButton>
 
                 </MudItem>
                 <MudItem xs="6">

Netina.AdminPanel.PWA/Pages/PaymentsPage.razor

@@ -7,7 +7,7 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="no-scrollbar h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudStack Row="true" class="mb-5">
@@ -73,7 +73,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
-                                           SelectedChanged="@ViewModel.ChangePageAsync" class="my-4 mx-auto" />
+                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4" />
                         </MudStack>
 
                     </PagerContent>

Netina.AdminPanel.PWA/Pages/ProductsPage.razor

@@ -8,31 +8,39 @@
 @inject IRestWrapper RestWrapper
 @inject IBrowserViewportService BrowserViewportService
 
-<MudStack class="bg-[--mud-palette-background-grey] h-screen w-full p-8">
+<MudStack class="no-scrollbar h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
-            <MudGrid Row="true" class="mb-5">
+            <MudStack Row="@ViewModel.IsXs.Not()" class="mb-5">
-                <MudItem xs="12" sm="6" md="8">
                 <MudStack Row="true">
                     <MudText Typo="Typo.h4">محصولاتــــ</MudText>
                     <MudChip Color="Color.Info" Variant="Variant.Outlined">@ViewModel.TotalItems عدد</MudChip>
                 </MudStack>
-                </MudItem>
+                @if (@ViewModel.IsXs.Not())
-                <MudItem xs="12" sm="6" md="4">
+                {
+                    <MudSpacer />
+                }
+                <MudStack Row="@ViewModel.IsXs.Not()">
                     <MudButton Variant="Variant.Filled"
                                DisableElevation="true"
                                StartIcon="@Icons.Material.Outlined.Add"
                                Color="Color.Secondary"
                                OnClick="@ViewModel.AddProductClicked"
                                class="w-full md:my-auto md:w-auto">افزودن محصول</MudButton>
-                    <MudButton Variant="Variant.Filled"
+                    <MudButton Variant="Variant.Outlined"
+                               DisableElevation="true"
+                               StartIcon="@Icons.Material.Outlined.Add"
+                               Color="Color.Info"
+                               OnClick="@ViewModel.AddFastProductClicked"
+                               class="w-full md:my-auto md:w-auto">افزودن سریع محصول</MudButton>
+                    <MudButton Variant="Variant.Outlined"
                                DisableElevation="true"
                                StartIcon="@Icons.Material.Outlined.Add"
                                Color="Color.Error"
                                OnClick="@ViewModel.AddDigikalaProductClicked"
                                class="w-full md:my-auto md:w-auto">افزودن محصول از دیجیکالا</MudButton>
-                </MudItem>
+                </MudStack>
-            </MudGrid>
+            </MudStack>
             <MudHidden Breakpoint="Breakpoint.SmAndUp">
                 <MudGrid class="mb-3" Row="true">
 
@@ -69,12 +77,10 @@
                     </MudItem>
                 </MudGrid>
             </MudHidden>
-            <MudPaper class="!max-h-[80vh] overflow-auto">
+            <MudPaper>
                 <MudDataGrid FixedFooter="true" FixedHeader="true" Striped="true"
-                             
                              T="ProductSDto" Items="@ViewModel.PageDto" CurrentPage="@ViewModel.CurrentPage"
                              RowsPerPage="20" Filterable="false" Loading="@ViewModel.IsProcessing"
-                             
                              SortMode="@SortMode.None" Groupable="false">
 
                     <ToolBarContent>
@@ -120,8 +126,8 @@
                                 <MudCheckBox ValueChanged="delegate(bool flag) { context.Item.BeDisplayed = flag; ViewModel.DisplayedChanged(context.Item); }" Color="Color.Secondary" Value="@context.Item.BeDisplayed"></MudCheckBox>
                             </CellTemplate>
                         </TemplateColumn>
-                        <PropertyColumn Title="نام محصول" Property="arg => arg.PersianName"/>
+                        <PropertyColumn Title="نام محصول" Property="arg => arg.PersianName" />
-                        <PropertyColumn Title="دسته بندی" Property="arg => arg.CategoryName"/>
+                        <PropertyColumn Title="دسته بندی" Property="arg => arg.CategoryName" />
                         <PropertyColumn Title="برند" Property="arg => arg.BrandName" />
                         <TemplateColumn T="ProductSDto" Title="پیشنهاد ویژه است">
                             <CellTemplate>
@@ -148,12 +154,12 @@
                                                    Size="@Size.Small"
                                                    Variant="@Variant.Outlined"
                                                    Color="@Color.Info"
-                                                   OnClick="async()=>await ViewModel.EditProductClicked(context.Item)"/>
+                                                   OnClick="async()=>await ViewModel.EditProductClicked(context.Item)" />
                                     <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                                    Size="@Size.Small"
                                                    Variant="@Variant.Outlined"
                                                    OnClick="async () => await ViewModel.DeleteProductAsync(context.Item.Id)"
-                                                   Color="@Color.Error"/>
+                                                   Color="@Color.Error" />
                                 </MudStack>
                             </CellTemplate>
                         </TemplateColumn>
@@ -162,7 +168,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
-                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4"/>
+                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4" />
                         </MudStack>
 
                     </PagerContent>

Netina.AdminPanel.PWA/Pages/ProductsPage.razor.cs

@@ -15,6 +15,7 @@ public class ProductsPageViewModel : BaseViewModel<ObservableCollection<ProductS
     public int CurrentPage = 0;
     public int PageCount = 1;
     public int TotalItems = 0;
+    public bool IsXs = false;
 
     public ProductsPageViewModel(NavigationManager navigationManager, 
         ISnackbar snackbar, 
@@ -29,6 +30,7 @@ public class ProductsPageViewModel : BaseViewModel<ObservableCollection<ProductS
         _restWrapper = restWrapper;
         _dialogService = dialogService;
         _browserViewportService = browserViewportService;
+
     }
 
     public override async Task InitializeAsync()
@@ -45,6 +47,7 @@ public class ProductsPageViewModel : BaseViewModel<ObservableCollection<ProductS
             if (PageDto.Count == 20)
                 PageCount = 2;
             TotalItems = dto.Pager.TotalItems;
+            IsXs = (await _browserViewportService.GetCurrentBreakpointAsync()) == Breakpoint.Xs;
         }
         catch (ApiException ex)
         {
@@ -122,6 +125,20 @@ public class ProductsPageViewModel : BaseViewModel<ObservableCollection<ProductS
         }
     }
 
+
+    public async Task AddFastProductClicked()
+    {
+        DialogOptions maxWidth = new DialogOptions() { MaxWidth = MaxWidth.Large, FullWidth = true, NoHeader = true, DisableBackdropClick = true , CloseButton = true };
+        var breakPoint = await _browserViewportService.GetCurrentBreakpointAsync();
+        if (breakPoint == Breakpoint.Xs)
+            maxWidth = new DialogOptions { FullScreen = true, NoHeader = true, CloseButton = true };
+        var dialogResult = await _dialogService.ShowAsync<FastProductCreateDialogBox>("افزودن محصول جدید", maxWidth);
+        var result = await dialogResult.Result;
+        if (!result.Canceled && result.Data is bool and true)
+        {
+            await InitializeAsync();
+        }
+    }
     public async Task AddDigikalaProductClicked()
     {
 
@@ -137,6 +154,9 @@ public class ProductsPageViewModel : BaseViewModel<ObservableCollection<ProductS
     public async Task EditProductClicked(ProductSDto product)
     {
         DialogOptions maxWidth = new DialogOptions() { MaxWidth = MaxWidth.Large, FullWidth = true, DisableBackdropClick = true };
+        var breakPoint = await _browserViewportService.GetCurrentBreakpointAsync();
+        if (breakPoint == Breakpoint.Xs)
+            maxWidth = new DialogOptions { FullScreen = true, CloseButton = true };
         var parameters = new DialogParameters<ProductActionDialogBox>();
         parameters.Add(x => x.Product, product);
         var dialogResult = await _dialogService.ShowAsync<ProductActionDialogBox>($"ویرایش محصول {product.PersianName}", parameters, maxWidth);

Netina.AdminPanel.PWA/Pages/ShippingPage.razor

@@ -7,7 +7,7 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudGrid Row="true" class="mb-5">
@@ -87,7 +87,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
-                                           SelectedChanged="@ViewModel.ChangePageAsync" class="my-4 mx-auto" />
+                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4" />
                         </MudStack>
 
                     </PagerContent>

Netina.AdminPanel.PWA/Pages/ShopManagementPage.razor

@@ -7,19 +7,19 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="h-full w-full p-8">
     <MudGrid>
         <MudItem xs="12">
             <MudPaper class="px-5 py-5">
                 <MudStack Row="true">
-                    <MudStack class="mb-5 mx-2">
+                    <MudStack class="mx-2 mb-5">
                         <MudText Typo="Typo.h4">فروشـــــگاه من</MudText>
                         <MudText Typo="Typo.caption">شما می توانید اطلاعات فروشگاه خود را ویرایش نمایید</MudText>
                     </MudStack>
                     <MudSpacer/>
                     <BaseButtonUi Size="Size.Large"
                                   OnClickCallback="ViewModel.SubmitShopSettingAsync"
-                                  class="mt-2 mb-8 w-64 rounded-md" 
+                                  class="mb-8 mt-2 w-64 rounded-md" 
                                   IsProcessing="@ViewModel.IsProcessing"
                                   Icon="@Icons.Material.Outlined.Check" 
                                   Content="ثبتـــ اطلاعات" Variant="Variant.Filled" Color="Color.Success" />
@@ -62,9 +62,9 @@
                             <ProgressIndicatorInPopoverTemplate>
                                 <MudList Clickable="false">
                                     <MudListItem>
-                                        <div class="flex flex-row w-full mx-auto">
+                                        <div class="mx-auto flex w-full flex-row">
-                                            <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
+                                            <MudProgressCircular class="my-auto -ml-4 mr-1" Size="Size.Small" Indeterminate="true" />
-                                            <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
+                                            <p class="text-md mx-auto my-1 font-bold">منتظر بمانید</p>
                                         </div>
                                     </MudListItem>
                                 </MudList>
@@ -84,9 +84,9 @@
                             <ProgressIndicatorInPopoverTemplate>
                                 <MudList Clickable="false">
                                     <MudListItem>
-                                        <div class="flex flex-row w-full mx-auto">
+                                        <div class="mx-auto flex w-full flex-row">
-                                            <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
+                                            <MudProgressCircular class="my-auto -ml-4 mr-1" Size="Size.Small" Indeterminate="true" />
-                                            <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
+                                            <p class="text-md mx-auto my-1 font-bold">منتظر بمانید</p>
                                         </div>
                                     </MudListItem>
                                 </MudList>
@@ -111,20 +111,20 @@
                                 <MudText Typo="Typo.body1">سایز لوگو شما باید 512 * 512 باشد و به شکل مربع ، تا جایگیری مناسبی داشته باشد</MudText>
                                 <BaseButtonUi Variant="Variant.Outlined" Content="اپلود و تغییر لوگو" OnClickCallback="async () => await ViewModel.SelectFileAsync()" />
                             </MudStack>
-                            <MudImage Src="@ViewModel.ShopSetting.LogoUrl" Width="150" Height="150" Elevation="25" Class="rounded-lg ma-4" />
+                            <MudImage Src="@ViewModel.ShopSetting.LogoUrl" Width="150" Height="150" Elevation="25" Class="ma-4 rounded-lg" />
                         </MudStack>
                     </MudItem>
                 </MudGrid>
             </MudPaper>
 
-            <MudPaper class="px-5 mt-8 py-5">
+            <MudPaper class="mt-8 px-5 py-5">
                 <MudStack Row="true">
-                    <MudStack class="mb-5 mx-2">
+                    <MudStack class="mx-2 mb-5">
                         <MudText Typo="Typo.h4">تنظیمات درگاه پرداخت</MudText>
                         <MudText Typo="Typo.caption">شما می توانید اطلاعات درگاه پرداخت خود را ویرایش نمایید</MudText>
                     </MudStack>
                     <MudSpacer />
-                    <BaseButtonUi Size="Size.Large" class="mt-2 mb-8 w-64 rounded-md"
+                    <BaseButtonUi Size="Size.Large" class="mb-8 mt-2 w-64 rounded-md"
                                   OnClickCallback="ViewModel.SubmitPaymentSettingAsync"
                                   IsProcessing="@ViewModel.IsProcessing"
                                   Icon="@Icons.Material.Outlined.Check" Content="ثبتـــ اطلاعات" 

Netina.AdminPanel.PWA/Pages/UserSettingsPage.razor

@@ -7,7 +7,7 @@
 @inject IUserUtility UserUtility
 @inject IRestWrapper RestWrapper
 
-<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
+<MudStack class="h-full w-full p-8">
     <MudGrid>
         
         <MudItem xs="12" md="6">
@@ -60,7 +60,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.UsersPageCount"
-                                           SelectedChanged="@ViewModel.ChangeUserPageAsync" class="my-4 mx-auto" />
+                                           SelectedChanged="@ViewModel.ChangeUserPageAsync" class="mx-auto my-4" />
                         </MudStack>
 
                     </PagerContent>
@@ -110,7 +110,7 @@
                         <MudStack Row="true" class="w-full">
 
                             <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.RolesPageCount"
-                                           SelectedChanged="@ViewModel.ChangeRolePageAsync" class="my-4 mx-auto"/>
+                                           SelectedChanged="@ViewModel.ChangeRolePageAsync" class="mx-auto my-4"/>
                         </MudStack>
 
                     </PagerContent>

Netina.AdminPanel.PWA/package-lock.json

@@ -35,7 +35,7 @@
         "flowbite": "^2.2.1",
         "postcss": "^8.4.33",
         "postcss-cli": "^11.0.0",
-        "tailwindcss": "^3.4.3"
+        "tailwindcss": "^3.4.4"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1812,9 +1812,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.3",
+      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
-      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",

Netina.AdminPanel.PWA/package.json

@@ -26,7 +26,7 @@
     "flowbite": "^2.2.1",
     "postcss": "^8.4.33",
     "postcss-cli": "^11.0.0",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.4"
   },
   "name": "netina.admin.pwa",
   "version": "1.0.0",

Netina.AdminPanel.PWA/tailwind.config.js

@@ -8,14 +8,6 @@ module.exports = {
         "./node_modules/flowbite/**/*.js"
     ],
     theme: {
-        screens: {
-            'xs': '380px',
-            'sm': '600px',
-            'md': '960px',
-            'lg': '1280px',
-            'xl': '1920px',
-            '2xl': '2560px',
-        },
         fontSize: {
             xs: '.75rem',
             sm: '.875rem',

Netina.AdminPanel.PWA/wwwroot/css/app.min.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -977,22 +977,22 @@ input:checked + .toggle-bg {
 .container {
   width: 100%;
 }
-@media (min-width: 380px) {
+@media (min-width: 640px) {
 
   .container {
-    max-width: 380px;
+    max-width: 640px;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 768px) {
 
   .container {
-    max-width: 600px;
+    max-width: 768px;
   }
 }
-@media (min-width: 960px) {
+@media (min-width: 1024px) {
 
   .container {
-    max-width: 960px;
+    max-width: 1024px;
   }
 }
 @media (min-width: 1280px) {
@@ -1001,16 +1001,10 @@ input:checked + .toggle-bg {
     max-width: 1280px;
   }
 }
-@media (min-width: 1920px) {
+@media (min-width: 1536px) {
 
   .container {
-    max-width: 1920px;
+    max-width: 1536px;
-  }
-}
-@media (min-width: 2560px) {
-
-  .container {
-    max-width: 2560px;
   }
 }
 .visible {
@@ -1138,6 +1132,9 @@ input:checked + .toggle-bg {
 .-mb-4 {
   margin-bottom: -1rem;
 }
+.-ml-1 {
+  margin-left: -0.25rem;
+}
 .-ml-4 {
   margin-left: -1rem;
 }
@@ -1219,12 +1216,6 @@ input:checked + .toggle-bg {
 .mt-8 {
   margin-top: 2rem;
 }
-.line-clamp-1 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
 .block {
   display: block;
 }
@@ -1362,6 +1353,9 @@ input:checked + .toggle-bg {
 .w-screen {
   width: 100vw;
 }
+.min-w-\[310px\] {
+  min-width: 310px;
+}
 .min-w-\[340px\] {
   min-width: 340px;
 }
@@ -1481,6 +1475,9 @@ input:checked + .toggle-bg {
 .overflow-x-auto {
   overflow-x: auto;
 }
+.overflow-y-auto {
+  overflow-y: auto;
+}
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -1548,6 +1545,10 @@ input:checked + .toggle-bg {
 .border-dashed {
   border-style: dashed;
 }
+.border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(118 169 250 / var(--tw-border-opacity));
+}
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(63 131 248 / var(--tw-border-opacity));
@@ -1580,10 +1581,6 @@ input:checked + .toggle-bg {
   --tw-border-opacity: 1;
   border-color: rgb(167 139 250 / var(--tw-border-opacity));
 }
-.border-yellow-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(227 160 8 / var(--tw-border-opacity));
-}
 .bg-\[\#000000\] {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1726,9 +1723,15 @@ input:checked + .toggle-bg {
 .pb-3 {
   padding-bottom: 0.75rem;
 }
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
 .pt-2 {
   padding-top: 0.5rem;
 }
+.pt-3 {
+  padding-top: 0.75rem;
+}
 .pt-4 {
   padding-top: 1rem;
 }
@@ -2240,7 +2243,7 @@ code {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-@media (min-width: 600px) {
+@media (min-width: 640px) {
 
   .sm\:mr-3 {
     margin-right: 0.75rem;
@@ -2254,13 +2257,17 @@ code {
     width: 16rem;
   }
 
+  .sm\:w-full {
+    width: 100%;
+  }
+
   .sm\:py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 768px) {
 
   .md\:visible {
     visibility: visible;
@@ -2309,7 +2316,7 @@ code {
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1024px) {
 
   .lg\:h-60 {
     height: 15rem;

Netina.AdminPanel.PWA/wwwroot/css/app.output.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -1031,21 +1031,21 @@ input:checked + .toggle-bg {
   width: 100%;
 }
 
-@media (min-width: 380px) {
+@media (min-width: 640px) {
   .container {
-    max-width: 380px;
+    max-width: 640px;
   }
 }
 
-@media (min-width: 600px) {
+@media (min-width: 768px) {
   .container {
-    max-width: 600px;
+    max-width: 768px;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 1024px) {
   .container {
-    max-width: 960px;
+    max-width: 1024px;
   }
 }
 
@@ -1055,15 +1055,9 @@ input:checked + .toggle-bg {
   }
 }
 
-@media (min-width: 1920px) {
+@media (min-width: 1536px) {
   .container {
-    max-width: 1920px;
+    max-width: 1536px;
-  }
-}
-
-@media (min-width: 2560px) {
-  .container {
-    max-width: 2560px;
   }
 }
 
@@ -1229,6 +1223,10 @@ input:checked + .toggle-bg {
   margin-bottom: -1rem;
 }
 
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
 .-ml-4 {
   margin-left: -1rem;
 }
@@ -1337,13 +1335,6 @@ input:checked + .toggle-bg {
   margin-top: 2rem;
 }
 
-.line-clamp-1 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
 .block {
   display: block;
 }
@@ -1461,14 +1452,6 @@ input:checked + .toggle-bg {
   min-height: 33rem;
 }
 
-.min-h-full {
-  min-height: 100%;
-}
-
-.\!min-h-full {
-  min-height: 100% !important;
-}
-
 .w-1\/2 {
   width: 50%;
 }
@@ -1534,6 +1517,10 @@ input:checked + .toggle-bg {
   width: 100vw;
 }
 
+.min-w-\[310px\] {
+  min-width: 310px;
+}
+
 .min-w-\[340px\] {
   min-width: 340px;
 }
@@ -1688,6 +1675,10 @@ input:checked + .toggle-bg {
   overflow-x: auto;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -1776,6 +1767,11 @@ input:checked + .toggle-bg {
   border-style: dashed;
 }
 
+.border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(118 169 250 / var(--tw-border-opacity));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(63 131 248 / var(--tw-border-opacity));
@@ -1816,11 +1812,6 @@ input:checked + .toggle-bg {
   border-color: rgb(167 139 250 / var(--tw-border-opacity));
 }
 
-.border-yellow-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(227 160 8 / var(--tw-border-opacity));
-}
-
 .bg-\[\#000000\] {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1998,10 +1989,22 @@ input:checked + .toggle-bg {
   padding-bottom: 2rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
 .pt-2 {
   padding-top: 0.5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
@@ -2010,10 +2013,6 @@ input:checked + .toggle-bg {
   padding-top: 2rem;
 }
 
-.pb-3 {
-  padding-bottom: 0.75rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -2592,7 +2591,7 @@ code {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-@media (min-width: 600px) {
+@media (min-width: 640px) {
   .sm\:mr-3 {
     margin-right: 0.75rem;
   }
@@ -2605,13 +2604,17 @@ code {
     width: 16rem;
   }
 
+  .sm\:w-full {
+    width: 100%;
+  }
+
   .sm\:py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 768px) {
   .md\:visible {
     visibility: visible;
   }
@@ -2659,7 +2662,7 @@ code {
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1024px) {
   .lg\:h-60 {
     height: 15rem;
   }