From f73d38b63251727656370bf2bde07211e17f0283 Mon Sep 17 00:00:00 2001
From: VIneet Pradhan <138296762+vineetpradhanvp@users.noreply.github.com>
Date: Mon, 4 Sep 2023 18:32:21 +0530
Subject: [PATCH] fix: color tokens are not used in payment form (#10806)

Co-authored-by: VIneet Pradhan <138296762+vineetpradhan-dev@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 .../ee/payments/components/Payment.tsx        | 26 +++++--------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/features/ee/payments/components/Payment.tsx b/packages/features/ee/payments/components/Payment.tsx
index 7d418a97d5..be4f3a5e69 100644
--- a/packages/features/ee/payments/components/Payment.tsx
+++ b/packages/features/ee/payments/components/Payment.tsx
@@ -1,7 +1,6 @@
 import type { Payment } from "@prisma/client";
 import type { EventType } from "@prisma/client";
 import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import type stripejs from "@stripe/stripe-js";
 import type { StripeElementLocale } from "@stripe/stripe-js";
 import { useRouter, useSearchParams } from "next/navigation";
 import type { SyntheticEvent } from "react";
@@ -181,27 +180,14 @@ const PaymentForm = (props: Props) => {
   );
 };
 
-const ELEMENT_STYLES: stripejs.Appearance = {
-  theme: "none",
-};
-
-const ELEMENT_STYLES_DARK: stripejs.Appearance = {
-  theme: "night",
-  variables: {
-    colorText: "#d6d6d6",
-    fontWeightNormal: "600",
-    borderRadius: "6px",
-    colorBackground: "#101010",
-    colorPrimary: "#d6d6d6",
-  },
-};
-
 export default function PaymentComponent(props: Props) {
   const stripePromise = getStripe(props.payment.data.stripe_publishable_key as any);
-  const [darkMode, setDarkMode] = useState<boolean>(false);
+  const [theme, setTheme] = useState<"stripe" | "night">("stripe");
 
   useEffect(() => {
-    setDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches);
+    if (document.documentElement.classList.contains("dark")) {
+      setTheme("night");
+    }
   }, []);
 
   return (
@@ -209,7 +195,9 @@ export default function PaymentComponent(props: Props) {
       stripe={stripePromise}
       options={{
         clientSecret: props.clientSecret,
-        appearance: darkMode ? ELEMENT_STYLES_DARK : ELEMENT_STYLES,
+        appearance: {
+          theme,
+        },
       }}>
       <PaymentForm {...props} />
     </Elements>