chore(passport): Default side image in login page needs to be adjuste…

…d for dark mode
proofzero · Jun 7, 2023 · 5cc3870 · 5cc3870
1 parent bb22d96
commit 5cc3870
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 48 deletions.
diff --git a/apps/passport/app/assets/auth-side-graphics.svg b/apps/passport/app/assets/auth-side-graphics.svg
diff --git a/apps/passport/app/routes/authenticate/$clientId.tsx b/apps/passport/app/routes/authenticate/$clientId.tsx
@@ -24,9 +24,8 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
       })
     } else {
       appProps = {
-        name: `Rollup - ${
-          params.clientId.charAt(0).toUpperCase() + params.clientId.slice(1)
-        }`,
+        name: `Rollup - ${params.clientId.charAt(0).toUpperCase() + params.clientId.slice(1)
+          }`,
         iconURL: LogoIndigo,
         termsURL: 'https://rollup.id/tos',
         privacyURL: 'https://rollup.id/privacy-policy',
@@ -73,26 +72,25 @@ export default () => {
         <style type="text/css">{`
             :root {
                 ${getRGBColor(
-                  dark
-                    ? appProps?.appTheme?.color?.dark ??
-                        AuthenticationScreenDefaults.color.dark
-                    : appProps?.appTheme?.color?.light ??
-                        AuthenticationScreenDefaults.color.light,
-                  'primary'
-                )}   
+          dark
+            ? appProps?.appTheme?.color?.dark ??
+            AuthenticationScreenDefaults.color.dark
+            : appProps?.appTheme?.color?.light ??
+            AuthenticationScreenDefaults.color.light,
+          'primary'
+        )}   
              {
          `}</style>
       </Helmet>
 
       <div className={'flex flex-row h-[100dvh] justify-center items-center'}>
         <div
           className={
-            'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 overflow-hidden'
+            'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
           }
           style={{
-            background: `url(${
-              appProps?.appTheme?.graphicURL ?? sideGraphics
-            })`,
+            backgroundImage: `url(${appProps?.appTheme?.graphicURL ?? sideGraphics
+              })`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
             backgroundRepeat: 'no-repeat',

diff --git a/apps/passport/app/routes/authorize.tsx b/apps/passport/app/routes/authorize.tsx
@@ -117,7 +117,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
       !(
         context.authzQueryParams.clientId === 'passport' &&
         context.authzQueryParams.redirectUri ===
-          `${new URL(request.url).origin}/settings`
+        `${new URL(request.url).origin}/settings`
       ) &&
       connectResult !== 'CANCEL'
     ) {
@@ -405,7 +405,7 @@ export default function Authorize() {
   >([])
 
   // Re-render the component every time persona gets updated
-  useEffect(() => {}, [persona])
+  useEffect(() => { }, [persona])
 
   const [dark, setDark] = useState<boolean>(false)
   useEffect(() => {
@@ -482,26 +482,25 @@ export default function Authorize() {
         <style type="text/css">{`
             :root {
                 ${getRGBColor(
-                  dark
-                    ? appProfile?.appTheme?.color?.dark ??
-                        AuthenticationScreenDefaults.color.dark
-                    : appProfile?.appTheme?.color?.light ??
-                        AuthenticationScreenDefaults.color.light,
-                  'primary'
-                )}   
+          dark
+            ? appProfile?.appTheme?.color?.dark ??
+            AuthenticationScreenDefaults.color.dark
+            : appProfile?.appTheme?.color?.light ??
+            AuthenticationScreenDefaults.color.light,
+          'primary'
+        )}   
              {
          `}</style>
       </Helmet>
 
       <div className={'flex flex-row h-[100dvh] justify-center items-center'}>
         <div
           className={
-            'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 overflow-hidden'
+            'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
           }
           style={{
-            background: `url(${
-              appProfile?.appTheme?.graphicURL ?? sideGraphics
-            })`,
+            backgroundImage: `url(${appProfile?.appTheme?.graphicURL ?? sideGraphics
+              })`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
             backgroundRepeat: 'no-repeat',

diff --git a/apps/passport/app/routes/create/wallet.tsx b/apps/passport/app/routes/create/wallet.tsx
@@ -71,11 +71,15 @@ export default () => {
     <div className={'flex flex-row h-screen justify-center items-center'}>
       <div
         className={
-          'basis-2/5 h-screen w-full hidden lg:flex justify-center items-center bg-indigo-50 overflow-hidden'
+          'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
         }
-      >
-        <img src={sideGraphics} alt="Background graphics" />
-      </div>
+        style={{
+          backgroundImage: `url(${sideGraphics})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+        }}
+      ></div>
       <div className={'basis-full basis-full lg:basis-3/5'}>
         <div
           className={