refactor: Several toolbar fixes/style changes (#28120)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/components/PropertyKeyInfo.scss

@@ -38,6 +38,7 @@
 
 .PropertyKeyInfo__overlay {
     padding: 0.25rem;
+    color: var(--text-3000);
 
     p {
         margin-bottom: 0.25rem;

frontend/src/scenes/session-recordings/components/PanelSettings.tsx

@@ -36,10 +36,12 @@ export function SettingsBar({
     return (
         <div
             className={clsx(
-                ['bottom', 'all'].includes(border) && 'border-b',
-                ['top', 'all'].includes(border) && 'border-t',
                 'flex flex-row w-full overflow-hidden font-light text-xs bg-bg-3000 items-center',
-                className
+                className,
+                {
+                    'border-b': ['bottom', 'all'].includes(border),
+                    'border-t': ['top', 'all'].includes(border),
+                }
             )}
         >
             {children}

frontend/src/toolbar/bar/Toolbar.scss

@@ -61,7 +61,7 @@
         bottom: 0;
         display: flex;
         flex-direction: column;
-        width: 30rem;
+        width: 35rem;
         max-height: 0;
         margin-left: -15rem;
         overflow: hidden;

frontend/src/toolbar/bar/Toolbar.tsx

@@ -83,7 +83,7 @@ function MoreMenu(): JSX.Element {
             }
             maxContentWidth={true}
         >
-            <ToolbarButton title="More options">
+            <ToolbarButton>
                 <IconMenu />
             </ToolbarButton>
         </LemonMenu>

frontend/src/toolbar/bar/ToolbarMenu.tsx

@@ -3,29 +3,24 @@ import clsx from 'clsx'
 export type ToolbarMenuProps = {
     children: React.ReactNode
     className?: string
-    noPadding?: boolean
 }
 
 export function ToolbarMenu({ children, className }: ToolbarMenuProps): JSX.Element {
     return <div className={clsx('w-full h-full flex flex-col overflow-hidden', className)}>{children}</div>
 }
 
-ToolbarMenu.Header = function ToolbarMenuHeader({ children, className, noPadding }: ToolbarMenuProps): JSX.Element {
-    return <div className={clsx(!noPadding && 'px-1 pt-1', className)}>{children}</div>
+ToolbarMenu.Header = function ToolbarMenuHeader({ children, className }: ToolbarMenuProps): JSX.Element {
+    return <div className={clsx('px-1 pt-1', className)}>{children}</div>
 }
 
-ToolbarMenu.Body = function ToolbarMenuBody({ children, className, noPadding }: ToolbarMenuProps): JSX.Element {
+ToolbarMenu.Body = function ToolbarMenuBody({ children, className }: ToolbarMenuProps): JSX.Element {
     return (
-        <div className={clsx(!noPadding && 'px-1', 'flex flex-col flex-1 h-full overflow-y-auto min-h-20', className)}>
+        <div className={clsx('flex flex-col flex-1 h-full overflow-y-auto min-h-20 px-2 py-1', className)}>
             {children}
         </div>
     )
 }
 
-ToolbarMenu.Footer = function ToolbarMenufooter({ children, className, noPadding }: ToolbarMenuProps): JSX.Element {
-    return (
-        <div className={clsx(!noPadding && 'p-1', 'flex flex-row items-center border-t gap-2', className)}>
-            {children}
-        </div>
-    )
+ToolbarMenu.Footer = function ToolbarMenuFooter({ children, className }: ToolbarMenuProps): JSX.Element {
+    return <div className={clsx('flex flex-row items-center border-t gap-2 px-2 py-1', className)}>{children}</div>
 }

frontend/src/toolbar/debug/EventDebugMenu.tsx

@@ -1,6 +1,15 @@
-import { BaseIcon, IconCheck, IconEye, IconHide, IconLogomark, IconSearch, IconVideoCamera } from '@posthog/icons'
+import {
+    BaseIcon,
+    IconCheck,
+    IconChevronDown,
+    IconEye,
+    IconHide,
+    IconLogomark,
+    IconSearch,
+    IconVideoCamera,
+} from '@posthog/icons'
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
-import { AnimatedCollapsible } from 'lib/components/AnimatedCollapsible'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { dayjs } from 'lib/dayjs'
@@ -70,7 +79,6 @@ export const EventDebugMenu = (): JSX.Element => {
         isCollapsedEventRow,
         activeFilteredEvents,
         searchFilteredEventsCount,
-        expandedEvent,
         selectedEventTypes,
         hidePostHogProperties,
         hidePostHogFlags,
@@ -120,12 +128,12 @@ export const EventDebugMenu = (): JSX.Element => {
 
     return (
         <ToolbarMenu>
-            <ToolbarMenu.Header noPadding>
+            <ToolbarMenu.Header>
                 <div className="flex flex-col pb-2 space-y-1">
                     <div className="flex justify-center flex-col">
                         <SettingsBar border="bottom" className="justify-end">
                             <div className="flex-1 text-sm pl-1">
-                                View events from this page as they are sent to PostHog.
+                                View all events sent from this page as they are sent to PostHog.
                             </div>
                             <SettingsToggle
                                 label="Search"
@@ -150,32 +158,36 @@ export const EventDebugMenu = (): JSX.Element => {
                 <div className="flex flex-col space-y-1">
                     {activeFilteredEvents.length ? (
                         activeFilteredEvents.map((e) => {
+                            const expanded = e.uuid !== undefined && !isCollapsedEventRow(e.uuid)
+
                             return (
                                 <div
                                     className="-mx-1 py-1 px-2 cursor-pointer"
                                     key={e.uuid}
                                     onClick={() => {
-                                        expandedEvent === e.uuid ? markExpanded(null) : markExpanded(e.uuid || null)
+                                        expanded ? markExpanded(null) : markExpanded(e.uuid || null)
                                     }}
                                 >
-                                    <div className="flex flex-row justify-between hover:bg-bg-light hover:text-text-3000-light">
+                                    <div className="flex flex-row justify-between hover:bg-bg-light hover:text-text-3000">
                                         <EventTimestamp e={e} />
-                                        <PropertyKeyInfo
-                                            value={e.event}
-                                            type={TaxonomicFilterGroupType.Events}
-                                            disableIcon={true}
-                                        />
+
+                                        <div className="flex flex-row items-end gap-1">
+                                            <PropertyKeyInfo
+                                                disableIcon
+                                                value={e.event}
+                                                type={TaxonomicFilterGroupType.Events}
+                                            />
+                                            <IconChevronDown className={clsx(expanded ? 'rotate-180' : '')} />
+                                        </div>
                                     </div>
-                                    <AnimatedCollapsible
-                                        collapsed={e.uuid === undefined ? true : isCollapsedEventRow(e.uuid)}
-                                    >
+                                    {expanded && (
                                         <div className="my-1 ml-1 pl-2 border-l-2">
                                             <SimpleKeyValueList
                                                 item={expandedProperties}
                                                 emptyMessage={searchText ? 'No matching properties' : 'No properties'}
                                             />
                                         </div>
-                                    </AnimatedCollapsible>
+                                    )}
                                 </div>
                             )
                         })
@@ -188,8 +200,8 @@ export const EventDebugMenu = (): JSX.Element => {
                     )}
                 </div>
             </ToolbarMenu.Body>
-            <ToolbarMenu.Footer noPadding>
-                <SettingsBar border="top" className="justify-between">
+            <ToolbarMenu.Footer>
+                <SettingsBar border="none" className="justify-between">
                     <SettingsMenu
                         items={hideThingsMenuItems}
                         highlightWhenActive={false}

frontend/src/toolbar/debug/eventDebugMenuLogic.ts

@@ -144,33 +144,36 @@ export const eventDebugMenuLogic = kea<eventDebugMenuLogicType>([
                 if (!expandedEvent) {
                     return []
                 }
-                const theExpandedEvent = events.find((e) => e.uuid === expandedEvent)
-                if (!theExpandedEvent) {
+                const allProperties = events.find((e) => e.uuid === expandedEvent)?.properties
+                if (!allProperties) {
                     return []
                 }
 
-                const propsFiltered = hidePostHogProperties
+                const posthogPropertiesFiltered = hidePostHogProperties
                     ? Object.fromEntries(
-                          Object.entries(theExpandedEvent.properties).filter(([key]) => {
+                          Object.entries(allProperties).filter(([key]) => {
                               const isPostHogProperty = key.startsWith('$') && PROPERTY_KEYS.includes(key)
                               const isNonDollarPostHogProperty = CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key)
                               return !isPostHogProperty && !isNonDollarPostHogProperty
                           })
                       )
-                    : theExpandedEvent.properties
+                    : allProperties
 
-                return Object.fromEntries(
-                    Object.entries(propsFiltered).filter(([key]) => {
-                        if (hidePostHogFlags) {
-                            if (key === '$active_feature_flags') {
-                                return false
-                            } else if (key.startsWith('$feature/')) {
-                                return false
-                            }
-                        }
-                        return true
-                    })
-                )
+                const posthogFlagsFiltered = hidePostHogFlags
+                    ? Object.fromEntries(
+                          Object.entries(posthogPropertiesFiltered).filter(([key]) => {
+                              if (key === '$active_feature_flags') {
+                                  return false
+                              } else if (key.startsWith('$feature/')) {
+                                  return false
+                              }
+
+                              return true
+                          })
+                      )
+                    : posthogPropertiesFiltered
+
+                return posthogFlagsFiltered
             },
         ],
     }),

frontend/src/toolbar/elements/ElementInfo.tsx

@@ -8,28 +8,7 @@ import { elementsLogic } from '~/toolbar/elements/elementsLogic'
 import { heatmapLogic } from '~/toolbar/elements/heatmapLogic'
 
 import { actionsTabLogic } from '../actions/actionsTabLogic'
-
-function ElementStatistic({
-    prefix,
-    suffix,
-    title,
-    value,
-}: {
-    title: string
-    value: string | number
-    prefix?: string
-    suffix?: string
-}): JSX.Element {
-    return (
-        <div className="flex flex-col">
-            <div>{title}</div>
-            <div className="text-2xl">
-                {prefix}
-                {value} {suffix}
-            </div>
-        </div>
-    )
-}
+import { ElementStatistic } from './ElementStatistic'
 
 export function ElementInfo(): JSX.Element | null {
     const { clickCount: totalClickCount, dateRange } = useValues(heatmapLogic)
@@ -46,40 +25,33 @@ export function ElementInfo(): JSX.Element | null {
 
     return (
         <>
-            <div className="p-3 border-l-[5px] border-l-[#8F98FF] bg-[hsla(235,100%,99%,1)]">
+            <div className="p-3 border-l-[5px] border-l-warning bg-bg-light">
                 <h1 className="section-title">Selected Element</h1>
                 <ActionStep actionStep={actionStep} />
             </div>
+
             {position ? (
-                <div className="p-3 border-l-[5px] border-l-[#FF9870] bg-[hsla(19,99%,99%,1)]">
+                <div className="p-3 border-l-[5px] border-l-danger bg-bg-3000">
                     <h1 className="section-title">Stats</h1>
                     <p>
                         <IconCalendar /> <u>{dateRange}</u>
                     </p>
-                    <div className="flex flex-row gap-4">
-                        <div className="w-2/3">
-                            <ElementStatistic
-                                title="Clicks"
-                                value={count || 0}
-                                suffix={`/ ${totalClickCount} (${
-                                    totalClickCount === 0
-                                        ? '-'
-                                        : Math.round(((count || 0) / totalClickCount) * 10000) / 100
-                                }%)`}
-                            />
-                        </div>
-                        <div className="w-1/3">
-                            <ElementStatistic title="Ranking" prefix="#" value={position || 0} />
-                        </div>
-                    </div>
-                    <div className="flex flex-row gap-4 mt-2">
+                    <div className="grid grid-cols-[auto_1fr] gap-4">
+                        <ElementStatistic
+                            title="Clicks"
+                            value={count || 0}
+                            suffix={`/${totalClickCount} (${
+                                totalClickCount === 0 ? '?' : Math.round(((count || 0) / totalClickCount) * 10000) / 100
+                            }%)`}
+                        />
+                        <ElementStatistic title="Ranking" prefix="#" value={position || 0} />
                         <ElementStatistic title="Autocapture clicks" value={clickCount || 0} />
                         <ElementStatistic title="Rageclicks" value={rageclickCount || 0} />
                     </div>
                 </div>
             ) : null}
-            {}
-            <div className="p-3 border-l-[5px] border-l-[#94D674] bg-[hsla(100,74%,98%,1)]">
+
+            <div className="p-3 border-l-[5px] border-l-success bg-bg-3000">
                 {!automaticActionCreationEnabled && (
                     <>
                         <h1 className="section-title">Actions ({activeMeta.actions.length})</h1>

frontend/src/toolbar/elements/ElementInfoWindow.tsx

@@ -65,7 +65,7 @@ export function ElementInfoWindow(): JSX.Element | null {
 
     return (
         <div
-            className="absolute z-[1] opacity-100 origin-top-left transition-opacity transition-shadow duration-200 bg-white"
+            className="absolute z-[1] opacity-100 origin-top-left transition-opacity duration-200"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 pointerEvents: pointerEvents ? 'all' : 'none',
@@ -81,13 +81,12 @@ export function ElementInfoWindow(): JSX.Element | null {
             {onClose ? (
                 <div
                     onClick={onClose}
-                    className="absolute origin-top-left bg-[#000] text-white rounded-full w-6 h-6 z-[7] flex items-center justify-around text-center cursor-pointer"
+                    className="absolute origin-top-left bg-bg-3000 rounded-full w-6 h-6 z-[7] flex items-center justify-around text-center cursor-pointer"
                     // eslint-disable-next-line react/forbid-dom-props
                     style={{
                         pointerEvents: pointerEvents ? 'all' : 'none',
                         top: -8,
                         right: left + width > windowWidth - 20 ? -6 : -12,
-                        boxShadow: `hsla(4, 30%, 27%, 0.6) 0px 3px 10px 2px`,
                     }}
                 >
                     <IconX />
@@ -96,11 +95,7 @@ export function ElementInfoWindow(): JSX.Element | null {
             <div
                 className="overflow-auto rounded-lg"
                 // eslint-disable-next-line react/forbid-dom-props
-                style={{
-                    minHeight,
-                    maxHeight,
-                    boxShadow: `hsla(4, 30%, 27%, 0.6) 0px 3px 10px 2px`,
-                }}
+                style={{ minHeight, maxHeight }}
             >
                 <ElementInfo />
             </div>

frontend/src/toolbar/elements/ElementStatistic.tsx

@@ -0,0 +1,19 @@
+type ElementStatisticProps = {
+    title: string
+    value: string | number
+    prefix?: string
+    suffix?: string
+}
+
+export function ElementStatistic({ title, value, prefix, suffix }: ElementStatisticProps): JSX.Element {
+    return (
+        <div className="flex flex-col">
+            <div>{title}</div>
+            <div className="text-2xl">
+                {prefix}
+                {value}
+                {suffix}
+            </div>
+        </div>
+    )
+}

frontend/src/toolbar/elements/Elements.scss

@@ -1,5 +1,15 @@
+@import '../../styles/vars';
+
 #posthog-toolbar-elements,
 #posthog-infowindow-container {
-    color: #333;
-    pointer-events: none;
+    color: var(--text-3000);
+
+    &[theme='dark'] {
+        @include dark-mode-3000-variables;
+    }
+
+    @include common-variables;
+
+    // default to light theme
+    @include light-mode-3000-variables;
 }