Added dark mode to popover

proofzero · Jun 1, 2023 · 49e77f2 · 49e77f2
1 parent 9bd434c
commit 49e77f2
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 36 deletions.
diff --git a/apps/passport/app/routes/authenticate/$clientId.tsx b/apps/passport/app/routes/authenticate/$clientId.tsx
@@ -12,6 +12,7 @@ import { Helmet } from 'react-helmet'
 import { getRGBColor } from '@proofzero/design-system/src/helpers'
 import { useEffect, useState } from 'react'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
+import { AuthenticationScreenDefaults } from '@proofzero/design-system/src/templates/authentication/Authentication'
 
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, context, params }) => {
@@ -68,20 +69,21 @@ export default () => {
 
   return (
     <>
-      {appProps.appTheme?.color && (
-        <Helmet>
-          <style type="text/css">{`
+      <Helmet>
+        <style type="text/css">{`
             :root {
                 ${getRGBColor(
                   dark
-                    ? appProps.appTheme.color.dark
-                    : appProps.appTheme.color.light,
+                    ? appProps?.appTheme?.color?.dark ??
+                        AuthenticationScreenDefaults.color.dark
+                    : appProps?.appTheme?.color?.light ??
+                        AuthenticationScreenDefaults.color.light,
                   'primary'
                 )}   
              {
          `}</style>
-        </Helmet>
-      )}
+      </Helmet>
+
       <div className={'flex flex-row h-[100dvh] justify-center items-center'}>
         <div
           className={

diff --git a/apps/passport/app/routes/authorize.tsx b/apps/passport/app/routes/authorize.tsx
@@ -494,20 +494,20 @@ export default function Authorize() {
 
   return (
     <>
-      {appProfile.appTheme?.color && (
-        <Helmet>
-          <style type="text/css">{`
+      <Helmet>
+        <style type="text/css">{`
             :root {
                 ${getRGBColor(
                   dark
-                    ? appProfile.appTheme.color.dark
-                    : appProfile.appTheme.color.light,
+                    ? appProfile?.appTheme?.color?.dark ??
+                        AuthenticationScreenDefaults.color.dark
+                    : appProfile?.appTheme?.color?.light ??
+                        AuthenticationScreenDefaults.color.light,
                   'primary'
                 )}   
              {
          `}</style>
-        </Helmet>
-      )}
+      </Helmet>
 
       <div className={'flex flex-row h-[100dvh] justify-center items-center'}>
         <div

diff --git a/packages/design-system/src/atoms/popover/Popover.tsx b/packages/design-system/src/atoms/popover/Popover.tsx
@@ -1,42 +1,51 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
 
-import classNames from "classnames"
+import classNames from 'classnames'
+import { useContext } from 'react'
+import { ThemeContext } from '../../contexts/theme'
 
 const Popover = PopoverPrimitive.Root
 
 const PopoverTrigger = PopoverPrimitive.Trigger
 
 const PopoverContent = React.forwardRef<
-    React.ElementRef<typeof PopoverPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
+  const { dark } = useContext(ThemeContext)
+
+  return (
     <PopoverPrimitive.Portal>
+      <div className={classNames(dark ? 'dark' : null)}>
         <PopoverPrimitive.Content
-            ref={ref}
-            align={align}
-            sideOffset={sideOffset}
-            className={classNames(
-                "z-50 rounded-md border bg-popover p-4 text-popover-foreground\
+          ref={ref}
+          align={align}
+          sideOffset={sideOffset}
+          className={classNames(
+            'z-50 rounded-md border bg-popover p-4 text-popover-foreground\
                     shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2\
                     data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\
-                    data-[side=top]:slide-in-from-bottom-2",
-                className
-            )}
-            {...props}
+                    data-[side=top]:slide-in-from-bottom-2',
+            className
+          )}
+          {...props}
         />
+      </div>
     </PopoverPrimitive.Portal>
-))
+  )
+})
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
 const PopoverExample = () => {
-    return <Popover>
-        <PopoverTrigger>Open</PopoverTrigger>
-        <PopoverContent>Place content for the popover here.</PopoverContent>
+  return (
+    <Popover>
+      <PopoverTrigger>Open</PopoverTrigger>
+      <PopoverContent>Place content for the popover here.</PopoverContent>
     </Popover>
+  )
 }
 
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverExample }
+export { Popover, PopoverTrigger, PopoverContent, PopoverExample }