Consistent UI on the confirm email page

packages/web/pages/auth/confirm-email/[token].tsx

@@ -1,21 +1,15 @@
 import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
-import { Toaster } from 'react-hot-toast'
 
-import { applyStoredTheme } from '../../../lib/themeUpdater'
-
-import { PrimaryLayout } from '../../../components/templates/PrimaryLayout'
-
-import { HStack, SpanBox } from '../../../components/elements/LayoutPrimitives'
+import { HStack } from '../../../components/elements/LayoutPrimitives'
 import { fetchEndpoint } from '../../../lib/appConfig'
 import { LoadingView } from '../../../components/patterns/LoadingView'
+import { PageMetaData } from '../../../components/patterns/PageMetaData'
+import { ProfileLayout } from '../../../components/templates/ProfileLayout'
 
 export default function ConfirmEmail(): JSX.Element {
   const authForm = useRef<HTMLFormElement | null>(null)
   const router = useRouter()
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
-
-  applyStoredTheme(false)
 
   useEffect(() => {
     if (!router || !router.isReady || !authForm.current) {
@@ -26,24 +20,21 @@ export default function ConfirmEmail(): JSX.Element {
   }, [router, authForm])
 
   return (
-    <PrimaryLayout pageTestId={'api-keys'}>
-      <Toaster
-        containerStyle={{
-          top: '5rem',
-        }}
-      />
-      <form
-       ref={authForm}
-       method="POST"
-       action={`${fetchEndpoint}/auth/confirm-email`}
-       >
-        <input type="hidden" name="token" value={router.query.token} />
-       </form>
-      <HStack css={{ bg: '$grayBg', padding: '24px', width: '100%', height: '100%'}}>
-        {errorMessage ? (
-          <SpanBox >{errorMessage}</SpanBox>
-        ) : <LoadingView />}
-      </HStack>
-    </PrimaryLayout>
+    <>
+      <PageMetaData title="Confirm Email - Omnivore" path="/confirm-email" />
+      <ProfileLayout>
+        <form
+          ref={authForm}
+          method="POST"
+          action={`${fetchEndpoint}/auth/confirm-email`}
+        >
+          <input type="hidden" name="token" value={router.query.token} />
+        </form>
+        <HStack css={{ bg: '$grayBg', padding: '24px', width: '100%', height: '100%'}}>
+          <LoadingView />
+        </HStack>
+      </ProfileLayout>
+      <div data-testid="confirm-email-page-tag" />
+    </>
   )
 }