diff --git a/frontend/__snapshots__/components-command-bar--actions.png b/frontend/__snapshots__/components-command-bar--actions.png index 302fb86f50402..51681536cafe3 100644 Binary files a/frontend/__snapshots__/components-command-bar--actions.png and b/frontend/__snapshots__/components-command-bar--actions.png differ diff --git a/frontend/__snapshots__/components-command-bar--search.png b/frontend/__snapshots__/components-command-bar--search.png index 54dff6f4974bf..45ec5c93fd8b5 100644 Binary files a/frontend/__snapshots__/components-command-bar--search.png and b/frontend/__snapshots__/components-command-bar--search.png differ diff --git a/frontend/__snapshots__/posthog-3000-keyboard-shortcut--default.png b/frontend/__snapshots__/posthog-3000-keyboard-shortcut--default.png index 1f8990c3a32c8..995c1bc753ad1 100644 Binary files a/frontend/__snapshots__/posthog-3000-keyboard-shortcut--default.png and b/frontend/__snapshots__/posthog-3000-keyboard-shortcut--default.png differ diff --git a/frontend/__snapshots__/posthog-3000-keyboard-shortcut--muted.png b/frontend/__snapshots__/posthog-3000-keyboard-shortcut--muted.png index 091bda66799ec..995c1bc753ad1 100644 Binary files a/frontend/__snapshots__/posthog-3000-keyboard-shortcut--muted.png and b/frontend/__snapshots__/posthog-3000-keyboard-shortcut--muted.png differ diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png index db71a2726588c..bf6d08b1cb083 100644 Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png differ diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png index 3c1f2a921338a..87cd957353f8c 100644 Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png b/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png index d6e7ef6b4a71f..04209a125f40b 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png and b/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png differ diff --git a/frontend/__snapshots__/scenes-other-settings--settings-project.png b/frontend/__snapshots__/scenes-other-settings--settings-project.png index 7e0fee45a376d..227e1bac41f89 100644 Binary files a/frontend/__snapshots__/scenes-other-settings--settings-project.png and b/frontend/__snapshots__/scenes-other-settings--settings-project.png differ diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss index 29d1076ffe7aa..1620ab43cb0ab 100644 --- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss +++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss @@ -3,28 +3,25 @@ } .KeyboardShortcut__key { - display: inline-flex; align-items: center; - justify-content: center; - height: 1.25rem; - min-width: 1.25rem; - padding: 0 0.1875rem; + background: var(--accent-3000); border-radius: 0.125rem; border-width: 1px; - background: var(--accent-3000); color: var(--default); + display: inline-flex; + height: 1.25rem; + justify-content: center; + min-width: 1.25rem; + padding: 0 0.1875rem; text-transform: capitalize; .posthog-3000 & { - text-transform: uppercase; - border-radius: 0.25rem; border-bottom-width: 2px; + border-color: var(--secondary-3000-button-border-hover); + border-radius: 0.25rem; font-size: 0.625rem; padding: 0.125rem 0.25rem; - } - - .posthog-3000[theme='dark'] & { - border-color: var(--muted-3000); + text-transform: uppercase; } .KeyboardShortcut--muted > & { diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx index a636defcd78dd..877a7fb8601b8 100644 --- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx +++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx @@ -34,11 +34,11 @@ export function KeyboardShortcut({ muted, ...keys }: KeyboardShortcutProps): JSX ) as HotKeyOrModifier[] return ( - + {sortedKeys.map((key) => ( - - {KEY_TO_SYMBOL[key] || key} - + {KEY_TO_SYMBOL[key] || key} ))} ) diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx index ac9898f6063a9..ff405fab4d3fa 100644 --- a/frontend/src/layout/navigation-3000/components/Navbar.tsx +++ b/frontend/src/layout/navigation-3000/components/Navbar.tsx @@ -1,6 +1,6 @@ import { LemonBadge } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' -import { IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons' +import { IconGear, IconDay, IconNight, IconAsterisk, IconSearch } from '@posthog/icons' import { Popover } from 'lib/lemon-ui/Popover' import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture' import { Scene } from 'scenes/sceneTypes' @@ -14,6 +14,9 @@ import { urls } from 'scenes/urls' import { featureFlagLogic } from 'lib/logic/featureFlagLogic' import { Resizer } from 'lib/components/Resizer/Resizer' import { useRef } from 'react' +import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic' +import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut' +import { useFeatureFlag } from 'lib/hooks/useFeatureFlag' export function Navbar(): JSX.Element { const { user } = useValues(userLogic) @@ -25,10 +28,12 @@ export function Navbar(): JSX.Element { useValues(themeLogic) const { toggleTheme } = useActions(themeLogic) const { featureFlags } = useValues(featureFlagLogic) + const { toggleSearchBar } = useActions(commandBarLogic) const activeThemeIcon = isDarkModeOn ? : const containerRef = useRef(null) + const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV') return (