Implemented-ish dark mode

proofzero · May 30, 2023 · 1bfc9cf · 1bfc9cf
1 parent 5cf5d48
commit 1bfc9cf
Show file tree

Hide file tree

Showing 16 changed files with 80 additions and 64 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/root.tsx b/apps/passport/app/root.tsx
@@ -170,7 +170,7 @@ export default function App() {
 
         <Links />
       </head>
-      <body style={{ backgroundColor: '#F9FAFB' }}>
+      <body className={`bg-[#F9FAFB] dark:bg-gray-900`}>
         {!GATag ? null : (
           <>
             <script

diff --git a/apps/passport/app/routes/authenticate/$clientId.tsx b/apps/passport/app/routes/authenticate/$clientId.tsx
@@ -96,7 +96,11 @@ export default () => {
             backgroundRepeat: 'no-repeat',
           }}
         ></div>
-        <div className={'basis-full basis-full lg:basis-3/5'}>
+        <div
+          className={
+            'basis-full basis-full lg:basis-3/5 bg-[#F9FAFB] dark:bg-gray-900'
+          }
+        >
           <Outlet context={{ clientId, appProps, rollup_action, dark }} />
         </div>
       </div>

diff --git a/apps/passport/app/routes/authenticate/$clientId/email/index.tsx b/apps/passport/app/routes/authenticate/$clientId/email/index.tsx
@@ -36,10 +36,9 @@ export default () => {
         'flex shrink flex-col items-center\
          justify-center gap-4 mx-auto bg-white p-6 h-[100dvh]\
           lg:h-[580px] lg:max-h-[100dvh] w-full lg:w-[418px]\
-          lg:rounded-lg'
+          lg:rounded-lg dark:bg-gray-800 border border-[#D1D5DB] dark:border-gray-600'
       }
       style={{
-        border: '1px solid #D1D5DB',
         boxSizing: 'border-box',
       }}
     >
@@ -50,11 +49,15 @@ export default () => {
         >
           <HiOutlineArrowLeft
             className="absolute left-0 lg:left-0 lg:top-[0.15rem] w-6 h-6
-            text-gray-600 cursor-pointer"
+            text-gray-600 dark:text-white cursor-pointer"
             onClick={() => history.back()}
           />
 
-          <Text size="xl" weight="semibold" className="text-[#2D333A]">
+          <Text
+            size="xl"
+            weight="semibold"
+            className="text-[#2D333A] dark:text-white"
+          >
             Your Email Address
           </Text>
         </section>

diff --git a/apps/passport/app/routes/authenticate/$clientId/email/verify.tsx b/apps/passport/app/routes/authenticate/$clientId/email/verify.tsx
@@ -121,10 +121,9 @@ export default () => {
       className={
         'flex shrink flex-col items-center justify-center gap-4 mx-auto\
       bg-white p-6 h-[100dvh] lg:h-[580px] lg:max-h-[100dvh] w-full\
-       lg:w-[418px] lg:border-rounded-lg'
+       lg:w-[418px] lg:border-rounded-lg dark:bg-gray-800 border border-[#D1D5DB] dark:border-gray-600'
       }
       style={{
-        border: '1px solid #D1D5DB',
         boxSizing: 'border-box',
       }}
     >

diff --git a/apps/passport/app/routes/authenticate/$clientId/index.tsx b/apps/passport/app/routes/authenticate/$clientId/index.tsx
@@ -138,7 +138,7 @@ export default () => {
 
       <ThemeContext.Provider
         value={{
-          dark: false,
+          dark,
           theme: {
             color:
               appProps.appTheme?.color ?? AuthenticationScreenDefaults.color,

diff --git a/apps/passport/app/routes/authorize.tsx b/apps/passport/app/routes/authorize.tsx
@@ -520,7 +520,7 @@ export default function Authorize() {
         <div className={'basis-full basis-full lg:basis-3/5'}>
           <ThemeContext.Provider
             value={{
-              dark: false,
+              dark,
               theme: {
                 color:
                   appProfile.appTheme?.color ??

diff --git a/apps/passport/tailwind.config.js b/apps/passport/tailwind.config.js
@@ -10,6 +10,7 @@ function withOpacity(variableName) {
 }
 
 module.exports = {
+  darkMode: 'media',
   content: [
     './app/**/*.{ts,tsx,jsx,js,mdx}',
     './node_modules/flowbite/**/*.js',

diff --git a/packages/design-system/src/atoms/buttons/common.tsx b/packages/design-system/src/atoms/buttons/common.tsx
@@ -24,15 +24,16 @@ export const typeToColorsDict = {
   primary:
     'bg-[#1f2937] text-white shadow-sm hover:bg-[#374151] focus:bg-[#1f2937] focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#1F2937] focus:ring-skin-primary',
   'primary-alt':
-    'bg-indigo-500 text-white shadow-sm hover:bg-indigo-600 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#1F2937] focus:ring-skin-primary',
+    'bg-indigo-500 text-white shadow-sm hover:bg-indigo-600 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#1F2937] focus:ring-skin-primary dark:border-gray-700 border',
   secondary:
     'bg-[#f3f4f6] text-[#5d4aec] shadow-sm border border-solid border-[#dfdcff] hover:bg-[#e5e7eb] focus:bg-[#f3f4f6] focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#1F2937] focus:ring-skin-primary',
   'secondary-alt':
-    'bg-white text-[#1f2937] shadow-sm border border-solid border-[#d1d5db] hover:bg-gray-100 focus:bg-white focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#1F2937] focus:ring-skin-primary dark:bg-[#374151] dark:border-gray-600',
+    'bg-white text-[#1f2937] shadow-sm border border-solid border-[#d1d5db] hover:bg-gray-100 focus:bg-white dark:focus:bg-gray-600 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#1F2937] focus:ring-skin-primary dark:bg-[#374151] dark:border-gray-600',
   dangerous:
     'bg-red-500 text-white shadow-sm hover:bg-red-400 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#1F2937] focus:ring-skin-primary',
   'dangerous-alt':
     'bg-white text-red-500 border border-solid border-red-500 shadow-sm hover:bg-red-50 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#1F2937] focus:ring-skin-primary',
 }
 
-export const disabledColorClasses = 'bg-[#f3f4f6] text-[#d1d5db]'
+export const disabledColorClasses =
+  'bg-[#f3f4f6] text-[#d1d5db] dark:text-gray-600 dark:bg-gray-800 dark:border-gray-700 border'
diff --git a/packages/design-system/src/atoms/buttons/connect-button/ConnectButton.tsx b/packages/design-system/src/atoms/buttons/connect-button/ConnectButton.tsx
@@ -128,7 +128,7 @@ export function ConnectButton({
                     isConnected ? '' : 'rounded-r-md'
                   } ${
                     fullSize ? 'justify-start' : 'justify-center'
-                  } bg-white dark:bg-[#374151] dark:border-gray-600 hover:bg-gray-100 focus:bg-white focus:ring-inset focus:ring-2 focus:ring-skin-primary truncate`}
+                  } bg-white dark:bg-[#374151] dark:border-gray-600 dark:hover:bg-gray-600 focus:bg-white dark:focus:bg-gray-600 focus:ring-inset focus:ring-2 focus:ring-skin-primary truncate`}
                 >
                   {(isSigning || isLoading) && isConnected ? (
                     <Spinner size={16} />
@@ -163,8 +163,10 @@ export function ConnectButton({
                   <Popover>
                     {({ open }) => (
                       <>
-                        <Popover.Button className="h-full px-2 lg:px-3.5 flex justify-center items-center rounded-r-md bg-white dark:bg-[#374151] dark:border-gray-600 text-[#1f2937] shadow-sm border-l hover:bg-gray-100  focus:bg-white focus:ring-inset focus:ring-2 focus:ring-indigo-500">
-                          {!open && <HiChevronDown className="w-5 h-5" />}
+                        <Popover.Button className="h-full px-2 lg:px-3.5 flex justify-center items-center rounded-r-md bg-white dark:bg-[#374151] dark:border-gray-600 text-[#1f2937] shadow-sm border-l hover:bg-gray-100 dark:hover:bg-gray-600 focus:bg-white dark:focus:bg-gray-600 focus:ring-inset focus:ring-2 focus:ring-indigo-500">
+                          {!open && (
+                            <HiChevronDown className="w-5 h-5 dark:text-white" />
+                          )}
                           {open && (
                             <HiChevronUp className="w-5 h-5 text-indigo-500" />
                           )}

diff --git a/packages/design-system/src/atoms/buttons/connect-oauth-button/index.tsx b/packages/design-system/src/atoms/buttons/connect-oauth-button/index.tsx
@@ -46,7 +46,7 @@ const ConnectOAuthButton = ({
   return (
     <Button
       className={
-        'button w-full dark:bg-[#374151] dark:border-gray-600 hover:bg-gray-100'
+        'button w-full dark:bg-[#374151] dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600'
       }
       btnType={'secondary-alt'}
       isSubmit={submit}

diff --git a/packages/design-system/src/atoms/form/Input.tsx b/packages/design-system/src/atoms/form/Input.tsx
@@ -27,7 +27,11 @@ export const Input = ({
           htmlFor={id}
           className="w-full flex flex-row items-center justify-between"
         >
-          <Text size="sm" weight="medium" className="text-gray-700 mb-2">
+          <Text
+            size="sm"
+            weight="medium"
+            className="text-gray-700 dark:text-gray-400 mb-2"
+          >
             {label}
             {rest.required ? '*' : ''}
           </Text>
@@ -49,12 +53,12 @@ export const Input = ({
          shadow-sm text-sm font-normal py-2 px-3 ${className}
          ${error ? ' border-red-500' : 'border-gray-300'}
          ${
-          error ? 'focus:border-red-500' : 'focus:border-indigo-500'
-        } disabled:cursor-not-allowed ${
+           error ? 'focus:border-red-500' : 'focus:border-indigo-500'
+         } disabled:cursor-not-allowed ${
           error ? 'disabled:border-red-200' : 'disabled:border-gray-200'
-          } ${
-            error ? 'disabled:bg-red-50' : 'disabled:bg-gray-50'
-          } placeholder-gray-400 text-gray-900`}
+        } ${
+          error ? 'disabled:bg-red-50' : 'disabled:bg-gray-50'
+        } placeholder-gray-400 text-gray-900 dark:text-gray-50 dark:bg-gray-800`}
         id={id}
         name={computedName}
         {...rest}

diff --git a/packages/design-system/src/molecules/auth-button/AuthButton.tsx b/packages/design-system/src/molecules/auth-button/AuthButton.tsx
@@ -22,7 +22,7 @@ export const AuthButton = ({
   displayContinueWith = false,
 }: AuthButtonProps) => (
   <Button
-    className="button w-full hover:bg-gray-100 dark:bg-[#374151] dark:border-gray-600"
+    className="button w-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:bg-[#374151] dark:border-gray-600"
     btnType="secondary-alt"
     disabled={disabled}
     onClick={onClick}

diff --git a/packages/design-system/src/molecules/email-otp-validator/EmailOTPValidator.tsx b/packages/design-system/src/molecules/email-otp-validator/EmailOTPValidator.tsx
@@ -107,19 +107,27 @@ export default function EmailOTPValidator({
       >
         {goBack && (
           <HiOutlineArrowLeft
-            className="absolute left-0 lg:left-0 lg:top-[0.15rem] w-6 h-6 cursor-pointer"
+            className="absolute left-0 lg:left-0 lg:top-[0.15rem] w-6 h-6 cursor-pointer dark:text-white"
             onClick={goBack}
           />
         )}
-        <Text size="xl" weight="semibold" className="text-[#2D333A]">
+        <Text
+          size="xl"
+          weight="semibold"
+          className="text-[#2D333A] dark:text-white"
+        >
           Please check your email
         </Text>
       </section>
 
       <section className="flex-1">
         <div className="flex flex-col items-center mt-4 mb-8">
-          <Text className="text-gray-500">We've sent a code to</Text>
-          <Text className="text-gray-500 font-medium">{email}</Text>
+          <Text className="text-gray-500 dark:text-gray-400">
+            We've sent a code to
+          </Text>
+          <Text className="text-gray-500 dark:text-gray-400 font-medium">
+            {email}
+          </Text>
         </div>
 
         <div className="grid grid-cols-6 gap-2.5">
@@ -186,8 +194,8 @@ export default function EmailOTPValidator({
 
                 inputRefs[i].current?.select()
               }}
-              className={`flex text-base lg:text-2xl py-7 px-3.5 h-20 justify-center items-center text-gray-600 border rounded-lg text-center ${
-                isInvalid ? 'border-red-500' : ''
+              className={`flex text-base lg:text-2xl py-7 px-3.5 h-20 justify-center items-center text-gray-600 dark:text-white dark:bg-gray-800 border rounded-lg text-center ${
+                isInvalid ? 'border-red-500' : 'dark:border-gray-600'
               }`}
             />
           ))}

diff --git a/packages/design-system/src/templates/authentication/Authentication.tsx b/packages/design-system/src/templates/authentication/Authentication.tsx
@@ -64,9 +64,8 @@ export default ({
           max-h-[100dvh] w-full lg:w-[418px] lg:rounded-${
             theme?.radius ?? AuthenticationScreenDefaults.radius
           }
-          mt-auto`}
+          mt-auto border border-[#D1D5DB] dark:border-gray-600`}
         style={{
-          border: '1px solid #D1D5DB',
           boxSizing: 'border-box',
         }}
       >
@@ -84,11 +83,11 @@ export default ({
           {displayKeys.length > 2 && (
             <>
               <div className="flex flex-row items-center">
-                <div className="border-t border-gray-200 flex-1"></div>
+                <div className="border-t border-gray-200 dark:border-gray-600 flex-1"></div>
                 <Text className="px-3 text-gray-500" weight="medium">
                   or
                 </Text>
-                <div className="border-t border-gray-200 flex-1"></div>
+                <div className="border-t border-gray-200 dark:border-gray-600 flex-1"></div>
               </div>
 
               {displayKeyDisplayFn(displayKeys.slice(2), mapperArgs)}