From 7581f4d641fca94a13847f40337e8f32e3e4969c Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 12 Sep 2023 03:38:27 +0530
Subject: [PATCH] fix: add inline color in og image (#11280)

---
 packages/lib/OgImages.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/lib/OgImages.tsx b/packages/lib/OgImages.tsx
index b2f712d48a..ce3efbbc75 100644
--- a/packages/lib/OgImages.tsx
+++ b/packages/lib/OgImages.tsx
@@ -139,7 +139,11 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => {
       <div tw="h-full flex flex-col justify-start">
         <div tw="flex items-center justify-center" style={{ fontFamily: "cal", fontWeight: 300 }}>
           <img src={`${CAL_URL}/${LOGO}`} width="350" alt="Logo" />
-          {avatars.length > 0 && <div tw="font-bold text-[92px] mx-8 bottom-2">/</div>}
+          {avatars.length > 0 && (
+            <div style={{ color: "#111827" }} tw="font-bold text-[92px] mx-8 bottom-2">
+              /
+            </div>
+          )}
           <div tw="flex flex-row">
             {avatars.slice(0, 3).map((avatar) => (
               <img
@@ -157,7 +161,7 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => {
             )}
           </div>
         </div>
-        <div tw="relative flex text-[54px] w-full flex-col text-emphasis mt-auto">
+        <div style={{ color: "#111827" }} tw="relative flex text-[54px] w-full flex-col mt-auto">
           <div
             tw="flex w-[1040px] overflow-hidden"
             style={{ whiteSpace: "nowrap", fontFamily: "cal", textOverflow: "ellipsis" }}>
@@ -217,7 +221,7 @@ export const App = ({ name, description, slug }: AppImageProps) => (
         <img src={`${CAL_URL}${slug}`} alt="App icon" width="172" />
       </div>
     </div>
-    <div tw="flex mt-auto w-full flex-col text-emphasis">
+    <div style={{ color: "#111827" }} tw="flex mt-auto w-full flex-col">
       <div tw="flex text-[64px] mb-7" style={{ fontFamily: "cal", fontWeight: 600 }}>
         {name}
       </div>
@@ -235,7 +239,7 @@ export const Generic = ({ title, description }: GenericImageProps) => (
         <img src={`${CAL_URL}/cal-logo-word-black.svg`} width="350" alt="Logo" />
       </div>
 
-      <div tw="relative flex text-[54px] w-full flex-col text-emphasis mt-auto">
+      <div style={{ color: "#111827" }} tw="relative flex text-[54px] w-full flex-col mt-auto">
         <div tw="flex w-[1040px]" style={{ fontFamily: "cal" }}>
           {title}
         </div>