From a5c77bd8c56a032cfb91727227883b6a6d93ca25 Mon Sep 17 00:00:00 2001
From: ysmoradi <ysmoradi@outlook.com>
Date: Sun, 17 Mar 2024 19:37:13 +0100
Subject: [PATCH] fix

---
 .../Components/Layout/NavMenu.razor.cs        |  2 +-
 .../Components/Pages/AboutPage.razor          | 42 ++++++---
 .../Components/Pages/AboutPage.razor.scss     | 88 ++++++++++++++++++-
 .../Components/Pages/AboutPage.razor          | 42 ++++++---
 .../Components/Pages/AboutPage.razor.scss     | 88 ++++++++++++++++++-
 5 files changed, 231 insertions(+), 31 deletions(-)

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.cs
index 0b95e25efe..e093ac617b 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.cs
@@ -90,7 +90,7 @@ protected override async Task OnInitAsync()
             navItems.Add(new()
             {
                 Text = Localizer[nameof(AppStrings.AboutTitle)],
-                IconName = BitIconName.Help,
+                IconName = BitIconName.HelpMirrored,
                 Url = "/about",
             });
         }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor
index a6080383ae..2ad76b6101 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor
@@ -1,17 +1,33 @@
 @page "/about"
 @inherits AppComponentBase
 
-For Razor pages that are exclusively dependent on native Maui features for Android, iOS, Windows, and macOS functionality,
-<br />
-consider using Client/Maui project instead of placing them in Client/Core project.
-<br />
-This approach allows direct access to native features without the need for dependency injection (DI) or publish-subscribe messaging patterns.
+<div class="page-container">
+    <section class="page-section about-section">
+        <h1 class="about-section-title">@Localizer[nameof(AppStrings.AboutTitle)]</h1>
 
-<BitStack class="container"
-          Horizontal
-          VerticalAlign="BitStackAlignment.Center"
-          HorizontalAlign="BitStackAlignment.SpaceAround">
-    <BitLabel>@appName</BitLabel>
-    <BitLabel>@appVersion</BitLabel>
-    <BitLabel>@processId</BitLabel>
-</BitStack>
\ No newline at end of file
+        <div class="about-section-desc">
+            For Razor pages that are exclusively dependent on native Maui features for Android, iOS, Windows, and macOS functionality,
+            <br />
+            consider using Client/Maui project instead of placing them in Client/Core project.
+            <br />
+            This approach allows direct access to native features without the need for dependency injection (DI) or publish-subscribe messaging patterns.
+        </div>
+
+        <BitStack class="values"
+                  VerticalAlign="BitStackAlignment.Center"
+                  HorizontalAlign="BitStackAlignment.SpaceAround">
+            <BitStack Horizontal Gap=".5rem">
+                <BitLabel>App Name:</BitLabel>
+                <BitLabel>@appName</BitLabel>
+            </BitStack>
+            <BitStack Horizontal Gap=".5rem">
+                <BitLabel>App Version:</BitLabel>
+                <BitLabel>@appVersion</BitLabel>
+            </BitStack>
+            <BitStack Horizontal Gap=".5rem">
+                <BitLabel>Process Id:</BitLabel>
+                <BitLabel>@processId</BitLabel>
+            </BitStack>
+        </BitStack>
+    </section>
+</div>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor.scss
index ab660d2276..155e764414 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor.scss
@@ -1,4 +1,88 @@
-.container {
+@import "../../../Boilerplate.Client.Core/Styles/abstracts/_media-queries.scss";
+
+.values {
     background: #71afe5;
-    height: 15rem
+    height: 15rem;
+    width: 100%;
+}
+
+.page-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 rem2(16px);
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+}
+
+.page-section {
+    width: 100%;
+}
+
+.about-section {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: rem2(144px) 0;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+
+    @include lt-xl {
+        padding: rem2(130px) 0;
+    }
+
+    @include sm {
+        padding: rem2(120px) 0;
+    }
+}
+
+.about-section-title {
+    font-weight: bold;
+    text-align: center;
+    font-size: rem2(42px);
+    line-height: rem2(62px);
+    margin-bottom: rem2(32px);
+
+    @include lg {
+        font-size: rem2(34px);
+        line-height: rem2(56px);
+        margin-bottom: rem2(24px);
+    }
+
+    @include md {
+        font-size: rem2(26px);
+        line-height: rem2(44px);
+        margin-bottom: rem2(24px);
+    }
+
+    @include sm {
+        font-size: rem2(24px);
+        line-height: rem2(40px);
+        margin-bottom: rem2(16px);
+    }
+}
+
+.about-section-desc {
+    font-size: rem2(16px);
+    max-width: rem2(1232px);
+    line-height: rem2(40px);
+    margin-bottom: rem2(40px);
+
+    @include lg {
+        max-width: rem2(821px);
+        line-height: rem2(32px);
+        margin-bottom: rem2(38px);
+    }
+
+    @include md {
+        max-width: rem2(572px);
+        line-height: rem2(28px);
+        margin-bottom: rem2(32px);
+    }
+
+    @include sm {
+        max-width: 100%;
+        line-height: rem2(24px);
+        margin-bottom: rem2(32px);
+    }
 }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor
