first iteration of fixing dark mode, <Select> is missing (#4304)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/app-store/ee/routing_forms/components/react-awesome-query-builder/widgets.tsx

@@ -31,7 +31,7 @@ const TextAreaWidget = (props: TextWidgetProps) => {
       disabled={readonly}
       onChange={onChange}
       maxLength={maxLength}
-      className="flex flex-grow border-gray-300 text-sm dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
+      className="dark:border-darkgray-300 flex flex-grow border-gray-300 text-sm dark:bg-transparent dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
       {...customProps}
       {...remainingProps}
     />
@@ -51,7 +51,7 @@ const TextWidget = (props: TextWidgetProps & { type?: string }) => {
     <TextField
       containerClassName="w-full"
       type={type}
-      className="flex flex-grow border-gray-300 text-sm dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
+      className="dark:border-darkgray-300 flex flex-grow border-gray-300 text-sm dark:bg-transparent dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
       value={textValue}
       placeholder={placeholder}
       disabled={readonly}
@@ -67,7 +67,7 @@ function NumberWidget({ value, setValue, ...remainingProps }: NumberWidgetProps)
     <TextField
       name="query-builder"
       type="number"
-      className="mt-0 border-gray-300 text-sm dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
+      className="dark:border-darkgray-300 mt-0 border-gray-300 text-sm dark:bg-transparent dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
       value={value}
       onChange={(e) => {
         setValue(e.target.value);
@@ -102,7 +102,7 @@ const MultiSelectWidget = ({
 
   return (
     <Select
-      className="block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm"
+      className="dark:border-darkgray-300 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 dark:bg-transparent dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm"
       menuPosition="fixed"
       onChange={(items) => {
         setValue(items?.map((item) => item.value));
@@ -136,7 +136,7 @@ function SelectWidget({
 
   return (
     <Select
-      className="data-testid-select block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm"
+      className="data-testid-select dark:border-darkgray-300 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 dark:bg-transparent dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm"
       menuPosition="fixed"
       onChange={(item) => {
         if (!item) {

packages/app-store/ee/routing_forms/pages/routing-link/[...appPages].tsx

@@ -7,12 +7,13 @@ import { v4 as uuidv4 } from "uuid";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { AppGetServerSidePropsContext, AppPrisma } from "@calcom/types/AppGetServerSideProps";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/v2/";
 
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 
@@ -89,6 +90,8 @@ function RoutingForm({ form, profile }: inferSSRProps<typeof getServerSideProps>
     onSubmit(response);
   };
 
+  const { t } = useLocale();
+
   return (
     <div>
       <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
@@ -101,7 +104,7 @@ function RoutingForm({ form, profile }: inferSSRProps<typeof getServerSideProps>
             </Head>
             <div className={classNames("mx-auto my-0 max-w-3xl", isEmbed ? "" : "md:my-24")}>
               <div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
-                <div className="main border-bookinglightest mx-0 rounded-md bg-white p-4 py-6 dark:bg-gray-800 sm:-mx-4 sm:px-8 sm:dark:border-gray-600 md:border">
+                <div className="main border-bookinglightest dark:bg-darkgray-100 sm:dark:border-darkgray-300 mx-0 rounded-md bg-white p-4 py-6 sm:-mx-4 sm:px-8 md:border">
                   <Toaster position="bottom-right" />
 
                   <form onSubmit={handleOnSubmit}>
@@ -167,11 +170,8 @@ function RoutingForm({ form, profile }: inferSSRProps<typeof getServerSideProps>
                       );
                     })}
                     <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
-                      <Button
-                        loading={responseMutation.isLoading}
-                        type="submit"
-                        className="dark:text-darkmodebrandcontrast text-brandcontrast bg-brand dark:bg-darkmodebrand relative inline-flex items-center rounded-sm border border-transparent px-3 py-2 text-sm font-medium hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1">
-                        Submit
+                      <Button loading={responseMutation.isLoading} type="submit" color="primary">
+                        {t("submit")}
                       </Button>
                     </div>
                   </form>