fade labels

PostHog · Jan 1, 2025 · bcc466e · bcc466e
1 parent 868786d
commit bcc466e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git 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
@@ -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' && (