Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(3000): added welcome pane artwork #19109

Merged
merged 15 commits into from
Dec 6, 2023
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/3000/3000-launch.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
.welcome-card {
.SidePanelWelcome__card {
background: var(--primary-alt-highlight-3000);

body[theme='dark'] & {
background: #2b2b33;
}
}

.SidePanelWelcome__hero {
background: url('../../../../../public/3000/3000-launch.png') no-repeat;
background-position: right min(-5rem + 45%, 0rem) bottom;
background-size: 22.875rem auto;
}
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}

const Row = ({ className, columns, children }: RowProps): JSX.Element => (
<div className={clsx('mb-6 gap-5 grid', className)} style={{ gridTemplateColumns: columns ? columns : '100%' }}>

Check warning on line 36 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

style should be avoided in favor of utility CSS classes - see https://storybook.posthog.net/?path=/docs/lemon-ui-utilities--overview
{children}
</div>
)
Expand All @@ -44,7 +44,9 @@
}

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 => (
Expand All @@ -65,7 +67,7 @@
width?: number | string
height?: number | string
style?: React.CSSProperties
}): JSX.Element => <img src={src} alt={alt} width={width} height={height} style={style} className="mt-2" />

Check warning on line 70 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

style should be avoided in favor of utility CSS classes - see https://storybook.posthog.net/?path=/docs/lemon-ui-utilities--overview

export const SidePanelWelcome = (): JSX.Element => {
const { closeSidePanel } = useActions(sidePanelStateLogic)
Expand Down Expand Up @@ -97,30 +99,31 @@
</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-3 opacity-75" style={{ maxWidth: 'calc(50% - 1rem)' }}>

Check warning on line 109 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

style should be avoided in favor of utility CSS classes - see https://storybook.posthog.net/?path=/docs/lemon-ui-utilities--overview
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>

Check warning on line 125 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

<Row> is forbidden, use flex utility classes instead, e.g. <Row align="middle"> could be <div className="flex items-center">
<Card>

Check warning on line 126 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

<Card> is forbidden, use utility classes instead
<Title>Dark mode</Title>
<Description>
Toggle between light and dark. Synced with your system by&nbsp;default.
Expand All @@ -136,8 +139,8 @@
</Card>
</Row>

<Row className="grid grid-cols-2" columns="40% calc(60% - 1.25rem)">

Check warning on line 142 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

<Row> is forbidden, use flex utility classes instead, e.g. <Row align="middle"> could be <div className="flex items-center">
<Card>

Check warning on line 143 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

<Card> is forbidden, use utility classes instead
<Title>Updated nav</Title>
<Description>Sub-products are now split out from project &&nbsp;data.</Description>
<div className="-mr-4 -mb-3">
Expand All @@ -149,7 +152,7 @@
/>
</div>
</Card>
<Card>

Check warning on line 155 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

<Card> is forbidden, use utility classes instead
<Title>Notebooks</Title>
<Description>
Analyze data from different angles and share results with your team - all in
Expand All @@ -166,8 +169,8 @@
</Card>
</Row>

<Row>

Check warning on line 172 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

<Row> is forbidden, use flex utility classes instead, e.g. <Row align="middle"> could be <div className="flex items-center">
<Card>

Check warning on line 173 in frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

View workflow job for this annotation

GitHub Actions / Code quality checks

<Card> is forbidden, use utility classes instead
<div className="grid grid-cols-2 gap-5 items-center">
<div>
<Title>Side panel</Title>
Expand Down
Loading