zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-12-30 20:58:05 +01:00
parent 3daddd8f57
commit 2fc0ea6360
4 changed files with 3 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

2
apps/dashboard/src/components/ui/tooltip.tsx
View File

@@ -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}

2
apps/dashboard/src/modals/add-notification-rule.tsx
View File

@@ -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.

42
apps/dashboard/src/styles/globals.css
View File

@@ -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 {