fix(3000): interface triangulator (#21194)

PostHog · Mar 28, 2024 · df98bd9 · df98bd9
1 parent 1e20025
commit df98bd9
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 9 deletions.
diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx
@@ -1,7 +1,7 @@
 import './Navigation.scss'
 
 import clsx from 'clsx'
-import { useMountedLogic, useValues } from 'kea'
+import { useValues } from 'kea'
 import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2'
 import { CommandBar } from 'lib/components/CommandBar/CommandBar'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
@@ -27,21 +27,23 @@ export function Navigation({
     children: ReactNode
     sceneConfig: SceneConfig | null
 }): JSX.Element {
-    useMountedLogic(themeLogic)
+    const { theme } = useValues(themeLogic)
     const { mobileLayout } = useValues(navigationLogic)
     const { activeNavbarItem, mode } = useValues(navigation3000Logic)
 
     if (mode !== 'full') {
         return (
-            <div className="Navigation3000 flex-col">
+            // eslint-disable-next-line react/forbid-dom-props
+            <div className="Navigation3000 flex-col" style={theme?.mainStyle}>
                 {mode === 'minimal' ? <MinimalNavigation /> : null}
                 <main>{children}</main>
             </div>
         )
     }
 
     return (
-        <div className={clsx('Navigation3000', mobileLayout && 'Navigation3000--mobile')}>
+        // eslint-disable-next-line react/forbid-dom-props
+        <div className={clsx('Navigation3000', mobileLayout && 'Navigation3000--mobile')} style={theme?.mainStyle}>
             <Navbar />
             <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000_NAV}>
                 {activeNavbarItem && <Sidebar key={activeNavbarItem.identifier} navbarItem={activeNavbarItem} />}

diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -15,12 +15,14 @@ import { userLogic } from 'scenes/userLogic'
 
 import { navigationLogic } from '~/layout/navigation/navigationLogic'
 import { AccountPopoverOverlay } from '~/layout/navigation/TopBar/AccountPopover'
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 
 import { navigation3000Logic } from '../navigationLogic'
 import { KeyboardShortcut } from './KeyboardShortcut'
 import { NavbarButton } from './NavbarButton'
 
 export function Navbar(): JSX.Element {
+    const { theme } = useValues(themeLogic)
     const { user } = useValues(userLogic)
     const { isAccountPopoverOpen, systemStatusHealthy } = useValues(navigationLogic)
     const { closeAccountPopover, toggleAccountPopover } = useActions(navigationLogic)
@@ -34,7 +36,11 @@ export function Navbar(): JSX.Element {
     return (
         <>
             <nav className={clsx('Navbar3000', !isNavShown && 'Navbar3000--hidden')} ref={containerRef}>
-                <div className="Navbar3000__content">
+                <div
+                    className="Navbar3000__content"
+                    // eslint-disable-next-line react/forbid-dom-props
+                    style={theme?.sidebarStyle}
+                >
                     <ScrollableShadows innerClassName="Navbar3000__top" direction="vertical">
                         {navbarItems.map((section, index) => (
                             <ul key={index}>

diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
@@ -13,6 +13,7 @@ import {
     SidePanelExports,
     SidePanelExportsIcon,
 } from '~/layout/navigation-3000/sidepanel/panels/exports/SidePanelExports'
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { SidePanelTab } from '~/types'
 
 import { SidePanelActivation, SidePanelActivationIcon } from './panels/activation/SidePanelActivation'
@@ -91,6 +92,7 @@ export const SIDE_PANEL_TABS: Record<
 const DEFAULT_WIDTH = 512
 
 export function SidePanel(): JSX.Element | null {
+    const { theme } = useValues(themeLogic)
     const { visibleTabs, extraTabs } = useValues(sidePanelLogic)
     const { selectedTab, sidePanelOpen, modalMode } = useValues(sidePanelStateLogic)
     const { openSidePanel, closeSidePanel, setSidePanelAvailable } = useActions(sidePanelStateLogic)
@@ -170,6 +172,7 @@ export function SidePanel(): JSX.Element | null {
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 width: sidePanelOpenAndAvailable ? desiredWidth ?? DEFAULT_WIDTH : undefined,
+                ...(theme?.sidebarStyle ?? {}),
             }}
         >
             <Resizer {...resizerLogicProps} />

diff --git a/frontend/src/layout/navigation-3000/themeLogic.ts b/frontend/src/layout/navigation-3000/themeLogic.ts
@@ -1,16 +1,20 @@
 import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
 import { userLogic } from 'scenes/userLogic'
 
 import type { themeLogicType } from './themeLogicType'
+import { Theme, themes } from './themes'
 
 export const themeLogic = kea<themeLogicType>([
     path(['layout', 'navigation-3000', 'themeLogic']),
     connect({
-        values: [userLogic, ['themeMode']],
+        values: [userLogic, ['themeMode'], featureFlagLogic, ['featureFlags']],
     }),
     actions({
         syncDarkModePreference: (darkModePreference: boolean) => ({ darkModePreference }),
+        setTheme: (theme: string | null) => ({ theme }),
     }),
     reducers({
         darkModeSystemPreference: [
@@ -19,11 +23,32 @@ export const themeLogic = kea<themeLogicType>([
                 syncDarkModePreference: (_, { darkModePreference }) => darkModePreference,
             },
         ],
+        selectedTheme: [
+            null as string | null,
+            { persist: true },
+            {
+                setTheme: (_, { theme }) => theme,
+            },
+        ],
     }),
     selectors({
+        theme: [
+            (s) => [s.selectedTheme, s.featureFlags],
+            (selectedTheme, featureFlags): Theme | null => {
+                const flagVariant = featureFlags[FEATURE_FLAGS.THEME]
+                return (
+                    (selectedTheme ? themes.find((theme) => theme.id === selectedTheme) : null) ??
+                    (typeof flagVariant === 'string' ? themes.find((theme) => theme.id === flagVariant) : null) ??
+                    null
+                )
+            },
+        ],
         isDarkModeOn: [
-            (s) => [s.themeMode, s.darkModeSystemPreference, sceneLogic.selectors.sceneConfig],
-            (themeMode, darkModeSystemPreference, sceneConfig) => {
+            (s) => [s.themeMode, s.darkModeSystemPreference, sceneLogic.selectors.sceneConfig, s.theme],
+            (themeMode, darkModeSystemPreference, sceneConfig, theme) => {
+                if (theme) {
+                    return !!theme?.dark
+                }
                 // NOTE: Unauthenticated users always get the light mode until we have full support across onboarding flows
                 if (
                     sceneConfig?.layout === 'plain' ||

diff --git a/frontend/src/layout/navigation-3000/themes.ts b/frontend/src/layout/navigation-3000/themes.ts
@@ -0,0 +1,43 @@
+export interface Theme {
+    id: string
+    name: string
+    dark?: boolean
+    sidebarStyle?: React.CSSProperties
+    mainStyle?: React.CSSProperties
+    boxStyle?: React.CSSProperties
+}
+
+export const themes: Theme[] = [
+    {
+        id: 'bleachedTom',
+        name: 'Hi, My name is Tom, and I am the light.',
+        dark: false,
+        sidebarStyle: {
+            background:
+                'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(https://www.shutterstock.com/image-photo/soft-wave-blue-ocean-on-600nw-396969259.jpg)',
+        },
+        mainStyle: {
+            background:
+                'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(https://pbs.twimg.com/profile_images/1237550450/mstom_400x400.jpg)',
+        },
+        boxStyle: {
+            background: 'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7))',
+        },
+    },
+    {
+        id: 'developers',
+        name: 'Developers, Developers, Developers, Developers',
+        dark: false,
+        sidebarStyle: {
+            background:
+                'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOWM2eDhveXRrNTJrdGZ5bmdhaGJrZWNqczFiZzUzMXF5aXc5azljNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/2yuiXIlW8TwY2raAPB/giphy-downsized-large.gif)',
+        },
+        mainStyle: {
+            background:
+                'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExa3ljdm5mczV3dnQza3lqY3E1czEyd3J0d3A4ZmtqbGE3a2JybTJlMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l3q2zbskZp2j8wniE/giphy-downsized-large.gif)',
+        },
+        boxStyle: {
+            background: 'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7))',
+        },
+    },
+]
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -28,6 +28,7 @@ import { Paths } from 'scenes/paths/Paths'
 import { RetentionContainer } from 'scenes/retention/RetentionContainer'
 import { ActionsHorizontalBar, ActionsLineGraph, ActionsPie } from 'scenes/trends/viz'
 
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic'
 import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
 import { insightVizDataCollectionId, insightVizDataNodeKey } from '~/queries/nodes/InsightViz/InsightViz'
@@ -259,6 +260,7 @@ function InsightCardInternal(
     }: InsightCardProps,
     ref: React.Ref<HTMLDivElement>
 ): JSX.Element {
+    const { theme } = useValues(themeLogic)
     const insightLogicProps: InsightLogicProps = {
         dashboardItemId: insight.short_id,
         dashboardId: dashboardId,
@@ -298,6 +300,8 @@ function InsightCardInternal(
             className={clsx('InsightCard border', highlighted && 'InsightCard--highlighted', className)}
             data-attr="insight-card"
             {...divProps}
+            // eslint-disable-next-line react/forbid-dom-props
+            style={{ ...(divProps?.style ?? {}), ...(theme?.boxStyle ?? {}) }}
             ref={ref}
         >
             <BindLogic logic={insightLogic} props={insightLogicProps}>

diff --git a/frontend/src/lib/components/CompactList/CompactList.tsx b/frontend/src/lib/components/CompactList/CompactList.tsx
@@ -1,9 +1,12 @@
 import './CompactList.scss'
 
+import { useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
 import { EmptyMessage, EmptyMessageProps } from '../EmptyMessage/EmptyMessage'
 
 interface CompactListProps {
@@ -23,8 +26,13 @@ export function CompactList({
     emptyMessage,
     renderRow,
 }: CompactListProps): JSX.Element {
+    const { theme } = useValues(themeLogic)
     return (
-        <div className="CompactList">
+        <div
+            className="CompactList"
+            // eslint-disable-next-line react/forbid-dom-props
+            style={theme?.boxStyle}
+        >
             <div className="CompactList__header">
                 <h3 className="px-2 truncate" title={title}>
                     {title}

diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -214,6 +214,7 @@ export const FEATURE_FLAGS = {
     SUBSCRIBE_FROM_PAYGATE: 'subscribe-from-paygate', // owner: #team-growth
     REVERSE_PROXY_ONBOARDING: 'reverse-proxy-onboarding', // owner: @zlwaterfield
     SESSION_REPLAY_MOBILE_ONBOARDING: 'session-replay-mobile-onboarding', // owner: #team-replay
+    THEME: 'theme', // owner: @aprilfools
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]