bug(passport): Connect account button colours regression (#2376)

proofzero · Jun 8, 2023 · b2a37f5 · b2a37f5
1 parent 4a0a3e7
commit b2a37f5
Show file tree

Hide file tree

Showing 24 changed files with 477 additions and 416 deletions.
diff --git a/apps/console/app/web3/lazyAuth.tsx b/apps/console/app/web3/lazyAuth.tsx
@@ -11,7 +11,7 @@ export function LazyAuth({
     children: JSX.Element,
 }) {
     const hydrated = useHydrated()
-    if (!hydrated) return <>Loading...</>
+    if (!hydrated) return null
 
     const config = createConfig(
         getDefaultConfig({

diff --git a/apps/passport/app/components/applications/claims.tsx b/apps/passport/app/components/applications/claims.tsx
@@ -68,7 +68,7 @@ export const ConfirmRevocationModal = ({
           <Button
             btnType="secondary-alt"
             onClick={() => setIsOpen(false)}
-            className="bg-gray-100"
+            className="bg-gray-100 hover:bg-gray-200"
           >
             Cancel
           </Button>

diff --git a/apps/passport/app/root.tsx b/apps/passport/app/root.tsx
@@ -6,7 +6,7 @@ import type {
 
 import { json, redirect } from '@remix-run/cloudflare'
 
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import {
   Links,
@@ -54,6 +54,7 @@ import * as gtag from '~/utils/gtags.client'
 import { NonceContext } from '@proofzero/design-system/src/atoms/contexts/nonce-context'
 import useTreeshakeHack from '@proofzero/design-system/src/hooks/useTreeshakeHack'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
+import { ThemeContext } from '@proofzero/design-system/src/contexts/theme'
 
 export const meta: MetaFunction = () => ({
   charset: 'utf-8',
@@ -157,6 +158,15 @@ export default function App() {
     )
   }, [browserEnv.flashes])
 
+  const [dark, setDark] = useState<boolean>(false)
+  const [ueComplete, setUEComplete] = useState(false)
+  useEffect(() => {
+    const darkMode = window.matchMedia('(prefers-color-scheme: dark)')
+    setDark(darkMode.matches)
+
+    setUEComplete(true)
+  }, [])
+
   return (
     <html lang="en">
       <head>
@@ -175,7 +185,7 @@ export default function App() {
 
         <Links />
       </head>
-      <body className={`bg-[#F9FAFB] dark:bg-gray-900`}>
+      <body>
         {!GATag ? null : (
           <>
             <script
@@ -202,7 +212,11 @@ export default function App() {
         )}
         {transition.state !== 'idle' && <Loader />}
         <Toaster position="top-right" />
-        <Outlet />
+        {ueComplete && <ThemeContext.Provider value={{
+          dark,
+          theme: undefined
+        }}> <Outlet />
+        </ThemeContext.Provider>}
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
         <script

diff --git a/apps/passport/app/routes/authenticate/$clientId.tsx b/apps/passport/app/routes/authenticate/$clientId.tsx
@@ -1,4 +1,4 @@
-import { Outlet, useLoaderData } from '@remix-run/react'
+import { Outlet, useLoaderData, useOutletContext } from '@remix-run/react'
 import { json } from '@remix-run/cloudflare'
 import { getStarbaseClient } from '~/platform.server'
 import { getAuthzCookieParams } from '~/session.server'
@@ -10,9 +10,10 @@ import type { LoaderFunction } from '@remix-run/cloudflare'
 import { GetAppPublicPropsResult } from '@proofzero/platform/starbase/src/jsonrpc/methods/getAppPublicProps'
 import { Helmet } from 'react-helmet'
 import { getRGBColor, getTextColor } from '@proofzero/design-system/src/helpers'
-import { useEffect, useState } from 'react'
+import { useContext } from 'react'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
 import { AuthenticationScreenDefaults } from '@proofzero/design-system/src/templates/authentication/Authentication'
+import { ThemeContext } from '@proofzero/design-system/src/contexts/theme'
 
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, context, params }) => {
@@ -24,9 +25,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',
@@ -61,59 +61,56 @@ export default () => {
     rollup_action?: string
   }>()
 
-  const [dark, setDark] = useState<boolean>(false)
-  useEffect(() => {
-    const darkMode = window.matchMedia('(prefers-color-scheme: dark)')
-    setDark(darkMode.matches)
-  }, [])
+  const { dark } = useContext(ThemeContext)
 
   return (
     <>
       <Helmet>
         <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'
+        )}
                 ${getRGBColor(
-                  getTextColor(
-                    dark
-                      ? appProps?.appTheme?.color?.dark ??
-                          AuthenticationScreenDefaults.color.dark
-                      : appProps?.appTheme?.color?.light ??
-                          AuthenticationScreenDefaults.color.light
-                  ),
-                  'primary-contrast-text'
-                )}
+          getTextColor(
+            dark
+              ? appProps?.appTheme?.color?.dark ??
+              AuthenticationScreenDefaults.color.dark
+              : appProps?.appTheme?.color?.light ??
+              AuthenticationScreenDefaults.color.light
+          ),
+          'primary-contrast-text'
+        )}
              {
          `}</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'
-          }
-          style={{
-            background: `url(${
-              appProps?.appTheme?.graphicURL ?? sideGraphics
-            })`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-          }}
-        ></div>
-        <div
-          className={
-            'basis-full basis-full lg:basis-3/5 bg-[#F9FAFB] dark:bg-gray-900'
-          }
-        >
-          <Outlet context={{ clientId, appProps, rollup_action, dark }} />
+      <div className={`${dark ? 'dark' : ''}`}>
+        <div className={`flex flex-row h-[100dvh] justify-center items-center bg-[#F9FAFB] dark:bg-gray-900`}>
+          <div
+            className={
+              'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
+            }
+            style={{
+              backgroundImage: `url(${appProps?.appTheme?.graphicURL ?? sideGraphics
+                })`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
+            }}
+          ></div>
+          <div
+            className={
+              'basis-full basis-full lg:basis-3/5'
+            }
+          >
+            <Outlet context={{ clientId, appProps, rollup_action, dark }} />
+          </div>
         </div>
       </div>
     </>

diff --git a/apps/passport/app/routes/authenticate/$clientId/email/index.tsx b/apps/passport/app/routes/authenticate/$clientId/email/index.tsx
@@ -86,7 +86,7 @@ export default () => {
         <div className="flex w-full">
           <Button
             btnSize="l"
-            btnType="secondary-alt"
+            btnType="secondary-alt-skin"
             className="w-full hover:bg-gray-100"
             onClick={() => navigate('/authenticate/cancel')}
           >

diff --git a/apps/passport/app/routes/authenticate/$clientId/email/verify.tsx b/apps/passport/app/routes/authenticate/$clientId/email/verify.tsx
@@ -94,7 +94,7 @@ export default () => {
   const [lastRegen, setLastRegen] = useState(Date.now())
 
   useEffect(() => {
-    ;(async () => {
+    ; (async () => {
       try {
         const resObj = await fetch('/connect/email/otp' + location.search)
         const res = await resObj.json<{
@@ -166,7 +166,7 @@ export default () => {
         <div className="flex flex-1 w-full items-end">
           <Button
             btnSize="l"
-            btnType="secondary-alt"
+            btnType="secondary-alt-skin"
             className="w-full hover:bg-gray-100"
             onClick={() => navigate('/authenticate/cancel')}
           >

diff --git a/apps/passport/app/routes/authenticate/$clientId/index.tsx b/apps/passport/app/routes/authenticate/$clientId/index.tsx
@@ -161,8 +161,8 @@ const InnerComponent = ({
                   {appProps?.appTheme?.heading
                     ? appProps.appTheme.heading
                     : appProps?.name
-                    ? `Login to ${appProps?.name}`
-                    : AuthenticationScreenDefaults.defaultHeading}
+                      ? `Login to ${appProps?.name}`
+                      : AuthenticationScreenDefaults.defaultHeading}
                 </h1>
                 <h2
                   style={{ color: '#6B7280' }}
@@ -181,7 +181,7 @@ const InnerComponent = ({
             <div className="flex flex-1 items-end">
               <Button
                 btnSize="l"
-                btnType="secondary-alt"
+                btnType="secondary-alt-skin"
                 className="w-full"
                 onClick={() => navigate('/authenticate/cancel')}
               >

diff --git a/apps/passport/app/routes/authorize.tsx b/apps/passport/app/routes/authorize.tsx
@@ -26,7 +26,7 @@ import {
   createAuthzParamCookieAndCreate,
   getDataForScopes,
 } from '~/utils/authorize.server'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { BadRequestError, InternalServerError } from '@proofzero/errors'
 import { AuthorizationControlSelection } from '@proofzero/types/application'
 import useConnectResult from '@proofzero/design-system/src/hooks/useConnectResult'
@@ -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,13 +405,7 @@ export default function Authorize() {
   >([])
 
   // Re-render the component every time persona gets updated
-  useEffect(() => {}, [persona])
-
-  const [dark, setDark] = useState<boolean>(false)
-  useEffect(() => {
-    const darkMode = window.matchMedia('(prefers-color-scheme: dark)')
-    setDark(darkMode.matches)
-  }, [])
+  useEffect(() => { }, [persona])
 
   const submit = useSubmit()
   const navigate = useNavigate()
@@ -476,61 +470,50 @@ export default function Authorize() {
     submit(form, { method: 'post' })
   }
 
+  const { dark } = useContext(ThemeContext)
+
   return (
     <>
       <Helmet>
         <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'
+        )}
                 ${getRGBColor(
-                  getTextColor(
-                    dark
-                      ? appProfile?.appTheme?.color?.dark ??
-                          AuthenticationScreenDefaults.color.dark
-                      : appProfile?.appTheme?.color?.light ??
-                          AuthenticationScreenDefaults.color.light
-                  ),
-                  'primary-contrast-text'
-                )}
+          getTextColor(
+            dark
+              ? appProfile?.appTheme?.color?.dark ??
+              AuthenticationScreenDefaults.color.dark
+              : appProfile?.appTheme?.color?.light ??
+              AuthenticationScreenDefaults.color.light
+          ),
+          'primary-contrast-text'
+        )}
              {
          `}</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'
-          }
-          style={{
-            background: `url(${
-              appProfile?.appTheme?.graphicURL ?? sideGraphics
-            })`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-          }}
-        ></div>
-        <div className={'basis-full basis-full lg:basis-3/5'}>
-          <ThemeContext.Provider
-            value={{
-              dark,
-              theme: {
-                color:
-                  appProfile.appTheme?.color ??
-                  AuthenticationScreenDefaults.color,
-                radius:
-                  appProfile.appTheme?.radius ??
-                  AuthenticationScreenDefaults.radius,
-              },
+      <div className={`${dark ? 'dark' : ''}`}>
+        <div className={'flex flex-row h-[100dvh] justify-center items-center bg-[#F9FAFB] dark:bg-gray-900'}>
+          <div
+            className={
+              'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
+            }
+            style={{
+              backgroundImage: `url(${appProfile?.appTheme?.graphicURL ?? sideGraphics
+                })`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
             }}
-          >
+          ></div>
+          <div className={'basis-full basis-full lg:basis-3/5'}>
             <Authorization
               userProfile={{
                 pfpURL: userProfile.pfp.image,
@@ -617,8 +600,9 @@ export default function Authorize() {
                 (requestedScope.includes('erc_4337') &&
                   !selectedSCWallets.length)
               }
+              radius={appProfile.appTheme?.radius}
             />
-          </ThemeContext.Provider>
+          </div>
         </div>
       </div>
     </>