style(3000): Use new Central icons (#16463)

* style(3000): Use new Central icons

* Use prefixed icons

* Use new icons

* Remove `width` rule

* Change Lemon `IconNotebook` to Material

* Fix icon width

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Fix notebook icon coloring

* Update UI snapshots for `chromium` (2)

---------

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

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 { IconQuestion, IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { Scene } from 'scenes/sceneTypes'
@@ -24,7 +24,7 @@ export function Navbar(): JSX.Element {
         useValues(themeLogic)
     const { toggleTheme } = useActions(themeLogic)
 
-    const activeThemeIcon = isDarkModeOn ? <IconDarkMode /> : <IconLightMode />
+    const activeThemeIcon = isDarkModeOn ? <IconNight /> : <IconDay />
 
     return (
         <nav className="Navbar3000">
@@ -63,7 +63,7 @@ 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={<IconAsterisk />} />
                                     </div>
                                 ) : (
                                     activeThemeIcon
@@ -84,16 +84,12 @@ export function Navbar(): JSX.Element {
                         />
                         <HelpButton
                             customComponent={
-                                <NavbarButton
-                                    icon={<IconHelpOutline />}
-                                    identifier="help-button"
-                                    title="Need any help?"
-                                />
+                                <NavbarButton icon={<IconQuestion />} identifier="help-button" title="Need any help?" />
                             }
                             placement="right-end"
                         />
                         <NavbarButton
-                            icon={<IconSettings />}
+                            icon={<IconGear />}
                             identifier={Scene.ProjectSettings}
                             to={urls.projectSettings()}
                         />

frontend/src/layout/navigation-3000/navbarItems.tsx

@@ -1,18 +1,18 @@
 import {
+    IconHome,
+    IconDashboard,
+    IconDatabase,
     IconApps,
-    IconBarChart,
-    IconCohort,
-    IconComment,
-    IconCottage,
-    IconExperiment,
-    IconFlag,
-    IconGauge,
-    IconLive,
     IconPerson,
-    IconRecording,
-    IconTools,
-    IconUnverifiedEvent,
-} from 'lib/lemon-ui/icons'
+    IconQuestion,
+    IconPeople,
+    IconTestTube,
+    IconToggle,
+    IconRewindPlay,
+    IconGraph,
+    IconToolbar,
+    IconLive,
+} from '@posthog/icons'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 import { NavbarItem } from './types'
@@ -32,19 +32,19 @@ export const NAVBAR_ITEMS: NavbarItem[][] = [
         {
             identifier: Scene.ProjectHomepage,
             label: 'Project homepage',
-            icon: <IconCottage />,
+            icon: <IconHome />,
             to: urls.projectHomepage(),
         },
         {
             identifier: Scene.Dashboards,
             label: 'Dashboards',
-            icon: <IconGauge />,
+            icon: <IconDashboard />,
             logic: dashboardsSidebarLogic,
         },
         {
             identifier: Scene.DataManagement,
             label: 'Data management',
-            icon: <IconUnverifiedEvent />,
+            icon: <IconDatabase />,
             logic: dataManagementSidebarLogic,
         },
         {
@@ -56,13 +56,13 @@ export const NAVBAR_ITEMS: NavbarItem[][] = [
         {
             identifier: Scene.Cohorts,
             label: 'Cohorts',
-            icon: <IconCohort />,
+            icon: <IconPeople />,
             logic: cohortsSidebarLogic,
         },
         {
             identifier: Scene.Annotations,
             label: 'Annotations',
-            icon: <IconComment />,
+            icon: <IconQuestion />, // TODO: Should be bubble
             logic: annotationsSidebarLogic,
         },
     ],
@@ -75,30 +75,30 @@ export const NAVBAR_ITEMS: NavbarItem[][] = [
         {
             identifier: Scene.SavedInsights,
             label: 'Product Analytics',
-            icon: <IconBarChart />,
+            icon: <IconGraph />,
             logic: insightsSidebarLogic,
         },
         {
             identifier: Scene.Replay,
             label: 'Session Replay',
-            icon: <IconRecording />,
+            icon: <IconRewindPlay />,
         },
         {
             identifier: Scene.FeatureFlags,
             label: 'Feature Flags',
-            icon: <IconFlag />,
+            icon: <IconToggle />,
             logic: featureFlagsSidebarLogic,
         },
         {
             identifier: Scene.Experiments,
             label: 'A/B Testing',
-            icon: <IconExperiment />,
+            icon: <IconTestTube />,
             logic: experimentsSidebarLogic,
         },
         {
             identifier: Scene.ToolbarLaunch,
             label: 'Toolbar',
-            icon: <IconTools />,
+            icon: <IconToolbar />,
             logic: toolbarSidebarLogic,
         },
     ],

frontend/src/layout/navigation-3000/types.ts

@@ -35,7 +35,6 @@ export interface SidebarNavbarItem extends NavbarItemBase {
     logic: LogicWrapper<SidebarLogic>
 }
 /** A navbar item either points to a sidebar (via a sidebar logic) or directly to a scene (via a URL). */
-// TODO: Remove NavbarItemBase from NavbarItem once all 3000 navbar items are interactive
 export type NavbarItem = NavbarItemBase | SceneNavbarItem | SidebarNavbarItem
 
 export type ListItemSaveHandler = (newName: string) => Promise<void>

frontend/src/lib/lemon-ui/Spinner/Spinner.scss

@@ -24,9 +24,9 @@
         opacity: 0.333;
     }
     &:nth-child(2) {
-        animation: spin 1.5s infinite linear;
+        animation: spin 1s infinite linear;
         > circle {
-            animation: writhe 2.25s infinite ease both;
+            animation: writhe 1.5s infinite ease both;
         }
     }
 }

frontend/src/lib/lemon-ui/icons/icons.scss

@@ -1,4 +1,5 @@
 .LemonIcon {
     display: inline-block;
     vertical-align: -0.15em; // -0.15em ensures vertical centering in inline contexts
+    width: 1em;
 }

frontend/src/lib/lemon-ui/icons/icons.tsx

@@ -2466,11 +2466,8 @@ export function IconNotebook(props: LemonIconProps): JSX.Element {
     return (
         <LemonIconBase {...props}>
             <path
-                d="M8.75 3.25H5.25C4.69772 3.25 4.25 3.69772 4.25 4.25V19.75C4.25 20.3023 4.69772 20.75 5.25 20.75H8.75M8.75 3.25H18.75C19.3023 3.25 19.75 3.69772 19.75 4.25V19.75C19.75 20.3023 19.3023 20.75 18.75 20.75H8.75M8.75 3.25V20.75M12.75 7.75H15.75M12.75 11.75H15.75"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
+                d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 4h2v5l-1-.75L9 9V4zm9 16H6V4h1v9l3-2.25L13 13V4h5v16z"
+                fill="currentColor"
             />
         </LemonIconBase>
     )

package.json

@@ -74,6 +74,7 @@
         "@medv/finder": "^2.1.0",
         "@microlink/react-json-view": "^1.21.3",
         "@monaco-editor/react": "4.4.6",
+        "@posthog/icons": "^0.1.3",
         "@posthog/plugin-scaffold": "^1.3.2",
         "@react-hook/size": "^2.1.2",
         "@rrweb/types": "^2.0.0-alpha.11",