update Boilerplate for new version of BlazorUI #8203

bitfoundation · Aug 3, 2024 · bed8e76 · bed8e76
1 parent 07a88ea
commit bed8e76
Show file tree

Hide file tree

Showing 49 changed files with 361 additions and 289 deletions.
diff --git a/...azorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/abstracts/_bit-css-variables.scss b/...azorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/abstracts/_bit-css-variables.scss
@@ -12,7 +12,7 @@ $bit-color-primary-light-active: var(--bit-clr-pri-light-active);
 $bit-color-primary-text: var(--bit-clr-pri-text);
 
 //secondary
-$bit-color-secondary-main: var(--bit-clr-sec);
+$bit-color-secondary: var(--bit-clr-sec);
 $bit-color-secondary-hover: var(--bit-clr-sec-hover);
 $bit-color-secondary-active: var(--bit-clr-sec-active);
 $bit-color-secondary-dark: var(--bit-clr-sec-dark);
@@ -24,7 +24,7 @@ $bit-color-secondary-light-active: var(--bit-clr-sec-light-active);
 $bit-color-secondary-text: var(--bit-clr-sec-text);
 
 //tertiary
-$bit-color-tertiary-main: var(--bit-clr-ter);
+$bit-color-tertiary: var(--bit-clr-ter);
 $bit-color-tertiary-hover: var(--bit-clr-ter-hover);
 $bit-color-tertiary-active: var(--bit-clr-ter-active);
 $bit-color-tertiary-dark: var(--bit-clr-ter-dark);

diff --git a/...t.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppErrorBoundary.razor b/...t.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppErrorBoundary.razor
@@ -8,7 +8,7 @@ else if (ErrorContent is null)
 {
     <div class="main">
         <div class="header">
-            <BitIconButton OnClick="Recover" IconName="@BitIconName.ChromeClose" />
+            <BitButton OnClick="Recover" IconName="@BitIconName.ChromeClose" Variant="BitVariant.Text" />
         </div>
         <div>
             <img src="_content/Boilerplate.Client.Core/images/icons/error-triangle.svg" />
@@ -19,8 +19,8 @@ else if (ErrorContent is null)
             <div class="exception">@CurrentException?.ToString()</div>
         }
         <div class="buttons">
-            <BitButton OnClick="Refresh" ButtonStyle="BitButtonStyle.Primary">Refresh</BitButton>
-            <BitButton OnClick="GoHome" ButtonStyle="BitButtonStyle.Standard">Home</BitButton>
+            <BitButton OnClick="Refresh">Refresh</BitButton>
+            <BitButton OnClick="GoHome" Variant="BitVariant.Outline">Home</BitButton>
         </div>
     </div>
 }

