Fix unauth page layout

This commit is contained in:
Justin 2022-05-09 08:27:26 -04:00
parent 3b920e25c3
commit 25477443ef
3 changed files with 36 additions and 35 deletions

View file

@ -12,7 +12,7 @@
<%= snippets %> <%= snippets %>
</head> </head>
<body class="theme-mode-light no-reduce-motion"> <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-wrapper">
<div class="loading-indicator"> <div class="loading-indicator">
<div class="loading-indicator__container"> <div class="loading-indicator__container">

View file

@ -132,7 +132,7 @@ const SoapboxMount = () => {
const waitlisted = account && !account.source.get('approved', true); 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'), 'no-reduce-motion': !settings.get('reduceMotion'),
'underline-links': settings.get('underlineLinks'), 'underline-links': settings.get('underlineLinks'),
'dyslexic': settings.get('dyslexicFont'), 'dyslexic': settings.get('dyslexicFont'),
@ -162,7 +162,7 @@ const SoapboxMount = () => {
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages}>
<Helmet> <Helmet>
<html lang={locale} className={classNames({ dark: darkMode })} /> <html lang={locale} className={classNames('h-full', { dark: darkMode })} />
<body className={bodyClass} /> <body className={bodyClass} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>} {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
<meta name='theme-color' content={soapboxConfig.brandColor} /> <meta name='theme-color' content={soapboxConfig.brandColor} />

View file

@ -20,44 +20,45 @@ const AuthLayout = () => {
const siteTitle = useAppSelector(state => state.instance.title); const siteTitle = useAppSelector(state => state.instance.title);
return ( return (
<div> <div className='h-full'>
<LandingGradient /> <LandingGradient />
<main className='relative flex flex-col h-screen'> <main className='relative min-h-full sm:flex sm:items-center sm:justify-center py-12'>
<header className='py-10 flex justify-center relative'> <div className='w-full sm:max-w-lg md:max-w-2xl space-y-8'>
<Link to='/' className='cursor-pointer'> <header className='flex justify-center relative'>
{logo ? ( <Link to='/' className='cursor-pointer'>
<img src={logo} alt={siteTitle} className='h-7' /> {logo ? (
) : ( <img src={logo} alt={siteTitle} className='h-7' />
<SvgIcon ) : (
className='w-7 h-7 dark:text-white' <SvgIcon
alt={siteTitle} className='w-7 h-7 dark:text-white'
src={require('@tabler/icons/icons/home.svg')} alt={siteTitle}
/> src={require('@tabler/icons/icons/home.svg')}
)} />
</Link> )}
</header> </Link>
</header>
<div className='flex flex-col justify-center items-center'> <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'> <div className='sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
<Card variant='rounded' size='xl'> <Card variant='rounded' size='xl'>
<CardBody> <CardBody>
<Switch> <Switch>
<Route exact path='/verify' component={Verification} /> <Route exact path='/verify' component={Verification} />
<Route exact path='/verify/email/:token' component={EmailPassthru} /> <Route exact path='/verify/email/:token' component={EmailPassthru} />
<Route exact path='/login' component={LoginPage} /> <Route exact path='/login' component={LoginPage} />
<Route exact path='/signup' component={RegistrationForm} /> <Route exact path='/signup' component={RegistrationForm} />
<Route exact path='/reset-password' component={PasswordReset} /> <Route exact path='/reset-password' component={PasswordReset} />
<Route exact path='/edit-password' component={PasswordResetConfirm} /> <Route exact path='/edit-password' component={PasswordResetConfirm} />
<Redirect from='/auth/password/new' to='/reset-password' /> <Redirect from='/auth/password/new' to='/reset-password' />
<Redirect from='/auth/password/edit' to='/edit-password' /> <Redirect from='/auth/password/edit' to='/edit-password' />
</Switch> </Switch>
</CardBody> </CardBody>
</Card> </Card>
</div>
</div> </div>
</div> </div>
</main> </main>
<BundleContainer fetchComponent={NotificationsContainer}> <BundleContainer fetchComponent={NotificationsContainer}>