From c545331cfec8139a6e83a27d43981794faddad99 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Thu, 13 Apr 2023 11:59:32 +0100
Subject: [PATCH] Few darkmode fixes - Avatar Tooltip | Forgot password page
 (#8242)

---
 apps/web/pages/auth/forgot-password/[id].tsx  | 11 +++++++++++
 apps/web/pages/auth/forgot-password/index.tsx | 17 +++++++++++++++--
 packages/ui/components/avatar/Avatar.tsx      | 15 +++++----------
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/apps/web/pages/auth/forgot-password/[id].tsx b/apps/web/pages/auth/forgot-password/[id].tsx
index 02c13fe81a..0fa3b730ce 100644
--- a/apps/web/pages/auth/forgot-password/[id].tsx
+++ b/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;
 
diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx
index 77e459cb88..e3fd74ef71 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/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;
 
diff --git a/packages/ui/components/avatar/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx
index 9a0fab2197..d7ecfb9bbe 100644
--- a/packages/ui/components/avatar/Avatar.tsx
+++ b/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}</>
   );