fix(ui): center logo on password reset pages (sct#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
nicospz · Aug 9, 2021 · 49b3dd9 · 49b3dd9
1 parent f029ec8
commit 49b3dd9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git 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
@@ -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)}