fix(ui): center logo on password reset pages (#1807)

* fix(ui): fix alignment of logo on password reset pages

* fix: use flex to center instead of mx-auto

* fix: set forceOptimize for ImageFader
pull/1781/head
TheCatLady 4 years ago committed by GitHub
parent 1f524f0582
commit b8e82b5b4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -35,6 +35,7 @@ const ResetPassword: React.FC = () => {
<div className="relative flex flex-col min-h-screen bg-gray-900 py-14"> <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
<PageTitle title={intl.formatMessage(messages.passwordreset)} /> <PageTitle title={intl.formatMessage(messages.passwordreset)} />
<ImageFader <ImageFader
forceOptimize
backgroundImages={[ backgroundImages={[
'/images/rotate1.jpg', '/images/rotate1.jpg',
'/images/rotate2.jpg', '/images/rotate2.jpg',
@ -47,7 +48,7 @@ const ResetPassword: React.FC = () => {
<div className="absolute z-50 top-4 right-4"> <div className="absolute z-50 top-4 right-4">
<LanguagePicker /> <LanguagePicker />
</div> </div>
<div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-md"> <div className="relative z-40 flex flex-col items-center px-4 mt-10 sm:mx-auto sm:w-full sm:max-w-md">
<img src="/logo_stacked.svg" className="max-w-full mb-10" alt="Logo" /> <img src="/logo_stacked.svg" className="max-w-full mb-10" alt="Logo" />
<h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100"> <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
{intl.formatMessage(messages.resetpassword)} {intl.formatMessage(messages.resetpassword)}

@ -49,6 +49,7 @@ const ResetPassword: React.FC = () => {
return ( return (
<div className="relative flex flex-col min-h-screen bg-gray-900 py-14"> <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
<ImageFader <ImageFader
forceOptimize
backgroundImages={[ backgroundImages={[
'/images/rotate1.jpg', '/images/rotate1.jpg',
'/images/rotate2.jpg', '/images/rotate2.jpg',
@ -61,7 +62,7 @@ const ResetPassword: React.FC = () => {
<div className="absolute z-50 top-4 right-4"> <div className="absolute z-50 top-4 right-4">
<LanguagePicker /> <LanguagePicker />
</div> </div>
<div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-md"> <div className="relative z-40 flex flex-col items-center px-4 mt-10 sm:mx-auto sm:w-full sm:max-w-md">
<img src="/logo_stacked.svg" className="max-w-full mb-10" alt="Logo" /> <img src="/logo_stacked.svg" className="max-w-full mb-10" alt="Logo" />
<h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100"> <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
{intl.formatMessage(messages.resetpassword)} {intl.formatMessage(messages.resetpassword)}

Loading…
Cancel
Save