Fix unauth page layout

2 years ago · 25477443ef
parent 3b920e25c3
commit 25477443ef
3 changed files with 36 additions and 35 deletions
--- a/app/index.ejs
+++ b/app/index.ejs
@ -12,7 +12,7 @@
    <%= snippets %>
  </head>
  <body class="theme-mode-light no-reduce-motion">
-    <div id="soapbox">
+    <div id="soapbox" class="h-full">
      <div class="loading-indicator-wrapper">
        <div class="loading-indicator">
          <div class="loading-indicator__container">
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@ -132,7 +132,7 @@ const SoapboxMount = () => {

  const waitlisted = account && !account.source.get('approved', true);

-  const bodyClass = classNames('bg-white dark:bg-slate-900 text-base', {
+  const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
    'no-reduce-motion': !settings.get('reduceMotion'),
    'underline-links': settings.get('underlineLinks'),
    'dyslexic': settings.get('dyslexicFont'),
@ -162,7 +162,7 @@ const SoapboxMount = () => {
  return (
    <IntlProvider locale={locale} messages={messages}>
      <Helmet>
-        <html lang={locale} className={classNames({ dark: darkMode })} />
+        <html lang={locale} className={classNames('h-full', { dark: darkMode })} />
        <body className={bodyClass} />
        {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
        <meta name='theme-color' content={soapboxConfig.brandColor} />
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@ -20,44 +20,45 @@ const AuthLayout = () => {
  const siteTitle = useAppSelector(state => state.instance.title);

  return (
-    <div>
+    <div className='h-full'>
      <LandingGradient />

-      <main className='relative flex flex-col h-screen'>
-        <header className='py-10 flex justify-center relative'>
-          <Link to='/' className='cursor-pointer'>
-            {logo ? (
-              <img src={logo} alt={siteTitle} className='h-7' />
-            ) : (
-              <SvgIcon
-                className='w-7 h-7 dark:text-white'
-                alt={siteTitle}
-                src={require('@tabler/icons/icons/home.svg')}
-              />
-            )}
-          </Link>
-        </header>
+      <main className='relative min-h-full sm:flex sm:items-center sm:justify-center py-12'>
+        <div className='w-full sm:max-w-lg md:max-w-2xl space-y-8'>
+          <header className='flex justify-center relative'>
+            <Link to='/' className='cursor-pointer'>
+              {logo ? (
+                <img src={logo} alt={siteTitle} className='h-7' />
+              ) : (
+                <SvgIcon
+                  className='w-7 h-7 dark:text-white'
+                  alt={siteTitle}
+                  src={require('@tabler/icons/icons/home.svg')}
+                />
+              )}
+            </Link>
+          </header>

-        <div className='flex flex-col justify-center items-center'>
-          <div className='pb-10 sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
-            <Card variant='rounded' size='xl'>
-              <CardBody>
-                <Switch>
-                  <Route exact path='/verify' component={Verification} />
-                  <Route exact path='/verify/email/:token' component={EmailPassthru} />
-                  <Route exact path='/login' component={LoginPage} />
-                  <Route exact path='/signup' component={RegistrationForm} />
-                  <Route exact path='/reset-password' component={PasswordReset} />
-                  <Route exact path='/edit-password' component={PasswordResetConfirm} />
+          <div className='flex flex-col justify-center items-center'>
+            <div className='sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
+              <Card variant='rounded' size='xl'>
+                <CardBody>
+                  <Switch>
+                    <Route exact path='/verify' component={Verification} />
+                    <Route exact path='/verify/email/:token' component={EmailPassthru} />
+                    <Route exact path='/login' component={LoginPage} />
+                    <Route exact path='/signup' component={RegistrationForm} />
+                    <Route exact path='/reset-password' component={PasswordReset} />
+                    <Route exact path='/edit-password' component={PasswordResetConfirm} />

-                  <Redirect from='/auth/password/new' to='/reset-password' />
-                  <Redirect from='/auth/password/edit' to='/edit-password' />
-                </Switch>
-              </CardBody>
-            </Card>
+                    <Redirect from='/auth/password/new' to='/reset-password' />
+                    <Redirect from='/auth/password/edit' to='/edit-password' />
+                  </Switch>
+                </CardBody>
+              </Card>
+            </div>
          </div>
        </div>
-
      </main>

      <BundleContainer fetchComponent={NotificationsContainer}>