chore: fixed a few cal.ai ui issues and cal.video logo (#15044)

apps/web/modules/videos/ai/ai-transcribe.tsx

@@ -1,10 +1,9 @@
 import { useTranscription } from "@daily-co/daily-react";
 import { useDaily, useDailyEvent } from "@daily-co/daily-react";
 import React, { Fragment, useCallback, useRef, useState, useLayoutEffect, useEffect } from "react";
-import { Toaster } from "react-hot-toast";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { showToast } from "@calcom/ui";
 
 export const CalAiTranscribe = () => {
   const daily = useDaily();
@@ -26,11 +25,25 @@ export const CalAiTranscribe = () => {
   );
 
   useDailyEvent("transcription-started", (ev) => {
-    showToast(t("transcription_enabled"), "success");
+    daily?.updateCustomTrayButtons({
+      transcription: {
+        label: "Stop",
+        tooltip: "Stop transcription",
+        iconPath: `${WEBAPP_URL}/sparkles-red.svg`,
+        iconPathDarkMode: `${WEBAPP_URL}/sparkles-red.svg`,
+      },
+    });
   });
 
   useDailyEvent("transcription-stopped", (ev) => {
-    showToast(t("transcription_stopped"), "success");
+    daily?.updateCustomTrayButtons({
+      transcription: {
+        label: "Cal.ai",
+        tooltip: "Transcription powered by AI",
+        iconPath: `${WEBAPP_URL}/sparkles`,
+        iconPathDarkMode: `${WEBAPP_URL}/sparkles`,
+      },
+    });
   });
 
   useDailyEvent("custom-button-click", (ev) => {
@@ -68,11 +81,13 @@ export const CalAiTranscribe = () => {
 
   return (
     <>
-      <Toaster position="bottom-right" />
       <div
         id="cal-ai-thing"
+        style={{
+          textShadow: "0 0 20px black, 0 0 20px black, 0 0 20px black",
+        }}
         ref={transcriptRef}
-        className="max-h-full overflow-x-hidden overflow-y-scroll p-2 text-center text-white">
+        className="max-h-full overflow-x-hidden overflow-y-scroll p-8 text-center text-white">
         {transcript
           ? transcript.split("\n").map((line, i) => (
               <Fragment key={`transcript-${i}`}>

apps/web/modules/videos/views/videos-single-view.tsx

@@ -51,7 +51,7 @@ export default function JoinCall(props: PageProps) {
         customTrayButtons: {
           transcription: {
             label: "Cal.ai",
-            tooltip: "Toggle real time transcription powered by AI",
+            tooltip: "Transcription powered by AI",
             iconPath: `${WEBAPP_URL}/sparkles.svg`,
             iconPathDarkMode: `${WEBAPP_URL}/sparkles.svg`,
           },
@@ -103,12 +103,12 @@ export default function JoinCall(props: PageProps) {
             />
           ) : (
             <img
-              className="fixed z-10 inline-block h-4"
+              className="fixed z-10 hidden h-5 sm:inline-block"
               src={`${WEBSITE_URL}/cal-logo-word-dark.svg`}
               alt="Logo"
               style={{
-                top: 9,
-                left: "calc(50% - 45px)",
+                top: 47,
+                left: 20,
               }}
             />
           )}

apps/web/public/sparkles-red.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3L10.088 8.813C9.99015 9.11051 9.82379 9.38088 9.60234 9.60234C9.38088 9.82379 9.11051 9.99015 8.813 10.088L3 12L8.813 13.912C9.11051 14.0099 9.38088 14.1762 9.60234 14.3977C9.82379 14.6191 9.99015 14.8895 10.088 15.187L12 21L13.912 15.187C14.0099 14.8895 14.1762 14.6191 14.3977 14.3977C14.6191 14.1762 14.8895 14.0099 15.187 13.912L21 12L15.187 10.088C14.8895 9.99015 14.6191 9.82379 14.3977 9.60234C14.1762 9.38088 14.0099 9.11051 13.912 8.813L12 3Z" stroke="#F63035" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 3V7" stroke="#F63035" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 17V21" stroke="#F63035" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 5H7" stroke="#F63035" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 19H21" stroke="#F63035" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/features/bookings/Booker/Booker.tsx

@@ -327,7 +327,7 @@ const BookerComponent = ({
                 {!hideEventTypeDetails && orgBannerUrl && !isPlatform && (
                   <img
                     loading="eager"
-                    className="-mb-9 h-28 max-h-28 rounded-tl-md sm:max-h-24"
+                    className="-mb-9 ltr:rounded-tl-md rtl:rounded-tr-md"
                     alt="org banner"
                     src={orgBannerUrl}
                   />