index d8685a3b5a..2ad76b6101 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor
@@ -1,17 +1,33 @@
 @page "/about"
 @inherits AppComponentBase
 
-For Razor pages that are exclusively dependent on Windows sdk functionality,
-<br />
-consider using Client/Windows project instead of placing them in Client/Core project.
-<br />
-This approach allows direct access to native features without the need for dependency injection (DI) or publish-subscribe messaging patterns.
+<div class="page-container">
+    <section class="page-section about-section">
+        <h1 class="about-section-title">@Localizer[nameof(AppStrings.AboutTitle)]</h1>
 
-<BitStack class="container"
-          Horizontal
-          VerticalAlign="BitStackAlignment.Center"
-          HorizontalAlign="BitStackAlignment.SpaceAround">
-    <BitLabel>@appName</BitLabel>
-    <BitLabel>@appVersion</BitLabel>
-    <BitLabel>@processId</BitLabel>
-</BitStack>
\ No newline at end of file
+        <div class="about-section-desc">
+            For Razor pages that are exclusively dependent on native Maui features for Android, iOS, Windows, and macOS functionality,
+            <br />
+            consider using Client/Maui project instead of placing them in Client/Core project.
+            <br />
+            This approach allows direct access to native features without the need for dependency injection (DI) or publish-subscribe messaging patterns.
+        </div>
+
+        <BitStack class="values"
+                  VerticalAlign="BitStackAlignment.Center"
+                  HorizontalAlign="BitStackAlignment.SpaceAround">
+            <BitStack Horizontal Gap=".5rem">
+                <BitLabel>App Name:</BitLabel>
+                <BitLabel>@appName</BitLabel>
+            </BitStack>
+            <BitStack Horizontal Gap=".5rem">
+                <BitLabel>App Version:</BitLabel>
+                <BitLabel>@appVersion</BitLabel>
+            </BitStack>
+            <BitStack Horizontal Gap=".5rem">
+                <BitLabel>Process Id:</BitLabel>
+                <BitLabel>@processId</BitLabel>
+            </BitStack>
+        </BitStack>
+    </section>
+</div>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor.scss
index ab660d2276..155e764414 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor.scss
@@ -1,4 +1,88 @@
-.container {
+@import "../../../Boilerplate.Client.Core/Styles/abstracts/_media-queries.scss";
+
+.values {
     background: #71afe5;
-    height: 15rem
+    height: 15rem;
+    width: 100%;
+}
+
+.page-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 rem2(16px);
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+}
+
+.page-section {
+    width: 100%;
+}
+
+.about-section {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: rem2(144px) 0;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+
+    @include lt-xl {
+        padding: rem2(130px) 0;
+    }
+
+    @include sm {
+        padding: rem2(120px) 0;
+    }
+}
+
+.about-section-title {
+    font-weight: bold;
+    text-align: center;
+    font-size: rem2(42px);
+    line-height: rem2(62px);
+    margin-bottom: rem2(32px);
+
+    @include lg {
+        font-size: rem2(34px);
+        line-height: rem2(56px);
+        margin-bottom: rem2(24px);
+    }
+
+    @include md {
+        font-size: rem2(26px);
+        line-height: rem2(44px);
+        margin-bottom: rem2(24px);
+    }
+
+    @include sm {
+        font-size: rem2(24px);
+        line-height: rem2(40px);
+        margin-bottom: rem2(16px);
+    }
+}
+
+.about-section-desc {
+    font-size: rem2(16px);
+    max-width: rem2(1232px);
+    line-height: rem2(40px);
+    margin-bottom: rem2(40px);
+
+    @include lg {
+        max-width: rem2(821px);
+        line-height: rem2(32px);
+        margin-bottom: rem2(38px);
+    }
+
+    @include md {
+        max-width: rem2(572px);
+        line-height: rem2(28px);
+        margin-bottom: rem2(32px);
+    }
+
+    @include sm {
+        max-width: 100%;
+        line-height: rem2(24px);
+        margin-bottom: rem2(32px);
+    }
 }