diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss index 1cda111bffca4..f6195230c0cae 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss +++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss @@ -1,4 +1,4 @@ -.welcome-card { +.SidePanelWelcome__card { background: var(--primary-alt-highlight-3000); body[theme='dark'] & { @@ -6,6 +6,8 @@ } } -.hero-art { - background: url('../../../../../public/3000/3000-launch.png') 400% 100% / 95% no-repeat; +.SidePanelWelcome__hero { + background: url('../../../../../public/3000/3000-launch.png') no-repeat; + background-position: right min(calc(-5rem + 75%), 0rem) bottom; + background-size: 22.875rem auto; } diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx index 5ea795716e484..d7f51979cc7bd 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx +++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx @@ -44,7 +44,9 @@ type CardProps = { } const Card = ({ children, className }: CardProps): JSX.Element => ( -
{children}
+
+ {children} +
) const Title = ({ children }: { children: React.ReactNode }): JSX.Element => ( @@ -98,7 +100,7 @@ export const SidePanelWelcome = (): JSX.Element => {
-
+

👋 Say hello to
PostHog 3000