separate scss files and remove reset of top bar

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

@@ -14,7 +14,6 @@ import { ProjectNotice } from '../navigation/ProjectNotice'
 import { MinimalNavigation } from './components/MinimalNavigation'
 import { Navbar } from './components/Navbar'
 import { Sidebar } from './components/Sidebar'
-import { TopBar } from './components/TopBar'
 import { navigation3000Logic } from './navigationLogic'
 import { SidePanel } from './sidepanel/SidePanel'
 import { themeLogic } from './themeLogic'
@@ -51,8 +50,6 @@ export function Navigation({
                 {activeNavbarItem && <Sidebar key={activeNavbarItem.identifier} navbarItem={activeNavbarItem} />}
             </FlaggedFeature>
             <main>
-                <TopBar />
-
                 <div
                     className={clsx(
                         'Navigation3000__scene',

frontend/src/layout/navigation-3000/components/TopBar.scss

@@ -1,5 +1,4 @@
 // TODO: Remove legacy scss files
-@import '../../navigation/TopBar/TopBar';
 @import '../../navigation/SideBar/SideBar';
 
 .TopBar3000 {

frontend/src/layout/navigation/TopBar/Announcement.scss

@@ -0,0 +1,51 @@
+@import '../../../styles/mixins';
+
+.Announcement {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    height: 3rem;
+    padding: 0 1rem 0 0.5rem; // padding is larger on the right to accommodate the close button
+    font-size: 1rem;
+    font-weight: 500;
+    color: white;
+    text-align: center;
+    background: #000;
+    transition: margin 200ms ease;
+
+    &.Announcement--hidden {
+        margin-top: -3rem;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    b,
+    strong {
+        font-weight: 700;
+    }
+
+    a {
+        color: var(--brand-red);
+        text-decoration: underline;
+    }
+
+    @include screen($sm) {
+        padding: 0 1rem;
+    }
+}
+
+.Announcement__close {
+    position: absolute;
+    right: 0.5rem;
+    display: flex;
+    padding: 0.125rem;
+    font-size: 1.25rem;
+    cursor: pointer;
+
+    @include screen($sm) {
+        right: 1rem;
+    }
+}

frontend/src/layout/navigation/TopBar/Announcement.tsx

@@ -1,3 +1,5 @@
+import './Announcement.scss'
+
 import { LemonButton, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'

frontend/src/layout/navigation/TopBar/SitePopover.scss

@@ -0,0 +1,46 @@
+@import '../../../styles/mixins';
+
+.SitePopover {
+    min-width: 16rem;
+    max-width: 22rem;
+}
+
+.SitePopover__side-link {
+    margin-left: 0.5rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--primary-3000);
+    text-align: right;
+}
+
+.SitePopover__section {
+    width: 100%;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--border);
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+        border-bottom: none;
+    }
+}
+
+.AccountInfo {
+    display: flex;
+    align-items: center;
+}
+
+.AccountInfo__identification {
+    width: 100%;
+    margin-left: 0.5rem;
+    overflow: hidden;
+}
+
+.AccessLevelIndicator {
+    margin-left: 0.5rem;
+    font-size: 0.625rem;
+    text-transform: uppercase;
+}

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -1,3 +1,5 @@
+import './SitePopover.scss'
+
 import { IconFeatures, IconLive } from '@posthog/icons'
 import { LemonButtonPropsBase } from '@posthog/lemon-ui'
 import clsx from 'clsx'

frontend/src/layout/navigation/TopBar/YearInHogButton.scss

@@ -2,3 +2,57 @@
     background-color: var(--bg-3000);
     border-radius: var(--radius);
 }
+
+.CheekyHog {
+    position: absolute;
+    top: -0.2rem;
+    animation-timing-function: ease-out;
+    animation-delay: 0s;
+    animation-fill-mode: both;
+}
+
+.CheekyHog--peek {
+    animation-name: CheekyHog__Peek;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+}
+
+.CheekyHog--hide {
+    animation-name: CheekyHog__Hide;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+}
+
+@keyframes CheekyHog__Peek {
+    0% {
+        left: 0;
+        transform: rotate(0);
+    }
+
+    50% {
+        left: -0.5rem;
+        transform: rotate(-20deg);
+    }
+
+    100% {
+        left: -1.45rem;
+        transform: rotate(-45deg);
+    }
+}
+
+@keyframes CheekyHog__Hide {
+    0% {
+        left: -1.45rem;
+        transform: rotate(-45deg);
+    }
+
+    50% {
+        left: -0.5rem;
+        transform: rotate(-20deg);
+    }
+
+    100% {
+        left: 0;
+        transform: rotate(0);
+    }
+}