From b8e82b5b4d3cb49ec372e3dce3cd89dff440ffd0 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Thu, 17 Jun 2021 22:02:22 -0400
Subject: [PATCH] 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
---
 src/components/ResetPassword/RequestResetLink.tsx | 3 ++-
 src/components/ResetPassword/index.tsx            | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx
index 55217189e..218e3906d 100644
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -35,6 +35,7 @@ const ResetPassword: React.FC = () => {
     <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
       <PageTitle title={intl.formatMessage(messages.passwordreset)} />
       <ImageFader
+        forceOptimize
         backgroundImages={[
           '/images/rotate1.jpg',
           '/images/rotate2.jpg',
@@ -47,7 +48,7 @@ const ResetPassword: React.FC = () => {
       <div className="absolute z-50 top-4 right-4">
         <LanguagePicker />
       </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" />
         <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx
index 957a73153..1d4f74646 100644
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -49,6 +49,7 @@ const ResetPassword: React.FC = () => {
   return (
     <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
       <ImageFader
+        forceOptimize
         backgroundImages={[
           '/images/rotate1.jpg',
           '/images/rotate2.jpg',
@@ -61,7 +62,7 @@ const ResetPassword: React.FC = () => {
       <div className="absolute z-50 top-4 right-4">
         <LanguagePicker />
       </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" />
         <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
           {intl.formatMessage(messages.resetpassword)}