diff --git a/...lerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppErrorBoundary.razor.scss b/...lerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppErrorBoundary.razor.scss
@@ -18,7 +18,7 @@
 }
 
 .title {
-    color: $bit-color-state-error;
+    color: $bit-color-error;
 }
 
 .exception {

diff --git a/....Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor b/....Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor
@@ -4,20 +4,17 @@
     <div class="main-container">
         <div class="header">
             <span class="title">@title</span>
-            <BitIconButton IconName="@BitIconName.ChromeClose" OnClick="@(() => Confirm(false))" />
+            <BitButton IconName="@BitIconName.ChromeClose" OnClick="@(() => Confirm(false))" Variant="BitVariant.Text" />
         </div>
         <div class="body">
             @message
         </div>
         <div class="btn-group">
-            <BitButton ButtonStyle="BitButtonStyle.Primary"
-                       Style="margin-inline-end: 0.5rem"
-                       OnClick="@(() => Confirm(true))">
+            <BitButton Style="margin-inline-end: 0.5rem" OnClick="@(() => Confirm(true))">
                 @Localizer[nameof(AppStrings.Yes)]
             </BitButton>
 
-            <BitButton ButtonStyle="BitButtonStyle.Standard"
-                       OnClick="@(() => Confirm(false))">
+            <BitButton Variant="BitVariant.Outline" OnClick="@(() => Confirm(false))">
                 @Localizer[nameof(AppStrings.No)]
             </BitButton>
         </div>

diff --git a/...te/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor.scss b/...te/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor.scss
@@ -56,7 +56,7 @@
 }
 
 .text--red {
-    color: $bit-color-state-required;
+    color: $bit-color-requried;
 }
 
 ::deep {
@@ -78,7 +78,7 @@
     border-radius: 50%;
     min-width: rem2(35px);
     color: $bit-color-primary-text;
-    background-color: $bit-color-primary-main;
+    background-color: $bit-color-primary;
 
     .icon-container {
         height: 100%;

diff --git a/...erplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor b/...erplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor
@@ -4,16 +4,22 @@
     <div class="header-contact">
         @if (isUserAuthenticated)
         {
-            <BitIconButton Class="header-menu" IconName="@BitIconName.CollapseMenu" OnClick=ToggleMenu />
+            <BitButton Class="header-menu" IconName="@BitIconName.CollapseMenu" OnClick="ToggleMenu" Variant="BitVariant.Text" />
         }
         <a class="logo-lnk" href="@Urls.HomePage"></a>
     </div>
     <div class="header-contact">
-        @if (!isUserAuthenticated)
+        @if (isUserAuthenticated is false)
         {
-            <BitActionButton Class="header-item" IconName="@BitIconName.EntityExtraction" Href="@Urls.TermsPage" Target="_self">@Localizer[nameof(AppStrings.TermsTitle)]</BitActionButton>
-            <BitActionButton Class="header-item" IconName="@BitIconName.AddFriend" Href="@Urls.SignUpPage" Target="_self">@Localizer[nameof(AppStrings.SignUp)]</BitActionButton>
-            <BitActionButton Class="header-item" IconName="@BitIconName.Signin" Href="@Urls.SignInPage" Target="_self">@Localizer[nameof(AppStrings.SignIn)]</BitActionButton>
+            <BitActionButton Class="header-item" IconName="@BitIconName.EntityExtraction" Href="@Urls.TermsPage" Target="_self">
+                @Localizer[nameof(AppStrings.TermsTitle)]
+            </BitActionButton>
+            <BitActionButton Class="header-item" IconName="@BitIconName.AddFriend" Href="@Urls.SignUpPage" Target="_self">
+                @Localizer[nameof(AppStrings.SignUp)]
+            </BitActionButton>
+            <BitActionButton Class="header-item" IconName="@BitIconName.Signin" Href="@Urls.SignInPage" Target="_self">
+                @Localizer[nameof(AppStrings.SignIn)]
+            </BitActionButton>
         }
     </div>
 </header>
diff --git a/...it.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss b/...it.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss
@@ -118,7 +118,7 @@ main {
         text-align: start;
         font-size: rem2(12px);
         line-height: rem2(16px);
-        color: $bit-color-state-error;
+        color: $bit-color-error;
     }
 
     .form-submit-button {

diff --git a/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MessageBox.razor b/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MessageBox.razor
@@ -4,7 +4,7 @@
     <div class="main">
         <div class="header">
             <span class="title">@title</span>
-            <BitIconButton IconName="@BitIconName.ChromeClose" OnClick="OnCloseClick" />
+            <BitButton IconName="@BitIconName.ChromeClose" OnClick="OnCloseClick" Variant="BitVariant.Text" />
         </div>
         <div class="body">
             @body

diff --git a/...rplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor b/...rplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor
@@ -27,7 +27,6 @@
         </BitActionButton>
     </div>
     <BitNav Items="navItems"
-            AriaLabel="NavMenu"
             DefaultSelectedItem="navItems[0]"
             OnItemClick="(BitNavItem item) => HandleNavItemClick(item)">
     </BitNav>

diff --git a/...oilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor b/...oilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor
@@ -3,13 +3,17 @@
 <BitModal @bind-IsOpen="IsOpen" IsBlocking="true" AutoToggleScroll="false">
     <div class="modal-body">
         <div class="modal-close-btn-container">
-            <BitIconButton OnClick="CloseModal" IconName="@BitIconName.ChromeClose" Title="Close" />
+            <BitButton OnClick="CloseModal" IconName="@BitIconName.ChromeClose" Title="Close" Variant="BitVariant.Text" />
         </div>
         <div class="modal-title">@Localizer[nameof(AppStrings.SignOut)]</div>
         <div class="modal-desc">@Localizer[nameof(AppStrings.SignOutPrompt)]</div>
         <div>
-            <BitButton ButtonStyle="BitButtonStyle.Primary" OnClick="SignOut">@Localizer[nameof(AppStrings.SignOut)]</BitButton>
-            <BitButton ButtonStyle="BitButtonStyle.Standard" OnClick="CloseModal">@Localizer[nameof(AppStrings.Cancel)]</BitButton>
+            <BitButton OnClick="SignOut">
+                @Localizer[nameof(AppStrings.SignOut)]
+            </BitButton>
+            <BitButton OnClick="CloseModal" Variant="BitVariant.Outline">
+                @Localizer[nameof(AppStrings.Cancel)]
+            </BitButton>
         </div>
     </div>
 </BitModal>
diff --git a/...rc/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor b/...rc/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor
@@ -14,10 +14,11 @@
 
 <div class="page-container">
     <div class="page-header">
-        <BitIconButton Class="back-btn"
-                       Href="@Urls.CategoriesPage"
-                       IconName="@BitIconName.Back"
-                       Title="@Localizer[nameof(AppStrings.Back)]" />
+        <BitButton Class="back-btn"
+                   Variant="BitVariant.Text"
+                   Href="@Urls.CategoriesPage"
+                   IconName="@BitIconName.Back"
+                   Title="@Localizer[nameof(AppStrings.Back)]" />
         <h1 class="page-title">
             @if (category.Id == default)
             {
@@ -34,14 +35,14 @@
 
         @if (isLoading)
         {
-            <div class="loading-continaer">
-                <BitSpinner Size="BitSpinnerSize.Large"></BitSpinner>
+            <div class="loading-container">
+                <BitRippleLoading />
             </div>
         }
 
         @if (string.IsNullOrEmpty(saveMessage) is false)
         {
-            <BitMessage Severity="@saveMessageSeverity" OnDismiss="() => saveMessage = null">@saveMessage</BitMessage>
+            <BitMessage Color="@saveMessageColor" OnDismiss="() => saveMessage = null">@saveMessage</BitMessage>
         }
 
         <div class="form-input-container">
@@ -64,7 +65,7 @@
                     }
                 </div>
                 <div>
-                    <BitButton ButtonStyle="BitButtonStyle.Standard" ButtonType="BitButtonType.Button" OnClick=@ToggleColorPicker>
+                    <BitButton Variant="BitVariant.Outline" ButtonType="BitButtonType.Button" OnClick=@ToggleColorPicker>
                         <div class="custom-color-container">
                             <div class="color-square" style="background-color: @category.Color"></div>
                             @Localizer[(nameof(AppStrings.CustomColor))]
@@ -74,9 +75,7 @@
                 @if (isColorPickerOpen)
                 {
                     <div class="color-picker-container">
-                        <BitColorPicker @bind-Color="category.Color"
-                                        id="catColorInput"
-                                        ShowPreview="true">
+                        <BitColorPicker @bind-Color="category.Color" Id="catColorInput" ShowPreview="true">
                             @Localizer[nameof(AppStrings.DefaultColorPicker)]
                         </BitColorPicker>
                     </div>
@@ -85,10 +84,7 @@
             <ValidationMessage For="() => category.Color" />
         </div>
 
-        <BitButton IsLoading="isSaving"
-                   ButtonStyle="BitButtonStyle.Primary"
-                   ButtonType="BitButtonType.Submit"
-                   AriaLabel="Category">
+        <BitButton IsLoading="isSaving" ButtonType="BitButtonType.Submit">
             @Localizer[nameof(AppStrings.Save)]
         </BitButton>
 

diff --git a/...Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor.cs b/...Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor.cs
@@ -14,7 +14,7 @@ public partial class AddOrEditCategoryPage
     private bool isSaving;
     private string? saveMessage;
     private bool isColorPickerOpen;
-    private BitSeverity saveMessageSeverity;
+    private BitColor saveMessageColor;
     private CategoryDto category = new();
 
     protected override async Task OnInitAsync()
@@ -69,14 +69,14 @@ private async Task Save()
         }
         catch (ResourceValidationException e)
         {
-            saveMessageSeverity = BitSeverity.Error;
+            saveMessageColor = BitColor.Error;
 
             saveMessage = string.Join(Environment.NewLine, e.Payload.Details.SelectMany(d => d.Errors).Select(e => e.Message));
         }
         catch (KnownException e)
         {
             saveMessage = e.Message;
-            saveMessageSeverity = BitSeverity.Error;
+            saveMessageColor = BitColor.Error;
         }
         finally
         {

diff --git a/...ient/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor.scss b/...ient/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor.scss
@@ -107,5 +107,5 @@
 }
 
 ::deep .validation-message {
-    color: $bit-color-state-error;
+    color: $bit-color-error;
 }
diff --git a/...plate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor b/...plate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor
@@ -8,7 +8,7 @@
     @if (isLoading)
     {
         <div class="loading-container">
-            <BitSpinner Size="BitSpinnerSize.Large"></BitSpinner>
+            <BitRippleLoading />
         </div>
     }
 
@@ -33,10 +33,14 @@
                     <span class="color-box" style="background-color:@(category!.Color)"></span>
                 </BitDataGridTemplateColumn>
                 <BitDataGridTemplateColumn Title="@Localizer[nameof(AppStrings.Action)]" Align="BitDataGridAlign.Center" Context="category">
-                    <BitIconButton IconName="@BitIconName.Edit" Title="@Localizer[(nameof(AppStrings.Edit))]"
-                                   OnClick="() => EditCategory(category!)" />
-                    <BitIconButton IconName="@BitIconName.Delete" Title="@Localizer[(nameof(AppStrings.Delete))]"
-                                   OnClick="WrapHandled(() => DeleteCategory(category!))" />
+                    <BitButton IconName="@BitIconName.Edit"
+                               Variant="BitVariant.Text"
+                               Title="@Localizer[(nameof(AppStrings.Edit))]"
+                               OnClick="() => EditCategory(category!)" />
+                    <BitButton IconName="@BitIconName.Delete"
+                               Variant="BitVariant.Text"
+                               Title="@Localizer[(nameof(AppStrings.Delete))]"
+                               OnClick="WrapHandled(() => DeleteCategory(category!))" />
                 </BitDataGridTemplateColumn>
             </BitDataGrid>
         </div>

diff --git a/...te/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/OverallStatsWidget.razor b/...te/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/OverallStatsWidget.razor
@@ -5,7 +5,7 @@
         <div class="card-num @(isLoading ? "no-border" : null)">
             @if (isLoading)
             {
-                <BitSpinner Size="BitSpinnerSize.Large"></BitSpinner>
+                <BitRippleLoading />
             }
             else
             {
@@ -18,7 +18,7 @@
         <div class="card-num @(isLoading ? "no-border" : null)">
             @if (isLoading)
             {
-                <BitSpinner Size="BitSpinnerSize.Large"></BitSpinner>
+                <BitRippleLoading />
             }
             else
             {
@@ -31,7 +31,7 @@
         <div class="card-num @(isLoading ? "no-border" : null)">
             @if (isLoading)
             {
-                <BitSpinner Size="BitSpinnerSize.Large"></BitSpinner>
+                <BitRippleLoading />
             }
             else
             {
@@ -44,7 +44,7 @@
         <div class="card-num @(isLoading ? "no-border" : null)">
             @if (isLoading)
             {
-                <BitSpinner Size="BitSpinnerSize.Large"></BitSpinner>
+                <BitRippleLoading />
             }
             else
             {

diff --git a/...c/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/OverallStatsWidget.razor.scss b/...c/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/OverallStatsWidget.razor.scss
@@ -48,7 +48,7 @@
         font-size: rem2(32px);
         line-height: rem2(40px);
         margin-bottom: rem2(24px);
-        color: $bit-color-primary-main;
+        color: $bit-color-primary;
 
         @include md {
             font-size: rem2(28px);
@@ -83,15 +83,15 @@
 
     &:hover {
         background-size: rem2(128px) 100%;
-        background-color: $bit-color-primary-main;
+        background-color: $bit-color-primary;
         background-image: url('images/stat-card-bg-hover.svg');
 
         .card-num {
-            color: $bit-color-secondary-main;
+            color: $bit-color-secondary;
         }
 
         .card-title {
-            color: $bit-color-secondary-main;
+            color: $bit-color-secondary;
         }
     }
 

diff --git a/...t/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsCountPerCategoryWidget.razor b/...t/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsCountPerCategoryWidget.razor
@@ -2,13 +2,17 @@
 
 <div class="card">
     <div class="card-header">
-        <div class="title">@Localizer[nameof(AppStrings.ProductsCountPerCategoryChart)]</div>
-        <div class="subtitle">@Localizer[nameof(AppStrings.ProductsCountPerCategoryChartText)]</div>
+        <div class="title">
+            @Localizer[nameof(AppStrings.ProductsCountPerCategoryChart)]
+        </div>
+        <div class="subtitle">
+            @Localizer[nameof(AppStrings.ProductsCountPerCategoryChartText)]
+        </div>
     </div>
     <div class="card-body">
         @if (isLoading)
         {
-            <BitSpinner Size="BitSpinnerSize.Large"></BitSpinner>
+            <BitRippleLoading />
         }
         else
         {

diff --git a/.../Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsPercentageWidget.razor b/.../Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsPercentageWidget.razor
@@ -5,12 +5,14 @@
         <div class="title">
             @Localizer[nameof(AppStrings.ProductsPercentagePerCategory)]
         </div>
-        <div class="subtitle">@Localizer[nameof(AppStrings.ProductsPercentagePerCategoryText)]</div>
+        <div class="subtitle">
+            @Localizer[nameof(AppStrings.ProductsPercentagePerCategoryText)]
+        </div>
     </div>
     <div class="card-body">
         @if (isLoading)
         {
-            <BitSpinner Size="BitSpinnerSize.Large"></BitSpinner>
+            <BitRippleLoading />
         }
         else
         {