Make the art responsive

PostHog · Dec 5, 2023 · e820572 · e820572
1 parent ee8791c
commit e820572
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss
@@ -1,11 +1,13 @@
-.welcome-card {
+.SidePanelWelcome__card {
     background: var(--primary-alt-highlight-3000);
 
     body[theme='dark'] & {
         background: #2b2b33;
     }
 }
 
-.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
@@ -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 => (
@@ -98,7 +100,7 @@ export const SidePanelWelcome = (): JSX.Element => {
                 </div>
             </div>
             <div className="flex flex-col mx-4 mb-6 flex-1">
-                <div className="hero-art -mx-4 pt-4 pl-4 mb-4 border-b">
+                <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>