Few darkmode fixes - Avatar Tooltip | Forgot password page (#8242)

apps/web/pages/auth/forgot-password/[id].tsx

@@ -4,6 +4,7 @@ import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
+import type { CSSProperties } from "react";
 import React, { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
@@ -109,6 +110,14 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
         <>
           <form
             className="space-y-6"
+            style={
+              {
+                "--cal-brand": "#111827",
+                "--cal-brand-emphasis": "#101010",
+                "--cal-brand-text": "white",
+                "--cal-brand-subtle": "#9CA3AF",
+              } as CSSProperties
+            }
             onSubmit={async (e) => {
               e.preventDefault();
 
@@ -164,6 +173,8 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
   );
 }
 
+Page.isThemeSupported = false;
+
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const id = context.params?.id as string;
 

apps/web/pages/auth/forgot-password/index.tsx

@@ -4,7 +4,7 @@ import { getCsrfToken } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import type { SyntheticEvent } from "react";
+import type { CSSProperties, SyntheticEvent } from "react";
 import React from "react";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
@@ -105,7 +105,18 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
       {!success && (
         <>
           <div className="space-y-6">{error && <p className="text-red-600">{error.message}</p>}</div>
-          <form className="space-y-6" onSubmit={handleSubmit} action="#">
+          <form
+            className="space-y-6"
+            onSubmit={handleSubmit}
+            action="#"
+            style={
+              {
+                "--cal-brand": "#111827",
+                "--cal-brand-emphasis": "#101010",
+                "--cal-brand-text": "white",
+                "--cal-brand-subtle": "#9CA3AF",
+              } as CSSProperties
+            }>
             <input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
             <EmailField
               onChange={handleChange}
@@ -132,6 +143,8 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   );
 }
 
+ForgotPassword.isThemeSupported = false;
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const { req, res } = context;
 

packages/ui/components/avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as Tooltip from "@radix-ui/react-tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import Link from "next/link";
 
 import classNames from "@calcom/lib/classNames";
@@ -8,6 +8,7 @@ import { defaultAvatarSrc } from "@calcom/lib/defaultAvatarImage";
 import type { Maybe } from "@trpc/server";
 
 import { Check } from "../icon";
+import { Tooltip } from "../tooltip";
 
 export type AvatarProps = {
   className?: string;
@@ -75,15 +76,9 @@ export function Avatar(props: AvatarProps) {
   }
 
   return title ? (
-    <Tooltip.Provider>
-      <Tooltip.Tooltip delayDuration={300}>
-        <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
-        <Tooltip.Content className="text-inverted rounded-sm bg-black p-2 text-sm shadow-sm">
-          <Tooltip.Arrow />
-          {title}
-        </Tooltip.Content>
-      </Tooltip.Tooltip>
-    </Tooltip.Provider>
+    <TooltipPrimitive.Provider>
+      <Tooltip content={title}>{avatar}</Tooltip>
+    </TooltipPrimitive.Provider>
   ) : (
     <>{avatar}</>
   );