Fix Verify Account page (#4100)

* Initial commit

* Fix typo

* Remove return home button

* esf

app/javascript/App.jsx

@@ -30,7 +30,7 @@ export default function App() {
   return (
     <>
       {currentUser?.signed_in && <Header /> }
-      <BackgroundBuffer />
+      {currentUser?.verified && <BackgroundBuffer /> }
       <Container className={pageHeight}>
         <Outlet />
       </Container>

app/javascript/components/users/account_activation/VerifyAccount.jsx

 import React from 'react';
 import {
-  Button, Card, Col, Row,
+  Button, Card,
 } from 'react-bootstrap';
-import { InformationCircleIcon } from '@heroicons/react/24/outline';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../../contexts/auth/AuthProvider';
 import useCreateActivationLink from '../../../hooks/mutations/account_activation/useCreateActivationLink';
 import Spinner from '../../shared_components/utilities/Spinner';
+import Logo from '../../shared_components/Logo';
 
 export default function VerifyAccount() {
   const currentUser = useAuth();
@@ -14,23 +14,24 @@ export default function VerifyAccount() {
   const { t } = useTranslation();
 
   return (
-    <Row className="vertical-center text-center">
-      <Row className="mb-2">
-        <h1>{ t('account_activation_page.title') }</h1>
-      </Row>
-      <Row>
-        <Col md={8} className="mx-auto">
-          <Card className="p-5 border-0 shadow-sm">
-            <Card.Title className="text-center pb-2"> <InformationCircleIcon className="hi-xl" /> </Card.Title>
-            <pre className="text-muted">
-              { t('account_activation_page.message') }
-            </pre>
-            <Button variant="brand" onClick={createActivationLinkAPI.mutate} disabled={createActivationLinkAPI.isLoading}>
+    <div className="vertical-buffer">
+      <div className="text-center pb-4">
+        <Logo size="medium" />
+      </div>
+      <Card className="col-md-4 mx-auto p-4 border-0 shadow-sm text-center">
+        <Card.Title className="pb-2 fs-1 text-danger">{ t('account_activation_page.title') }</Card.Title>
+        <strong className="mb-3">{ t('account_activation_page.account_unverified') }</strong>
+        <span className="mb-3">{ t('account_activation_page.message') }</span>
+        <span className="mb-4">{ t('account_activation_page.resend_activation_link') }</span>
+        <Button
+          variant="brand"
+          className="btn btn-lg"
+          onClick={createActivationLinkAPI.mutate}
+          disabled={createActivationLinkAPI.isLoading}
+        >
           { t('account_activation_page.resend_btn_lbl') } {createActivationLinkAPI.isLoading && <Spinner />}
         </Button>
       </Card>
-        </Col>
-      </Row>
-    </Row>
+    </div>
   );
 }

public/locales/en.json

@@ -367,7 +367,9 @@
   },
   "account_activation_page": {
     "title": "Account Activation",
-    "message": "Your account has not been verified yet.\nIn order to use Greenlight full features you are kindly invited to verify your account.\nIf you haven't received an activation link or if you are having a problem using it,\nplease click the resend button below to get a new link.",
+    "account_unverified": "Your account has not been verified yet.",
+    "message": "In order to use Greenlight, please verify your account by following the instructions in the activation email that was sent to you.",
+    "resend_activation_link": "If you haven't received an activation email or if you are having a problem using it, click the resend button below to request a new activation email.",
     "resend_btn_lbl": "Resend Verification"
   }
 }