feat(templates): implement new design of 403 page of Boilerplate #8881 (

#8921)

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor.scss

@@ -5,7 +5,6 @@
 main {
     width: 100%;
     min-height: 100%;
-    height: fit-content;
 }
 
 .panel {

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor

@@ -3,18 +3,17 @@
 @inherits AppPageBase
 
 <AuthorizeView>
-    <div class="main">
-        <div><img src="_content/Boilerplate.Client.Core/images/icons/error-triangle.svg" /></div>
-        <h2 class="title">
-            @Localizer[nameof(AppStrings.ForbiddenException)]
-        </h2>
-        <h4 class="description">
-            @Localizer[nameof(AppStrings.YouAreSignInAs)] @user.GetDisplayName()
-        </h4>
-        <div class="buttons">
-            <BitButton OnClick="WrapHandled(SignIn)">
-                @Localizer[nameof(AppStrings.SignInAsDifferentUser)]
-            </BitButton>
-        </div>
-    </div>
+    <section>
+        <BitStack HorizontalAlign="BitAlignment.Center">
+            <BitImage Src="_content/Boilerplate.Client.Core/images/403.svg" Width="100%" Style="max-width:600px" />
+
+            <BitText Typography="BitTypography.H5" Color="BitColor.SevereWarning" Align="BitTextAlign.Center">
+                @Localizer[nameof(AppStrings.ForbiddenException)]
+            </BitText>
+
+            <BitText>@Localizer[nameof(AppStrings.YouAreSignInAs)] <b>@user.GetDisplayName()</b></BitText>
+
+            <BitButton OnClick="WrapHandled(SignIn)">@Localizer[nameof(AppStrings.SignInAsDifferentUser)]</BitButton>
+        </BitStack>
+    </section>
 </AuthorizeView>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor.scss

@@ -1,28 +1,8 @@
-@import '../../Styles/abstracts/_functions.scss';
-@import '../../Styles/abstracts/_bit-css-variables.scss';
-
-.main {
+section {
     width: 100%;
-    display: flex;
-    padding: rem2(8px);
-    text-align: center;
-    max-width: rem2(800px);
-    flex-direction: column;
-    max-height: rem2(600px);
-    border-radius: rem2(4px);
-    background-color: $bit-color-background-primary;
-}
-
-.title {
-    color: $bit-color-error;
-}
-
-.description {
-    overflow: auto;
-    white-space: pre;
-    margin: rem2(24px);
+    height: 100%;
+    padding: 1rem;
 }
 
-.buttons {
-    margin-bottom: rem2(24px);
+::deep {
 }