fix: Some issues with onboarding for 3000

frontend/src/layout/navigation-3000/Navigation.scss

@@ -15,6 +15,12 @@
         min-width: 0;
         overflow: auto;
     }
+
+    .BridgePage {
+        background: none;
+        height: 100%;
+        overflow: visible;
+    }
 }
 
 .Navigation3000__scene {

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

@@ -12,6 +12,7 @@ import { SceneConfig } from 'scenes/sceneTypes'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { SidePanel } from './sidepanel/SidePanel'
+import { MinimalNavigation } from './components/MinimalNavigation'
 
 export function Navigation({
     children,
@@ -21,16 +22,22 @@ export function Navigation({
     sceneConfig: SceneConfig | null
 }): JSX.Element {
     useMountedLogic(themeLogic)
-    const { activeNavbarItem } = useValues(navigation3000Logic)
+    const { activeNavbarItem, mode } = useValues(navigation3000Logic)
 
     useEffect(() => {
         // FIXME: Include debug notice in a non-obstructing way
         document.getElementById('bottom-notice')?.remove()
     }, [])
 
-    if (sceneConfig?.layout === 'plain') {
-        return <>{children}</>
+    if (mode !== 'full') {
+        return (
+            <div className="Navigation3000 flex-col">
+                {mode === 'minimal' ? <MinimalNavigation /> : null}
+                <main>{children}</main>
+            </div>
+        )
     }
+
     return (
         <div className="Navigation3000">
             <Navbar />
@@ -42,6 +49,7 @@ export function Navigation({
                 <div
                     className={clsx(
                         'Navigation3000__scene',
+                        // Hack - once we only have 3000 the "minimal" scenes should become "app-raw"
                         sceneConfig?.layout === 'app-raw' && 'Navigation3000__scene--raw'
                     )}
                 >

frontend/src/layout/navigation-3000/components/MinimalNavigation.tsx

@@ -0,0 +1,54 @@
+import { LemonButton, Lettermark, Popover, ProfilePicture } from '@posthog/lemon-ui'
+import { ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
+import { SitePopoverOverlay } from '~/layout/navigation/TopBar/SitePopover'
+import { useValues, useActions } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+import { navigationLogic } from '~/layout/navigation/navigationLogic'
+import { userLogic } from 'scenes/userLogic'
+import { IconLogomark } from '@posthog/icons'
+import { urls } from 'scenes/urls'
+
+export function MinimalNavigation(): JSX.Element {
+    const { user } = useValues(userLogic)
+
+    const { currentTeam } = useValues(teamLogic)
+    const { isSitePopoverOpen, isProjectSwitcherShown } = useValues(navigationLogic)
+    const { closeSitePopover, toggleSitePopover, toggleProjectSwitcher, hideProjectSwitcher } =
+        useActions(navigationLogic)
+
+    return (
+        <nav className="flex items-center justify-between gap-2 p-2">
+            <span className="flex-1">
+                <LemonButton icon={<IconLogomark />} to={urls.projectHomepage()} />
+            </span>
+            <Popover
+                overlay={<ProjectSwitcherOverlay onClickInside={hideProjectSwitcher} />}
+                visible={isProjectSwitcherShown}
+                onClickOutside={hideProjectSwitcher}
+                placement="right-start"
+            >
+                <LemonButton
+                    type="secondary"
+                    icon={<Lettermark name={currentTeam?.name} />}
+                    onClick={toggleProjectSwitcher}
+                >
+                    {currentTeam?.name ?? 'Current project'}
+                </LemonButton>
+            </Popover>
+            <Popover
+                overlay={<SitePopoverOverlay />}
+                visible={isSitePopoverOpen}
+                onClickOutside={closeSitePopover}
+                placement="right-end"
+            >
+                <LemonButton
+                    type="secondary"
+                    icon={<ProfilePicture name={user?.first_name} email={user?.email} size="md" />}
+                    onClick={toggleSitePopover}
+                >
+                    {user?.first_name || user?.email}
+                </LemonButton>
+            </Popover>
+        </nav>
+    )
+}

frontend/src/layout/navigation-3000/components/Navbar.tsx

@@ -96,6 +96,7 @@ export function Navbar(): JSX.Element {
                             title="Project settings"
                             to={urls.settings('project')}
                         />
+
                         <Popover
                             overlay={<SitePopoverOverlay />}
                             visible={isSitePopoverOpen}

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

@@ -1,4 +1,4 @@
-import { actions, events, kea, listeners, path, props, reducers, selectors } from 'kea'
+import { actions, connect, events, kea, listeners, path, props, reducers, selectors } from 'kea'
 import { subscriptions } from 'kea-subscriptions'
 import { BasicListItem, ExtendedListItem, NavbarItem, SidebarNavbarItem } from './types'
 
@@ -42,6 +42,8 @@ import { isNotNil } from 'lib/utils'
 /** Multi-segment item keys are joined using this separator for easy comparisons. */
 export const ITEM_KEY_PART_SEPARATOR = '::'
 
+export type Navigation3000Mode = 'none' | 'minimal' | 'full'
+
 const MINIMUM_SIDEBAR_WIDTH_PX: number = 192
 const DEFAULT_SIDEBAR_WIDTH_PX: number = 288
 const MAXIMUM_SIDEBAR_WIDTH_PX: number = 1024
@@ -50,6 +52,9 @@ const MAXIMUM_SIDEBAR_WIDTH_PERCENTAGE: number = 50
 export const navigation3000Logic = kea<navigation3000LogicType>([
     path(['layout', 'navigation-3000', 'navigationLogic']),
     props({} as { inputElement?: HTMLInputElement | null }),
+    connect(() => ({
+        values: [sceneLogic, ['sceneConfig']],
+    })),
     actions({
         hideSidebar: true,
         showSidebar: (newNavbarItemId?: string) => ({ newNavbarItemId }),
@@ -278,6 +283,16 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
         },
     })),
     selectors({
+        mode: [
+            (s) => [s.sceneConfig],
+            (sceneConfig): Navigation3000Mode => {
+                return sceneConfig?.layout === 'plain' && !sceneConfig.allowUnauthenticated
+                    ? 'minimal'
+                    : sceneConfig?.layout !== 'plain'
+                    ? 'full'
+                    : 'none'
+            },
+        ],
         navbarItems: [
             () => [featureFlagLogic.selectors.featureFlags],
             (featureFlags): NavbarItem[][] => {

frontend/src/layout/navigation/navigationLogic.ts

@@ -10,7 +10,6 @@ import { userLogic } from 'scenes/userLogic'
 import type { navigationLogicType } from './navigationLogicType'
 import { membersLogic } from 'scenes/organization/membersLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { Scene } from 'scenes/sceneTypes'
 
 export type ProjectNoticeVariant =
     | 'demo_project'
@@ -22,7 +21,7 @@ export type ProjectNoticeVariant =
 export const navigationLogic = kea<navigationLogicType>([
     path(['layout', 'navigation', 'navigationLogic']),
     connect(() => ({
-        values: [sceneLogic, ['sceneConfig', 'activeScene'], membersLogic, ['members', 'membersLoading']],
+        values: [sceneLogic, ['sceneConfig'], membersLogic, ['members', 'membersLoading']],
         actions: [eventUsageLogic, ['reportProjectNoticeDismissed']],
     })),
     actions({
@@ -121,10 +120,9 @@ export const navigationLogic = kea<navigationLogicType>([
             (fullscreen, sceneConfig) => fullscreen || sceneConfig?.layout === 'plain',
         ],
         minimalTopBar: [
-            (s) => [s.activeScene],
-            (activeScene) => {
-                const minimalTopBarScenes = [Scene.Products, Scene.Onboarding]
-                return activeScene && minimalTopBarScenes.includes(activeScene)
+            (s) => [s.sceneConfig],
+            (sceneConfig) => {
+                return sceneConfig?.layout === 'plain' && !sceneConfig.allowUnauthenticated
             },
         ],
         isSideBarShown: [

frontend/src/lib/components/BridgePage/BridgePage.scss

@@ -6,7 +6,8 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    overflow: scroll;
+    overflow: hidden;
+    height: 100vh;
 
     &::-webkit-scrollbar {
         width: 0 !important;

frontend/src/lib/components/BridgePage/BridgePage.tsx

@@ -9,7 +9,6 @@ import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { Region } from '~/types'
 
 export type BridgePageCommonProps = {
-    className?: string
     children?: React.ReactNode
     footer?: React.ReactNode
     header?: React.ReactNode
@@ -18,7 +17,6 @@ export type BridgePageCommonProps = {
     sideLogo?: boolean
     fixedWidth?: boolean
     leftContainerContent?: JSX.Element
-    fullScreen?: boolean
 }
 
 interface NoHedgehogProps extends BridgePageCommonProps {
@@ -36,7 +34,6 @@ type BridgePageProps = NoHedgehogProps | YesHedgehogProps
 
 export function BridgePage({
     children,
-    className,
     header,
     footer,
     view,
@@ -46,7 +43,6 @@ export function BridgePage({
     fixedWidth = true,
     leftContainerContent,
     hedgehog = false,
-    fullScreen = true,
 }: BridgePageProps): JSX.Element {
     const [messageShowing, setMessageShowing] = useState(false)
     const { preflight } = useValues(preflightLogic)
@@ -59,14 +55,7 @@ export function BridgePage({
     }, [])
 
     return (
-        <div
-            className={clsx(
-                'BridgePage',
-                fixedWidth && 'BridgePage--fixed-width',
-                fullScreen && 'h-screen overflow-hidden',
-                className
-            )}
-        >
+        <div className={clsx('BridgePage', fixedWidth && 'BridgePage--fixed-width')}>
             <div className="BridgePage__main">
                 {leftContainerContent || hedgehog ? (
                     <div className="BridgePage__left-wrapper">
@@ -108,7 +97,7 @@ export function BridgePage({
                     <div className="BridgePage__content">{children}</div>
                 </div>
             </div>
-            <div className="BridgePage__footer">{footer}</div>
+            {footer && <div className="BridgePage__footer">{footer}</div>}
         </div>
     )
 }

frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx

@@ -7,6 +7,7 @@ import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { router, combineUrl } from 'kea-router'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 
 interface SocialLoginLinkProps {
     provider: SSOProvider
@@ -113,13 +114,15 @@ interface SSOEnforcedLoginButtonProps {
 }
 
 export function SSOEnforcedLoginButton({ provider, email }: SSOEnforcedLoginButtonProps): JSX.Element {
+    const is3000 = useFeatureFlag('POSTHOG_3000')
     return (
         <SocialLoginLink provider={provider} extraQueryParams={{ email }}>
             <LemonButton
                 className="btn-bridge"
                 data-attr="sso-login"
                 htmlType="button"
                 type="secondary"
+                size={is3000 ? 'large' : 'medium'}
                 fullWidth
                 center
                 icon={SocialLoginIcon(provider)}

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

@@ -17,10 +17,18 @@
 
     &:hover:not([aria-disabled='true']) {
         border-color: var(--primary-3000-hover);
+
+        .posthog-3000 & {
+            border-color: var(--border-bold);
+        }
     }
 
     &.LemonInput--focused:not([aria-disabled='true']) {
         border-color: var(--primary-3000);
+
+        .posthog-3000 & {
+            border-color: var(--border-bold);
+        }
     }
 
     &.LemonInput--transparent-background {

frontend/src/scenes/authentication/Login.tsx

@@ -16,6 +16,7 @@ import RegionSelect from './RegionSelect'
 import { redirectIfLoggedInOtherInstance } from './redirectToLoggedInInstance'
 import { captureException } from '@sentry/react'
 import { SupportModalButton } from './SupportModalButton'
+import { useButtonStyle } from './useButtonStyles'
 
 export const ERROR_MESSAGES: Record<string, string | JSX.Element> = {
     no_new_organizations:
@@ -55,6 +56,7 @@ export function Login(): JSX.Element {
 
     const passwordInputRef = useRef<HTMLInputElement>(null)
     const isPasswordHidden = precheckResponse.status === 'pending' || precheckResponse.sso_enforcement
+    const buttonStyles = useButtonStyle()
 
     useEffect(() => {
         if (preflight?.cloud) {
@@ -146,6 +148,7 @@ export function Login(): JSX.Element {
                             type="primary"
                             center
                             loading={isLoginSubmitting || precheckResponseLoading}
+                            {...buttonStyles}
                         >
                             Log in
                         </LemonButton>

frontend/src/scenes/authentication/Login2FA.tsx

@@ -6,10 +6,13 @@ import { Field } from 'lib/forms/Field'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonButton, LemonInput } from '@posthog/lemon-ui'
 import { BridgePage } from 'lib/components/BridgePage/BridgePage'
+import { useButtonStyle } from './useButtonStyles'
 
 export function Login2FA(): JSX.Element {
     const { isTwofactortokenSubmitting, generalError } = useValues(login2FALogic)
     const { preflight } = useValues(preflightLogic)
+    const buttonStyles = useButtonStyle()
+
     return (
         <BridgePage
             view="login"
@@ -44,6 +47,7 @@ export function Login2FA(): JSX.Element {
                         type="primary"
                         center
                         loading={isTwofactortokenSubmitting}
+                        {...buttonStyles}
                     >
                         Login
                     </LemonButton>