fix: update layout and styling for improved user experience across various components

modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/MainLayout.razor

@@ -25,7 +25,7 @@
         <NavMenu />
     </MudDrawer>
 
-    <MudMainContent Class="pt-0">
+    <MudMainContent>
         <MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
             <PageAlert />
             <LayoutHook Name="@LayoutHooks.Body.First" Layout="@StandardLayouts.Application" />

modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/Components/FeatureSettingGroup/FeatureSettingManagementComponent.razor

@@ -3,16 +3,13 @@
 
 @if (Settings != null && Settings.HasManageHostFeaturesPermission)
 {
-    <MudForm>
+    <MudText Typo="Typo.body1" Class="mb-3">@L["ManageHostFeaturesText"]</MudText>
-        <MudText Typo="Typo.body1" Class="mb-3">@L["ManageHostFeaturesText"]</MudText>
+    <MudButton Color="Color.Primary"
-        <MudButton Size="Size.Small" 
+              Variant="Variant.Filled"
-                  Color="Color.Primary" 
+              StartIcon="@Icons.Material.Filled.Settings"
-                  Variant="Variant.Filled"
+              OnClick="@OnManageHostFeaturesClicked">
-                  StartIcon="@Icons.Material.Filled.Settings"
+        @L["ManageHostFeatures"]
-                  OnClick="@OnManageHostFeaturesClicked">
+    </MudButton>
-            @L["ManageHostFeatures"]
-        </MudButton>
-    </MudForm>
     
     <FeatureManagementModal @ref="FeatureManagementModal"/>
 }

modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor

@@ -54,24 +54,22 @@
             </MudGrid>
         </MudForm>
         <MudDivider Class="my-3" />
-        <MudGrid>
+        <div class="d-flex justify-end mt-3">
-            <MudItem xs="12">
+            @if (HasSendTestEmailPermission)
-                @if (HasSendTestEmailPermission)
+            {
-                {
-                    <MudButton Color="Color.Primary"
-                              Variant="Variant.Outlined"
-                              OnClick="@OpenSendTestEmailDialogAsync"
-                              Class="me-2">
-                        @L["SendTestEmail"]
-                    </MudButton>
-                }
                 <MudButton Color="Color.Primary"
-                          Variant="Variant.Filled"
+                          Variant="Variant.Outlined"
-                          OnClick="@UpdateSettingsAsync">
+                          OnClick="@OpenSendTestEmailDialogAsync"
-                    @L["Save"]
+                          Class="me-2">
+                    @L["SendTestEmail"]
                 </MudButton>
-            </MudItem>
+            }
-        </MudGrid>
+            <MudButton Color="Color.Primary"
+                      Variant="Variant.Filled"
+                      OnClick="@UpdateSettingsAsync">
+                @L["Save"]
+            </MudButton>
+        </div>
 
     @if (HasSendTestEmailPermission)
     {

modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/SettingManagement.razor

@@ -19,11 +19,12 @@
             <MudTabs @bind-ActivePanelIndex="@_activeTabIndex"
                     Variant="Variant.Pills"
                     Position="Position.Left"
-                    PanelClass="pa-4">
+                    PanelClass="pa-4 overflow-auto"
+                    Style="min-width: 0; overflow: hidden;">
                 @foreach (var group in SettingComponentCreationContext.Groups)
                 {
                     <MudTabPanel Text="@group.DisplayName">
-                        <div class="abp-md-form" style="width: 100%">
+                        <div style="width: 100%">
                             @{
                                 SettingItemRenders.Add(builder =>
                                 {

modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/TimeZoneSettingGroup/TimeZoneSettingGroupViewComponent.razor

@@ -21,14 +21,12 @@
                 <MudText Typo="Typo.caption" Class="mt-1">@L["TimezoneHelpText"]</MudText>
             </MudItem>
         </MudGrid>
-        <MudGrid>
+        <div class="d-flex justify-end mt-3">
-            <MudItem xs="12">
+            <MudButton Color="Color.Primary"
-                <MudButton Color="Color.Primary"
+                      Variant="Variant.Filled"
-                          Variant="Variant.Filled"
+                      OnClick="@UpdateSettingsAsync">
-                          OnClick="@UpdateSettingsAsync">
+                @L["Save"]
-                    @L["Save"]
+            </MudButton>
-                </MudButton>
+        </div>
-            </MudItem>
-        </MudGrid>
     </MudForm>
 }

templates/app-nolayers/aspnet-core/MyCompanyName.MyProjectName.Blazor.Server.Mongo/Components/App.razor

@@ -3,7 +3,6 @@
 @using Microsoft.Extensions.Hosting
 @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
 @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
-@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
 @inject IHostEnvironment Env
 @{
     var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@@ -19,7 +18,6 @@
     <base href="/" />
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
-    <AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
     <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" />
 
     <HeadOutlet @rendermode="InteractiveServer" />

templates/app-nolayers/aspnet-core/MyCompanyName.MyProjectName.Blazor.Server/Components/App.razor

@@ -3,7 +3,6 @@
 @using Microsoft.Extensions.Hosting
 @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
 @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
-@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
 @inject IHostEnvironment Env
 @{
     var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@@ -19,7 +18,6 @@
     <base href="/" />
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
-    <AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
     <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" />
 
     <HeadOutlet @rendermode="InteractiveServer" />

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Components/App.razor

@@ -3,7 +3,6 @@
 @using Microsoft.Extensions.Hosting
 @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
 @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
-@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
 @inject IHostEnvironment Env
 @{
     var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@@ -19,7 +18,6 @@
     <base href="/" />
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
-    <AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
     <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" />
 
     <HeadOutlet @rendermode="InteractiveServer" />

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/Components/App.razor

@@ -3,7 +3,6 @@
 @using Microsoft.Extensions.Hosting
 @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
 @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
-@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
 @inject IHostEnvironment Env
 @{
     var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@@ -19,7 +18,6 @@
     <base href="/" />
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
-    <AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
     <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" />
 
     <HeadOutlet @rendermode="InteractiveServer" />

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp.Tiered/Components/App.razor

@@ -6,7 +6,6 @@
 @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
 @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
 @using Volo.Abp.AspNetCore.Components.WebAssembly.WebApp
-@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
 @inject IHostEnvironment Env
 @{
     var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@@ -22,7 +21,6 @@
     <base href="/" />
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
-    <AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
     <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" WebAssemblyStyleFiles="GlobalStyles" />
 
     <HeadOutlet @rendermode="InteractiveAuto" />

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp/Components/App.razor

@@ -3,7 +3,6 @@
 @using Microsoft.Extensions.Hosting
 @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
 @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
-@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
 @inject IHostEnvironment Env
 @{
     var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@@ -19,7 +18,6 @@
     <base href="/" />
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
-    <AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
     <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" WebAssemblyStyleFiles="GlobalStyles" />
 
     <HeadOutlet @rendermode="InteractiveAuto" />

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/App.razor

@@ -21,14 +21,18 @@
     <HeadOutlet @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
 </head>
 
-<body class="abp-application-layout bg-light">
+<body>
 
     <script src="_framework/blazor.web.js"></script>
 
     <div id="ApplicationContainer">
-        <div class="spinner">
+        <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
-            <div class="double-bounce1"></div>
+            <svg width="48" height="48" viewBox="0 0 44 44" stroke="currentColor" style="color: #5c4fd1;">
-            <div class="double-bounce2"></div>
+                <g fill="none" fill-rule="evenodd" stroke-width="2">
+                    <circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /></circle>
+                    <circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /></circle>
+                </g>
+            </svg>
         </div>
 
         <Routes @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)"/>