style(3000): Use new Central icons

PostHog · Jul 25, 2023 · 8ed5b59 · 8ed5b59
1 parent e12eab9
commit 8ed5b59
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 41 deletions.
diff --git 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
@@ -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,81 +32,81 @@ 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,
         },
     ],
     [
         {
             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,
         },
     ],
     [
         {
             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
@@ -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
@@ -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