From d235d04accfe2eb34ebf3236358b847181be6282 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sun, 10 Mar 2024 18:24:15 +0330
Subject: [PATCH] feat(websites): improve contact us page of Platform website
 #7107 (#7108)

---
 .../Pages/ContactUsPage.razor                 | 23 ++++++++++++++-----
 .../Pages/ContactUsPage.razor.scss            |  6 ++---
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor
index 7e3bcd63da..b67b7ff05b 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor
@@ -11,22 +11,24 @@
             <BitTypography Variant="BitTypographyVariant.H1" Gutter Class="page-title">Contact us</BitTypography>
             <br />
             <BitTypography Variant="BitTypographyVariant.H5" Gutter>
-                Let's talk about your project.<br />Send us a message and we will get back to you within one business day.
+                Email: <a href="mailto:info@bitplatform.dev" target="_blank" rel="noopener noreferrer">info@bitplatform.dev</a>
             </BitTypography>
             <br />
             <BitTypography Variant="BitTypographyVariant.H5" Gutter>
-                Email: <a href="mailto:info@bitplatform.dev" target="_blank" rel="noopener noreferrer">info@bitplatform.dev</a>
+                Let's talk about your project.
+                <br />
+                Send us an email and we will get back to you.
             </BitTypography>
 
+            <br /><br />
+
             <div class="contact-container">
                 <EditForm Model="contactUsModel" OnValidSubmit="WrapHandled(SendMessage)" class="form" novalidate>
                     <DataAnnotationsValidator />
 
                     <BitTypography Variant="BitTypographyVariant.H5" Gutter>
                         Have any feedbacks?
-                        <BitIconButton IconName="@BitIconName.Reset" Title="Reset form"
-                                       ButtonType="BitButtonType.Button"
-                                       OnClick="() => contactUsModel = new()">Reset</BitIconButton>
+
                     </BitTypography>
 
                     <BitTextField @bind-Value="@contactUsModel.Email"
@@ -43,7 +45,16 @@
                                   Placeholder="Enter your message" />
                     <ValidationMessage For="() => contactUsModel.Message" />
 
-                    <BitButton IsLoading="isSending" ButtonType="BitButtonType.Submit">Send</BitButton>
+                    <div style="display:flex;justify-content:center">
+                        <div style="flex-grow:1">
+                            <BitButton IsLoading="isSending"
+                                       ButtonType="BitButtonType.Submit">Send</BitButton>
+                        </div>
+
+                        <BitIconButton IconName="@BitIconName.Reset" Title="Reset form"
+                                       ButtonType="BitButtonType.Button"
+                                       OnClick="() => contactUsModel = new()">Reset</BitIconButton>
+                    </div>
                 </EditForm>
             </div>
         </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor.scss b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor.scss
index ab470038e2..6ed638681c 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor.scss
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor.scss
@@ -42,18 +42,18 @@
 .contact-container {
     width: 100%;
     display: flex;
+    margin: 2rem 0;
     flex-flow: column;
     align-items: center;
     justify-content: center;
-    margin: 2rem 0;
 }
 
 ::deep .form {
-    gap: 2rem;
+    gap: 1.5rem;
     width: 100%;
+    padding: 2rem;
     display: flex;
     flex-flow: column;
-    padding: rem2(20px);
     max-width: rem2(600px);
     box-sizing: border-box;
     border-radius: rem2(4px);