Updated dark mode styles for stats overview (#24164)

peterzimon · web-flow · commit 566b71806146 · 2025-06-30T10:26:35.000+02:00
ref https://linear.app/ghost/issue/PROD-1975/darkmode-table-title-issues - Added dark mode styles for data list - Added dark mode styles for top posts - Added dark mode styles for feature image placeholder - Added dark mode styles for sort button
diff --git a/apps/posts/src/views/PostAnalytics/Growth/components/GrowthSources.tsx b/apps/posts/src/views/PostAnalytics/Growth/components/GrowthSources.tsx
@@ -182,7 +182,7 @@ export const GrowthSources: React.FC<SourcesCardProps> = ({
                             <Button variant='outline'>View all <LucideIcon.TableOfContents /></Button>
                         </SheetTrigger>
                         <SheetContent className='overflow-y-auto pt-0 sm:max-w-[600px]'>
-                            <SheetHeader className='sticky top-0 z-40 -mx-6 bg-white/60 p-6 backdrop-blur'>
+                            <SheetHeader className='sticky top-0 z-40 -mx-6 bg-background/60 p-6 backdrop-blur'>
                                 <SheetTitle>{sheetTitle}</SheetTitle>
                                 <SheetDescription>{sheetDescription}</SheetDescription>
                             </SheetHeader>
diff --git a/apps/posts/src/views/PostAnalytics/Web/components/Locations.tsx b/apps/posts/src/views/PostAnalytics/Web/components/Locations.tsx
@@ -114,7 +114,7 @@ const Locations:React.FC<LocationsProps> = ({data, isLoading}) => {
                                     <Button variant='outline'>View all <LucideIcon.TableOfContents /></Button>
                                 </SheetTrigger>
                                 <SheetContent className='overflow-y-auto pt-0 sm:max-w-[600px]'>
-                                    <SheetHeader className='sticky top-0 z-40 -mx-6 bg-white/60 p-6 backdrop-blur'>
+                                    <SheetHeader className='sticky top-0 z-40 -mx-6 bg-background/60 p-6 backdrop-blur'>
                                         <SheetTitle>Top locations</SheetTitle>
                                         <SheetDescription>Where are the readers of this post</SheetDescription>
                                     </SheetHeader>
diff --git a/apps/posts/src/views/PostAnalytics/Web/components/Sources.tsx b/apps/posts/src/views/PostAnalytics/Web/components/Sources.tsx
@@ -120,7 +120,7 @@ export const Sources: React.FC<SourcesCardProps> = ({
     if (tableOnly) {
         const limitedData = extendedData.slice(0, topSourcesLimit);
         const hasMore = extendedData.length > topSourcesLimit;
-        
+
         return (
             <div>
                 <SourcesTable
@@ -138,7 +138,7 @@ export const Sources: React.FC<SourcesCardProps> = ({
                                 </Button>
                             </SheetTrigger>
                             <SheetContent className='overflow-y-auto pt-0 sm:max-w-[600px]'>
-                                <SheetHeader className='sticky top-0 z-40 -mx-6 bg-white/60 p-6 backdrop-blur'>
+                                <SheetHeader className='sticky top-0 z-40 -mx-6 bg-background/60 p-6 backdrop-blur'>
                                     <SheetTitle>Sources</SheetTitle>
                                     <SheetDescription>{cardDescription}</SheetDescription>
                                 </SheetHeader>
@@ -189,7 +189,7 @@ export const Sources: React.FC<SourcesCardProps> = ({
                             <Button variant='outline'>View all <LucideIcon.TableOfContents /></Button>
                         </SheetTrigger>
                         <SheetContent className='overflow-y-auto pt-0 sm:max-w-[600px]'>
-                            <SheetHeader className='sticky top-0 z-40 -mx-6 bg-white/60 p-6 backdrop-blur'>
+                            <SheetHeader className='sticky top-0 z-40 -mx-6 bg-background/60 p-6 backdrop-blur'>
                                 <SheetTitle>Sources</SheetTitle>
                                 <SheetDescription>{cardDescription}</SheetDescription>
                             </SheetHeader>
diff --git a/apps/shade/src/components/ui/data-list.tsx b/apps/shade/src/components/ui/data-list.tsx
@@ -117,7 +117,7 @@ const DataListBar = React.forwardRef<HTMLDivElement, DataListBarProps>(({childre
     return (
         <div
             ref={ref}
-            className={cn('absolute inset-x-0 inset-y-1 z-0 origin-left rounded-[4px] bg-[#EFF5FB] group-hover/row:bg-[#BDE1FF] transition-all', className)}
+            className={cn('absolute inset-x-0 inset-y-1 z-0 origin-left rounded-[4px] bg-[#EFF5FB] dark:bg-[#202B36] dark:group-hover/row:bg-[#213F5E] group-hover/row:bg-[#BDE1FF] transition-all', className)}
             {...props}
         >
             {children}
diff --git a/apps/stats/src/views/Stats/Growth/components/GrowthSources.tsx b/apps/stats/src/views/Stats/Growth/components/GrowthSources.tsx
@@ -91,15 +91,15 @@ export const GrowthSources: React.FC<GrowthSourcesProps> = ({
     const {data: globalData} = useGlobalData();
     const {data: mrrHistoryResponse} = useMrrHistory();
     const {appSettings} = useAppContext();
-    
+
     // Use external sort state if provided, otherwise use internal state
     const [internalSortBy, setInternalSortBy] = useState<SourcesOrder>('free_members desc');
     const sortBy = externalSortBy || internalSortBy;
     const setSortBy = externalSetSortBy || setInternalSortBy;
 
     // Convert our sort format to backend format
     const backendOrderBy = sortBy.replace('free_members', 'signups').replace('paid_members', 'paid_conversions');
-    
+
     // Use the new endpoint with server-side sorting and limiting
     const {data: referrersData, isLoading} = useTopSourcesGrowth(range, backendOrderBy, limit);
 
@@ -146,7 +146,7 @@ export const GrowthSources: React.FC<GrowthSourcesProps> = ({
             return {
                 source,
                 free_members: item.signups, // Backend returns 'signups', we map to 'free_members' for display
-                paid_members: item.paid_conversions, // Backend returns 'paid_conversions', we map to 'paid_members' for display  
+                paid_members: item.paid_conversions, // Backend returns 'paid_conversions', we map to 'paid_members' for display
                 mrr: item.mrr,
                 iconSrc,
                 displayName: source,
@@ -232,7 +232,7 @@ export const GrowthSources: React.FC<GrowthSourcesProps> = ({
                                     <Button variant='outline'>View all <LucideIcon.TableOfContents /></Button>
                                 </SheetTrigger>
                                 <SheetContent className='overflow-y-auto pt-0 sm:max-w-[600px]'>
-                                    <SheetHeader className='sticky top-0 z-40 -mx-6 bg-white/60 p-6 backdrop-blur'>
+                                    <SheetHeader className='sticky top-0 z-40 -mx-6 bg-background/60 p-6 backdrop-blur'>
                                         <SheetTitle>{title}</SheetTitle>
                                         <SheetDescription>{description}</SheetDescription>
                                     </SheetHeader>
diff --git a/apps/stats/src/views/Stats/Overview/components/TopPosts.tsx b/apps/stats/src/views/Stats/Overview/components/TopPosts.tsx
@@ -30,7 +30,7 @@ const PostListTooltip:React.FC<PostlistTooptipProps> = ({
                 <div className="flex flex-col gap-1.5">
                     {metrics?.map(metric => (
                         <div key={metric.label} className="flex items-center justify-between gap-5">
-                            <div className="flex items-center gap-1 whitespace-nowrap">
+                            <div className="flex items-center gap-1.5 whitespace-nowrap">
                                 {metric.icon}
                                 {metric.label}
                             </div>
@@ -82,7 +82,7 @@ const TopPosts: React.FC<TopPostsProps> = ({
                         {
                             topPostsData?.stats?.map((post: TopPostViewsStats) => {
                                 return (
-                                    <div className='group relative flex w-full items-start justify-between gap-5 border-t border-border/50 py-4 before:absolute before:-inset-x-4 before:inset-y-0 before:z-0 before:hidden before:rounded-md before:bg-accent before:opacity-80 before:content-[""] first:!border-border hover:cursor-pointer hover:border-transparent hover:before:block md:items-center [&+div]:hover:border-transparent' onClick={() => {
+                                    <div className='group relative flex w-full items-start justify-between gap-5 border-t border-border/50 py-4 before:absolute before:-inset-x-4 before:inset-y-0 before:z-0 before:hidden before:rounded-md before:bg-accent before:opacity-80 before:content-[""] first:!border-border hover:cursor-pointer hover:border-transparent hover:before:block md:items-center dark:before:bg-accent/50 [&+div]:hover:border-transparent' onClick={() => {
                                         navigate(`/posts/analytics/beta/${post.post_id}`, {crossApp: true});
                                     }}>
                                         <div className='z-10 flex min-w-[160px] grow items-start gap-4 md:items-center lg:min-w-[320px]'>
diff --git a/apps/stats/src/views/Stats/Web/components/SourcesCard.tsx b/apps/stats/src/views/Stats/Web/components/SourcesCard.tsx
@@ -157,7 +157,7 @@ export const SourcesCard: React.FC<SourcesCardProps> = ({
                             <Button variant='outline'>View all <LucideIcon.TableOfContents /></Button>
                         </SheetTrigger>
                         <SheetContent className='overflow-y-auto pt-0 sm:max-w-[600px]'>
-                            <SheetHeader className='sticky top-0 z-40 -mx-6 bg-white/60 p-6 backdrop-blur'>
+                            <SheetHeader className='sticky top-0 z-40 -mx-6 bg-background/60 p-6 backdrop-blur'>
                                 <SheetTitle>{title}</SheetTitle>
                                 <SheetDescription>{description}</SheetDescription>
                             </SheetHeader>
diff --git a/apps/stats/src/views/Stats/Web/components/TopContent.tsx b/apps/stats/src/views/Stats/Web/components/TopContent.tsx
@@ -186,7 +186,7 @@ const TopContent: React.FC<TopContentProps> = ({range}) => {
                         <Button variant='outline'>View all <LucideIcon.TableOfContents /></Button>
                     </SheetTrigger>
                     <SheetContent className='overflow-y-auto pt-0 sm:max-w-[600px]'>
-                        <SheetHeader className='sticky top-0 z-40 -mx-6 bg-white/60 p-6 backdrop-blur'>
+                        <SheetHeader className='sticky top-0 z-40 -mx-6 bg-background/60 p-6 backdrop-blur'>
                             <SheetTitle>Top content</SheetTitle>
                             <SheetDescription>{getContentDescription(selectedContentType, range, getPeriodText)}</SheetDescription>
                         </SheetHeader>
diff --git a/apps/stats/src/views/Stats/components/FeatureImagePlaceholder.tsx b/apps/stats/src/views/Stats/components/FeatureImagePlaceholder.tsx
@@ -9,7 +9,7 @@ const FeatureImagePlaceholder:React.FC<FeatureImagePlaceholderProps> = ({
     className
 }) => {
     return (
-        <div className={cn('rounded-sm bg-muted flex flex-col items-stretch justify-center gap-1', className)}>
+        <div className={cn('rounded-sm bg-muted dark:bg-[#36373a] flex flex-col items-stretch justify-center gap-1', className)}>
             <div className='flex flex-col items-stretch gap-[5px] px-[15%]'>
                 <div className='h-[3px] bg-muted-foreground/20'></div>
                 <div className='h-[3px] w-[80%] bg-muted-foreground/20'></div>
diff --git a/apps/stats/src/views/Stats/components/SortButton.tsx b/apps/stats/src/views/Stats/components/SortButton.tsx
@@ -16,7 +16,7 @@ const SortButton = <T extends string>({
 }: SortButtonProps<T>) => {
     return (
         <TableHeadButton
-            className={`${sortBy === activeSortBy && 'text-black'}`}
+            className={`${sortBy === activeSortBy && 'text-foreground'}`}
             onClick={() => {
                 setSortBy(sortBy);
             }}
diff --git a/ghost/admin/app/components/posts-list/list-item-analytics.hbs b/ghost/admin/app/components/posts-list/list-item-analytics.hbs
@@ -197,7 +197,7 @@
                         {{#if @post.email}}
                         <div class="metric">
                             <div class="data">
-                                {{svg-jar "analytics-tab-sent"}}
+                                {{svg-jar "analytics-sent"}}
                                 Sent
                             </div>
                             <span>{{format-number @post.email.emailCount}}</span>
diff --git a/ghost/admin/public/assets/icons/analytics-sent.svg b/ghost/admin/public/assets/icons/analytics-sent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-icon lucide-send"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>

Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@ const DataListBar = React.forwardRef<HTMLDivElement, DataListBarProps>(({childre`
`117`	`117`	`return (`
`118`	`118`	`<div`
`119`	`119`	`ref={ref}`
`120`		`- className={cn('absolute inset-x-0 inset-y-1 z-0 origin-left rounded-[4px] bg-[#EFF5FB] group-hover/row:bg-[#BDE1FF] transition-all', className)}`
	`120`	`+ className={cn('absolute inset-x-0 inset-y-1 z-0 origin-left rounded-[4px] bg-[#EFF5FB] dark:bg-[#202B36] dark:group-hover/row:bg-[#213F5E] group-hover/row:bg-[#BDE1FF] transition-all', className)}`
`121`	`121`	`{...props}`
`122`	`122`	`>`
`123`	`123`	`{children}`