From 95c1c81b3b0c7cea637ae06bf100b68be00cc003 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Fri, 10 Mar 2023 00:27:59 +0530
Subject: [PATCH] Fix ColorPicker not showing up and Auto theme not working
 (#7626)

---
 apps/web/components/Embed.tsx                         | 11 ++++++++++-
 packages/lib/hooks/useTheme.tsx                       |  4 +---
 .../ui/components/form/color-picker/colorpicker.tsx   |  8 +++++---
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index 462a8cb7da..c8e127b296 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -669,8 +669,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   embedUrl: string;
 }) => {
   const { t } = useLocale();
+
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
+
   const s = (href: string) => {
     const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
     const [a, b] = href.split("=");
@@ -809,7 +812,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent size="xl" className="p-0.5" type="creation">
+    <DialogContent ref={dialogContentRef} size="xl" className="p-0.5" type="creation">
       <div className="flex">
         <div className="flex w-1/3 flex-col bg-gray-50 p-8">
           <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
@@ -960,6 +963,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Button Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -979,6 +984,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Text Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -1060,6 +1067,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         <div className="mb-2 pt-2">{palette.title}</div>
                         <div className="w-full">
                           <ColorPicker
+                            popoverAlign="start"
+                            container={dialogContentRef?.current ?? undefined}
                             defaultValue="#000000"
                             onChange={(color) => {
                               addToPalette({
diff --git a/packages/lib/hooks/useTheme.tsx b/packages/lib/hooks/useTheme.tsx
index 1530af3b4f..6a8ec8dd86 100644
--- a/packages/lib/hooks/useTheme.tsx
+++ b/packages/lib/hooks/useTheme.tsx
@@ -6,12 +6,10 @@ import type { Maybe } from "@calcom/trpc/server";
 
 // makes sure the ui doesn't flash
 export default function useTheme(theme?: Maybe<string>) {
-  let currentTheme: Maybe<string> = theme || "system";
-
   const { resolvedTheme, setTheme, forcedTheme, theme: activeTheme } = useNextTheme();
   const embedTheme = useEmbedTheme();
   // Embed UI configuration takes more precedence over App Configuration
-  currentTheme = embedTheme || theme;
+  const currentTheme = embedTheme || theme || "system";
 
   useEffect(() => {
     if (currentTheme !== activeTheme && typeof currentTheme === "string") {
diff --git a/packages/ui/components/form/color-picker/colorpicker.tsx b/packages/ui/components/form/color-picker/colorpicker.tsx
index e12da54ce8..651c986ee4 100644
--- a/packages/ui/components/form/color-picker/colorpicker.tsx
+++ b/packages/ui/components/form/color-picker/colorpicker.tsx
@@ -7,6 +7,8 @@ import { fallBackHex, isValidHexCode } from "@calcom/lib/CustomBranding";
 export type ColorPickerProps = {
   defaultValue: string;
   onChange: (text: string) => void;
+  container?: HTMLElement;
+  popoverAlign?: React.ComponentProps<typeof Popover.Content>["align"];
 };
 
 const ColorPicker = (props: ColorPickerProps) => {
@@ -16,7 +18,7 @@ const ColorPicker = (props: ColorPickerProps) => {
   const [color, setColor] = useState(init);
 
   return (
-    <div className=" mt-1 flex items-center justify-center">
+    <div className="mt-1 flex items-center justify-center">
       <Popover.Root>
         <div className="flex items-center rounded-l-md border border-r-0 border-gray-300 p-1.5">
           <Popover.Trigger asChild>
@@ -27,8 +29,8 @@ const ColorPicker = (props: ColorPickerProps) => {
             />
           </Popover.Trigger>
         </div>
-        <Popover.Portal>
-          <Popover.Content align="center" sideOffset={10}>
+        <Popover.Portal container={props.container}>
+          <Popover.Content align={props.popoverAlign ?? "center"} sideOffset={10}>
             <HexColorPicker
               color={color}
               className="!h-32 !w-32"