chore(insights): Fix insight type icon warnings (#23976)

PostHog · Jul 25, 2024 · 93f013a · 93f013a
1 parent e263a61
commit 93f013a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 18 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
@@ -7,7 +7,7 @@ import React, { useContext } from 'react'
 
 import { LemonDropdown, LemonDropdownProps } from '../LemonDropdown'
 import { Link } from '../Link'
-import { PopoverReferenceContext } from '../Popover'
+import { PopoverOverlayContext, PopoverReferenceContext } from '../Popover'
 import { Spinner } from '../Spinner/Spinner'
 import { Tooltip, TooltipProps } from '../Tooltip'
 
@@ -139,6 +139,7 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
             ref
         ): JSX.Element => {
             const [popoverVisibility, popoverPlacement] = useContext(PopoverReferenceContext) || [false, null]
+            const [, parentPopoverLevel] = useContext(PopoverOverlayContext)
             const within3000PageHeader = useContext(WithinPageHeaderContext)
 
             if (!active && popoverVisibility) {
@@ -169,8 +170,8 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
                 icon = <Spinner textColored />
                 disabled = true // Cannot interact with a loading button
             }
-            if (within3000PageHeader) {
-                size = 'small'
+            if (within3000PageHeader && parentPopoverLevel === -1) {
+                size = 'small' // Ensure that buttons in the page header are small (but NOT inside dropdowns!)
             }
 
             let tooltipContent: TooltipProps['title']

diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx
@@ -330,7 +330,7 @@ export const INSIGHT_TYPE_OPTIONS: LemonSelectOptions<string> = [
     ...Object.entries(INSIGHT_TYPES_METADATA).map(([value, meta]) => ({
         value,
         label: meta.name,
-        icon: meta.icon ? <meta.icon color="#747EA2" noBackground /> : undefined,
+        icon: meta.icon ? <meta.icon /> : undefined,
     })),
 ]
 

diff --git a/frontend/src/scenes/saved-insights/newInsightsMenu.tsx b/frontend/src/scenes/saved-insights/newInsightsMenu.tsx
@@ -2,28 +2,21 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { ReactNode } from 'react'
 import { insightTypeURL } from 'scenes/insights/utils'
-import { INSIGHT_TYPES_METADATA, InsightTypeMetadata } from 'scenes/saved-insights/SavedInsights'
+import { INSIGHT_TYPES_METADATA } from 'scenes/saved-insights/SavedInsights'
 
 import { InsightType } from '~/types'
 
-function insightTypesForMenu(): [string, InsightTypeMetadata][] {
-    // never show JSON InsightType in the menu
-    return Object.entries(INSIGHT_TYPES_METADATA).filter(([insightType]) => insightType !== InsightType.JSON)
-}
-
 export function overlayForNewInsightMenu(dataAttr: string): ReactNode[] {
-    const menuEntries = insightTypesForMenu()
+    const menuEntries = Object.entries(INSIGHT_TYPES_METADATA).filter(
+        ([insightType]) => insightType !== InsightType.JSON
+    )
 
     return menuEntries.map(
         ([listedInsightType, listedInsightTypeMetadata]) =>
             listedInsightTypeMetadata.inMenu && (
                 <LemonButton
                     key={listedInsightType}
-                    icon={
-                        listedInsightTypeMetadata.icon && (
-                            <listedInsightTypeMetadata.icon color="var(--muted-alt)" noBackground />
-                        )
-                    }
+                    icon={listedInsightTypeMetadata.icon && <listedInsightTypeMetadata.icon />}
                     to={insightTypeURL[listedInsightType as InsightType]}
                     data-attr={dataAttr}
                     data-attr-insight-type={listedInsightType}
@@ -32,9 +25,9 @@ export function overlayForNewInsightMenu(dataAttr: string): ReactNode[] {
                     }}
                     fullWidth
                 >
-                    <div className="text-text-3000 flex flex-col text-sm py-1">
+                    <div className="flex flex-col text-sm py-1">
                         <strong>{listedInsightTypeMetadata.name}</strong>
-                        <span className="text-xs font-sans">{listedInsightTypeMetadata.description}</span>
+                        <span className="text-xs font-sans font-normal">{listedInsightTypeMetadata.description}</span>
                     </div>
                 </LemonButton>
             )