From 8ed5b59099cd55ee16ce3dc4fcbc251262cbc841 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Mon, 10 Jul 2023 17:16:27 +0200
Subject: [PATCH] style(3000): Use new Central icons

---
 .../navigation-3000/components/Navbar.tsx     | 23 ++++----
 .../layout/navigation-3000/navbarItems.tsx    | 54 +++++++++----------
 .../lib/lemon-ui/LemonButton/LemonButton.scss |  1 +
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 15 +++++-
 5 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
index c2921515bfbd8..25eb770e5092d 100644
--- a/frontend/src/layout/navigation-3000/components/Navbar.tsx
+++ b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -1,7 +1,7 @@
 import { LemonBadge } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'
-import { IconDarkMode, IconHelpOutline, IconLightMode, IconSettings, IconSync } from 'lib/lemon-ui/icons'
+import { LightBulb, Question, Gear } from '@posthog/icons'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { Scene } from 'scenes/sceneTypes'
@@ -13,6 +13,7 @@ import { NAVBAR_ITEMS } from '../navbarItems'
 import { themeLogic } from '../themeLogic'
 import { NavbarButton } from './NavbarButton'
 import { urls } from 'scenes/urls'
+import { IconSync } from 'lib/lemon-ui/icons'
 
 export function Navbar(): JSX.Element {
     const { user } = useValues(userLogic)
@@ -24,7 +25,7 @@ export function Navbar(): JSX.Element {
         useValues(themeLogic)
     const { toggleTheme } = useActions(themeLogic)
 
-    const activeThemeIcon = isDarkModeOn ? <IconDarkMode /> : <IconLightMode />
+    const activeThemeIcon = isDarkModeOn ? <LightBulb /> : <LightBulb /> // TODO
 
     return (
         <nav className="Navbar3000">
@@ -63,7 +64,11 @@ export function Navbar(): JSX.Element {
                                 isThemeSyncedWithSystem ? (
                                     <div className="relative">
                                         {activeThemeIcon}
-                                        <LemonBadge size="small" position="top-right" content={<IconSync />} />
+                                        <LemonBadge
+                                            size="small"
+                                            position="top-right"
+                                            content={<IconSync /> /* TODO */}
+                                        />
                                     </div>
                                 ) : (
                                     activeThemeIcon
@@ -84,19 +89,11 @@ export function Navbar(): JSX.Element {
                         />
                         <HelpButton
                             customComponent={
-                                <NavbarButton
-                                    icon={<IconHelpOutline />}
-                                    identifier="help-button"
-                                    title="Need any help?"
-                                />
+                                <NavbarButton icon={<Question />} identifier="help-button" title="Need any help?" />
                             }
                             placement="right-end"
                         />
-                        <NavbarButton
-                            icon={<IconSettings />}
-                            identifier={Scene.ProjectSettings}
-                            to={urls.projectSettings()}
-                        />
+                        <NavbarButton icon={<Gear />} identifier={Scene.ProjectSettings} to={urls.projectSettings()} />
                         <Popover
                             overlay={<SitePopoverOverlay />}
                             visible={isSitePopoverOpen}
diff --git a/frontend/src/layout/navigation-3000/navbarItems.tsx b/frontend/src/layout/navigation-3000/navbarItems.tsx
index 6628c1bfed15e..ca8dfae19167b 100644
--- a/frontend/src/layout/navigation-3000/navbarItems.tsx
+++ b/frontend/src/layout/navigation-3000/navbarItems.tsx
@@ -1,18 +1,18 @@
 import {
-    IconApps,
-    IconBarChart,
-    IconCohort,
-    IconComment,
-    IconCottage,
-    IconExperiment,
-    IconFlag,
-    IconGauge,
-    IconLive,
-    IconPerson,
-    IconRecording,
-    IconTools,
-    IconUnverifiedEvent,
-} from 'lib/lemon-ui/icons'
+    Home,
+    Dashboard,
+    Database,
+    Apps,
+    Person,
+    Question,
+    GridMasonry,
+    People,
+    TestTube,
+    Toggle,
+    RewindPlay,
+    Graph,
+    Toolbar,
+} from '@posthog/icons'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 import { NavbarItem } from './types'
@@ -32,37 +32,37 @@ export const NAVBAR_ITEMS: NavbarItem[][] = [
         {
             identifier: Scene.ProjectHomepage,
             label: 'Project homepage',
-            icon: <IconCottage />,
+            icon: <Home />,
             to: urls.projectHomepage(),
         },
         {
             identifier: Scene.Dashboards,
             label: 'Dashboards',
-            icon: <IconGauge />,
+            icon: <Dashboard />,
             logic: dashboardsSidebarLogic,
         },
         {
             identifier: Scene.DataManagement,
             label: 'Data management',
-            icon: <IconUnverifiedEvent />,
+            icon: <Database />,
             logic: dataManagementSidebarLogic,
         },
         {
             identifier: Scene.Persons,
             label: 'Persons and groups',
-            icon: <IconPerson />,
+            icon: <Person />,
             logic: personsAndGroupsSidebarLogic,
         },
         {
             identifier: Scene.Cohorts,
             label: 'Cohorts',
-            icon: <IconCohort />,
+            icon: <People />,
             logic: cohortsSidebarLogic,
         },
         {
             identifier: Scene.Annotations,
             label: 'Annotations',
-            icon: <IconComment />,
+            icon: <Question />, // TODO: Should be bubble
             logic: annotationsSidebarLogic,
         },
     ],
@@ -70,35 +70,35 @@ export const NAVBAR_ITEMS: NavbarItem[][] = [
         {
             identifier: Scene.Events,
             label: 'Events',
-            icon: <IconLive />,
+            icon: <GridMasonry />, // TODO: Should be live signal
         },
         {
             identifier: Scene.SavedInsights,
             label: 'Product Analytics',
-            icon: <IconBarChart />,
+            icon: <Graph />,
             logic: insightsSidebarLogic,
         },
         {
             identifier: Scene.Replay,
             label: 'Session Replay',
-            icon: <IconRecording />,
+            icon: <RewindPlay />,
         },
         {
             identifier: Scene.FeatureFlags,
             label: 'Feature Flags',
-            icon: <IconFlag />,
+            icon: <Toggle />,
             logic: featureFlagsSidebarLogic,
         },
         {
             identifier: Scene.Experiments,
             label: 'A/B Testing',
-            icon: <IconExperiment />,
+            icon: <TestTube />,
             logic: experimentsSidebarLogic,
         },
         {
             identifier: Scene.ToolbarLaunch,
             label: 'Toolbar',
-            icon: <IconTools />,
+            icon: <Toolbar />,
             logic: toolbarSidebarLogic,
         },
     ],
@@ -106,7 +106,7 @@ export const NAVBAR_ITEMS: NavbarItem[][] = [
         {
             identifier: Scene.Plugins,
             label: 'Apps',
-            icon: <IconApps />,
+            icon: <Apps />,
         },
     ],
 ]
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
index f1bf192d3bbd4..d444efd1935fa 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -121,6 +121,7 @@
     .LemonButton__icon {
         display: flex;
         font-size: 1.5rem;
+        width: 1em;
         flex-shrink: 0;
         transition: color 200ms ease;
         justify-items: center;
diff --git a/package.json b/package.json
index d8039f0f3e824..bece5c048b885 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
         "@lottiefiles/react-lottie-player": "^3.4.7",
         "@medv/finder": "^2.1.0",
         "@monaco-editor/react": "4.4.6",
+        "@posthog/icons": "^0.0.2",
         "@posthog/plugin-scaffold": "^1.3.2",
         "@react-hook/size": "^2.1.2",
         "@rrweb/types": "^2.0.0-alpha.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e8ce59747b972..2d5d24488c1c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   '@monaco-editor/react':
     specifier: 4.4.6
     version: 4.4.6(monaco-editor@0.39.0)(react-dom@16.14.0)(react@16.14.0)
+  '@posthog/icons':
+    specifier: ^0.0.2
+    version: 0.0.2(react-dom@16.14.0)(react@16.14.0)
   '@posthog/plugin-scaffold':
     specifier: ^1.3.2
     version: 1.3.4
@@ -3172,6 +3175,16 @@ packages:
     resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
     dev: false
 
+  /@posthog/icons@0.0.2(react-dom@16.14.0)(react@16.14.0):
+    resolution: {integrity: sha512-9AOJBfYSpOKPPKvQ5i4UNPuj7bXaPvnzCDOXEk/XLMs47lI1/4OagW8ZreAhQPo0VykYgymPRSo336esPjmd4g==}
+    peerDependencies:
+      react: ^18.2.0
+      react-dom: ^18.2.0
+    dependencies:
+      react: 16.14.0
+      react-dom: 16.14.0(react@16.14.0)
+    dev: false
+
   /@posthog/plugin-scaffold@1.3.4:
     resolution: {integrity: sha512-69AC7GA3sU/z5X6SVlH7mgj+0XgolvOp9IUtvRNA4CXF/OglFM81SXbTkURxL9VBSNfdAZxRp+8x+h4rmyj4dw==}
     dependencies:
@@ -13549,7 +13562,7 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
 
   /jsprim@2.0.2:
     resolution: {integrity: sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==}