fix(account-verify): fix issue with account verify text display

vichannnnn · Feb 1, 2024 · 0130cd8 · 0130cd8
1 parent 2606389
commit 0130cd8
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 15 deletions.
diff --git a/holy-grail-frontend/src/components/WelcomeBackHeader/WelcomeBackHeader.css b/holy-grail-frontend/src/components/WelcomeBackHeader/WelcomeBackHeader.css
@@ -7,3 +7,4 @@
     font-size: 1rem;
     margin-bottom: 24px;
 }
+
diff --git a/holy-grail-frontend/src/features/UserAccount/AccountVerify/AccountVerify.css b/holy-grail-frontend/src/features/UserAccount/AccountVerify/AccountVerify.css
@@ -0,0 +1,12 @@
+.account-verify-title {
+    font-size: 2.25rem;
+    font-weight: 600;
+}
+
+.account-verify-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 18px;
+}
diff --git a/holy-grail-frontend/src/features/UserAccount/AccountVerify/AccountVerifyPage.tsx b/holy-grail-frontend/src/features/UserAccount/AccountVerify/AccountVerifyPage.tsx
@@ -4,8 +4,7 @@ import { resendVerificationEmail, verifyAccount } from '@api/auth';
 import { AlertToast, AlertProps } from '@components';
 import { AuthContext } from '@providers';
 import { VerificationMessage } from './VerificationMessage';
-import '../UserAccountForm.css';
-import './verifyAccountPageContainer.css';
+import './AccountVerify.css';
 
 export const AccountVerifyPage = () => {
   const { user, updateUser } = useContext(AuthContext);
@@ -62,13 +61,15 @@ export const AccountVerifyPage = () => {
   };
 
   return (
-    <div>
-      <div className='login-title'>Account Verification</div>
-      <VerificationMessage
-        resetStatus={resetStatus}
-        isFailed={isFailed}
-        handleResendVerificationEmail={handleResendVerificationEmail}
-      />
+    <div className='account-verify-container'>
+      <div className='account-verify-title'>Account Verification</div>
+      <div>
+        <VerificationMessage
+          resetStatus={resetStatus}
+          isFailed={isFailed}
+          handleResendVerificationEmail={handleResendVerificationEmail}
+        />
+      </div>
       <AlertToast
         openAlert={openAlert}
         onClose={() => setOpenAlert(false)}

diff --git a/holy-grail-frontend/src/features/UserAccount/AccountVerify/verifyAccountPageContainer.css b/holy-grail-frontend/src/features/UserAccount/AccountVerify/verifyAccountPageContainer.css