improve(dashboard): tooltip appearance and prose on dark mode

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/create-invite.tsx

@@ -69,7 +69,7 @@ export default function CreateInvite({ projects }: Props) {
           <SheetHeader>
             <SheetTitle>User has been invited</SheetTitle>
           </SheetHeader>
-          <div className="prose">
+          <div className="prose dark:prose-invert">
             {mutation.data.type === 'is_member' ? (
               <>
                 <p>

apps/dashboard/src/components/ui/tooltip.tsx

@@ -22,7 +22,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 overflow-hidden rounded-md border bg-popover-foreground px-3 py-1.5  text-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 rounded-md border bg-background p-4 py-2.5 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
       )}
       {...props}

apps/dashboard/src/modals/add-notification-rule.tsx

@@ -165,7 +165,7 @@ export default function AddNotificationRule({ rule }: Props) {
         <WithLabel
           label="Template"
           info={
-            <div className="text-base leading-normal max-w-sm p-2 prose text-left text-white [&_code]:text-white">
+            <div className="prose dark:prose-invert">
               <p>
                 Customize your notification message. You can grab any property
                 from your event.

apps/dashboard/src/styles/globals.css

@@ -43,27 +43,6 @@
     --radius: 0.5rem;
   }
 
-  .prose {
-    --tw-prose-body: #374151;
-    --tw-prose-headings: #111827;
-    --tw-prose-lead: #4b5563;
-    --tw-prose-links: #2563eb;
-    --tw-prose-bold: #111827;
-    --tw-prose-counters: #6b7280;
-    --tw-prose-bullets: #d1d5db;
-    --tw-prose-hr: #e5e7eb;
-    --tw-prose-quotes: #111827;
-    --tw-prose-quote-borders: #e5e7eb;
-    --tw-prose-captions: #6b7280;
-    --tw-prose-kbd: #111827;
-    --tw-prose-kbd-shadows: 17 24 39;
-    --tw-prose-code: #111827;
-    --tw-prose-pre-code: #e5e7eb;
-    --tw-prose-pre-bg: #f9fafb;
-    --tw-prose-th-borders: #d1d5db;
-    --tw-prose-td-borders: #e5e7eb;
-  }
-
   .dark {
     --highlight: 221.44 100% 62.04%;
 
@@ -101,27 +80,6 @@
     --input: 0 0% 15.1%; /* #262626 */
     --ring: 0 0% 83.9%; /* #d6d6d6 */
   }
-
-  .dark .prose {
-    --tw-prose-body: #e5e7eb;
-    --tw-prose-headings: #f3f4f6;
-    --tw-prose-lead: #9ca3af;
-    --tw-prose-links: #60a5fa;
-    --tw-prose-bold: #f3f4f6;
-    --tw-prose-counters: #9ca3af;
-    --tw-prose-bullets: #6b7280;
-    --tw-prose-hr: #4b5563;
-    --tw-prose-quotes: #f3f4f6;
-    --tw-prose-quote-borders: #4b5563;
-    --tw-prose-captions: #9ca3af;
-    --tw-prose-kbd: #f3f4f6;
-    --tw-prose-kbd-shadows: 255 255 255;
-    --tw-prose-code: #f3f4f6;
-    --tw-prose-pre-code: #d1d5db;
-    --tw-prose-pre-bg: #1f2937;
-    --tw-prose-th-borders: #4b5563;
-    --tw-prose-td-borders: #374151;
-  }
 }
 
 @layer base {