Fix unauth page layout
This commit is contained in:
parent
3b920e25c3
commit
25477443ef
3 changed files with 36 additions and 35 deletions
|
@ -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">
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
Loading…
Reference in a new issue