From bcc466e326bbc90260f0fcd4c386e4cd734771f1 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Wed, 1 Jan 2025 18:39:24 +0000
Subject: [PATCH] fade labels

---
 .../scenes/session-recordings/components/OverviewGrid.tsx    | 5 ++++-
 .../player/sidebar/PlayerSidebarOverviewGrid.tsx             | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/scenes/session-recordings/components/OverviewGrid.tsx b/frontend/src/scenes/session-recordings/components/OverviewGrid.tsx
index 116075efbb3db..89eed11f3dc43 100644
--- a/frontend/src/scenes/session-recordings/components/OverviewGrid.tsx
+++ b/frontend/src/scenes/session-recordings/components/OverviewGrid.tsx
@@ -1,4 +1,5 @@
 import { Tooltip } from '@posthog/lemon-ui'
+import clsx from 'clsx'
 import { ReactNode } from 'react'
 
 interface OverviewItemBase {
@@ -35,15 +36,17 @@ export function OverviewGridItem({
     description,
     label,
     icon,
+    fadeLabel,
 }: {
     children?: ReactNode
     description: ReactNode
     label: ReactNode
     icon?: ReactNode
+    fadeLabel?: boolean
 }): JSX.Element {
     return (
         <div className="flex flex-1 w-full justify-between items-center ">
-            <div className="text-sm text-muted">
+            <div className={clsx('text-sm', fadeLabel && 'font-light')}>
                 {icon} {label}
             </div>
             <Tooltip title={description}>
diff --git a/frontend/src/scenes/session-recordings/player/sidebar/PlayerSidebarOverviewGrid.tsx b/frontend/src/scenes/session-recordings/player/sidebar/PlayerSidebarOverviewGrid.tsx
index b2cc8e0182dbf..078f150488b4d 100644
--- a/frontend/src/scenes/session-recordings/player/sidebar/PlayerSidebarOverviewGrid.tsx
+++ b/frontend/src/scenes/session-recordings/player/sidebar/PlayerSidebarOverviewGrid.tsx
@@ -24,6 +24,7 @@ export function PlayerSidebarOverviewGrid(): JSX.Element {
                                 description={item.tooltipTitle}
                                 label={item.label}
                                 icon={item.icon}
+                                fadeLabel
                             >
                                 <div className="flex flex-row items-center space-x-2 justify-start">
                                     {item.type === 'property' && (