dashboard-v2: move static elements of auth pages to AuthLayout

packages/dashboard-v2/src/components/forms/LoginForm.js

@@ -82,7 +82,7 @@ export const LoginForm = ({ onSuccess }) => {
           </div>
 
           <p className="text-sm text-center mt-8">
-            Don't have an account? <HighlightedLink to="/auth/signup">Sign up</HighlightedLink>
+            Don't have an account? <HighlightedLink to="/auth/registration">Sign up</HighlightedLink>
           </p>
         </Form>
       )}

packages/dashboard-v2/src/layouts/AuthLayout.js

@@ -33,7 +33,14 @@ const AuthLayout =
                 </h1>
               </div>
             </SloganContainer>
-            <Content>{children}</Content>
+            <Content>
+              <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
+                <div className="mb-4 md:mb-16">
+                  <img src="/images/logo-black-text.svg" alt="Skynet" className="-ml-2" />
+                </div>
+                {children}
+              </div>
+            </Content>
           </Layout>
         </UserProvider>
       </>

packages/dashboard-v2/src/pages/auth/login.js

@@ -22,16 +22,11 @@ const LoginPage = ({ location }) => {
       <Metadata>
         <title>Sign In</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
       <LoginForm
         onSuccess={async () => {
           await refreshUserState();
         }}
       />
-      </div>
     </>
   );
 };

packages/dashboard-v2/src/pages/auth/registration.js

@@ -61,11 +61,7 @@ const SignUpPage = () => {
       <Metadata>
         <title>Sign Up</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
-
+      <div className="flex flex-col">
         {!settings.areAccountsEnabled && <Alert $variant="info">Accounts are not enabled on this portal.</Alert>}
 
         {settings.areAccountsEnabled && (

packages/dashboard-v2/src/pages/auth/reset-password.js

@@ -20,10 +20,6 @@ const ResetPasswordPage = () => {
       <Metadata>
         <title>Reset Password</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
       {state !== State.Success && (
         <RecoveryForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
       )}
@@ -41,10 +37,9 @@ const ResetPasswordPage = () => {
           Suddenly remembered your password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
         </p>
         <p>
-            Don't actually have an account? <HighlightedLink to="/auth/signup">Create one!</HighlightedLink>
+          Don't actually have an account? <HighlightedLink to="/auth/registration">Create one!</HighlightedLink>
         </p>
       </div>
-      </div>
     </>
   );
 };

packages/dashboard-v2/src/pages/user/confirm.js

@@ -57,10 +57,6 @@ const EmailConfirmationPage = ({ location }) => {
       <Metadata>
         <title>Confirm E-mail Address</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
       <div className="text-center">
         {state === State.Pure && <p>Please wait while we verify your account...</p>}
 
@@ -74,7 +70,6 @@ const EmailConfirmationPage = ({ location }) => {
 
         {state === State.Failure && <p className="text-error">Something went wrong, please try again later.</p>}
       </div>
-      </div>
     </>
   );
 };

packages/dashboard-v2/src/pages/user/recover.js

@@ -24,10 +24,6 @@ const RecoverPage = ({ location }) => {
       <Metadata>
         <title>Recover Your Account</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
       {state !== State.Success && (
         <ResetPasswordForm
           token={token}
@@ -52,7 +48,6 @@ const RecoverPage = ({ location }) => {
       <p className="text-sm text-center mt-8">
         Suddenly remembered your old password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
       </p>
-      </div>
     </>
   );
 };