feat(3000): added welcome pane artwork (#19109)

* added welcome pane artwork * Update UI snapshots for `chromium` (1) * Make the art responsive * Update UI snapshots for `chromium` (1) * updated text * max-width is working now! * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Use digits for better text flow --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Michael Matloka <[email protected]>
PostHog · Dec 6, 2023 · d0de79a · d0de79a
1 parent fd8c7c8
commit d0de79a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 24 deletions.
diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-welcome.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-welcome.png
diff --git a/frontend/public/3000/3000-launch.png b/frontend/public/3000/3000-launch.png
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss
@@ -1,7 +1,13 @@
-.welcome-card {
+.SidePanelWelcome__card {
     background: var(--primary-alt-highlight-3000);
 
     body[theme='dark'] & {
-        background: #2b2b33;
+        background: #2a2b31; // One-off for cards, do not use anywhere else
     }
 }
+
+.SidePanelWelcome__hero {
+    background: url('../../../../../public/3000/3000-launch.png') no-repeat;
+    background-position: right min(-5rem + 45%, 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
@@ -44,7 +44,9 @@ type CardProps = {
 }
 
 const Card = ({ children, className }: CardProps): JSX.Element => (
-    <div className={clsx('welcome-card border rounded-md px-4 py-3 w-full overflow-hidden', className)}>{children}</div>
+    <div className={clsx('SidePanelWelcome__card border rounded-md px-4 py-3 w-full overflow-hidden', className)}>
+        {children}
+    </div>
 )
 
 const Title = ({ children }: { children: React.ReactNode }): JSX.Element => (
@@ -97,27 +99,28 @@ export const SidePanelWelcome = (): JSX.Element => {
                     </button>
                 </div>
             </div>
-            <div className="flex flex-col m-4 my-6 flex-1">
-                <h1 className="font-bold text-xl mb-2 w-full">
-                    👋 Say hello to
-                    <div className="text-primary-3000 text-4xl">PostHog&nbsp;3000</div>
-                </h1>
-                <p className="max-w-120 text-sm font-medium mb-3 opacity-75">
-                    We're past zero to one.
-                    <br />
-                    In this new version of PostHog, we're going from one… to&nbsp;3000.
-                    <br />
-                    And this is just the beginning.
-                </p>
-                <LemonButton
-                    to={BLOG_POST_URL}
-                    targetBlank
-                    type="primary"
-                    sideIcon={<IconExternal className="text-xl" />}
-                    className="mb-5 self-start"
-                >
-                    Read the blog post
-                </LemonButton>
+            <div className="flex flex-col mx-4 mb-6 flex-1">
+                <div className="SidePanelWelcome__hero -mx-4 pt-4 pl-4 mb-4 border-b">
+                    <h1 className="font-semibold text-base mb-2 w-full">
+                        👋 <span className="opacity-75">Say hello to</span>
+                        <div className="text-primary-3000 text-2xl font-bold">PostHog 3000</div>
+                    </h1>
+                    <p className="text-sm font-medium mb-3 opacity-75">We're past 0 to 1.</p>
+                    <p className="text-sm font-medium mb-4 opacity-75" style={{ maxWidth: 'calc(50% - 1rem)' }}>
+                        It's time to go from 1 to&nbsp;3000. And&nbsp;this is just the&nbsp;beginning…
+                    </p>
+                    <div className="flex">
+                        <LemonButton
+                            to={BLOG_POST_URL}
+                            targetBlank
+                            type="primary"
+                            sideIcon={<IconExternal className="text-xl" />}
+                            className="mb-5 self-start"
+                        >
+                            Read the blog post
+                        </LemonButton>
+                    </div>
+                </div>
 
                 <Row>
                     <Card>