Skip to content

Commit

Permalink
Clean up the panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@Twixes
Twixes committed Dec 5, 2023
1 parent bd7b40c commit 80febd0
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 69 deletions.
1 change: 0 additions & 1 deletion frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.welcome-card {
// background: var(--primary-alt-highlight-3000);
background: var(--primary-alt-highlight-3000);

body[theme='dark'] & {
Expand Down
132 changes: 64 additions & 68 deletions frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import './SidePanelWelcome.scss'

import { IconArrowLeft, IconEllipsis, IconExternal, IconX } from '@posthog/icons'
import { LemonButton } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import posthog from 'posthog-js'
import featureCommandPalette from 'public/3000/3000-command-palette.png'
Expand All @@ -18,37 +19,32 @@ import featureSidePanelDark from 'public/3000/3000-side-panel-dark.png'
import featureToolbar from 'public/3000/3000-toolbar.png'
import { useEffect } from 'react'

import { themeLogic } from '~/layout/navigation-3000/themeLogic'

import { KeyboardShortcut } from '../../components/KeyboardShortcut'
import { sidePanelStateLogic } from '../sidePanelStateLogic'

const blogPostUrl = 'https://posthog.com/blog/why-redesign'
const BLOG_POST_URL = 'https://posthog.com/blog/posthog-as-a-dev-tool'

type RowProps = {
className?: string
columns?: string
children: React.ReactNode
}

const Row = ({ className, columns, children }: RowProps): JSX.Element => (
<div className={`mb-6 gap-5 grid ${className}`} style={{ gridTemplateColumns: columns ? columns : '100%' }}>
const WelcomeRow = ({ 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>
)

type CardProps = {
width?: string
children: React.ReactNode
className?: string
}

const Card = ({ width, children, className }: CardProps): JSX.Element => (
<div
className={`welcome-card bg-accent-3000 border rounded-md px-4 py-3 w-full overflow-hidden ${
width ? width : 'w-full'
} ${className}`}
>
{children}
</div>
const WelcomeCard = ({ children, className }: CardProps): JSX.Element => (
<div className={clsx('welcome-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 @@ -58,8 +54,6 @@ const Description = ({ children }: { children: React.ReactNode }): JSX.Element =
<p className="text-sm opacity-75">{children}</p>
)

import { themeLogic } from '~/layout/navigation-3000/themeLogic'

export const SidePanelWelcome = (): JSX.Element => {
const { closeSidePanel } = useActions(sidePanelStateLogic)
const { isDarkModeOn } = useValues(themeLogic)
Expand All @@ -84,8 +78,7 @@ export const SidePanelWelcome = (): JSX.Element => {
<div className="flex-shrink">
<button
onClick={() => closeSidePanel()}
className="btn btn-sm btn-secondary cursor-pointer"
style={{ background: 'transparent' }}
className="btn btn-sm btn-secondary cursor-pointer bg-transparent"
>
<IconX className="text-lg" />
</button>
Expand All @@ -97,26 +90,26 @@ export const SidePanelWelcome = (): JSX.Element => {
<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 0 to 1. In this new version of PostHog, we're going from 1 to 3000. (And this is just the
beginning...)
We're past zero to one.
<br />
In this new version of PostHog, we're going from one… to 3000.
<br />
And this is just the beginning.
</p>
<div className="mb-6">
<LemonButton
to={blogPostUrl}
targetBlank
type="primary"
fullWidth={false}
style={{ display: 'inline-flex' }}
>
Read the blog post
<IconExternal className="ml-1 h-5 w-5" />
</LemonButton>
</div>

<Row>
<Card>
<LemonButton
to={BLOG_POST_URL}
targetBlank
type="primary"
sideIcon={<IconExternal className="text-xl" />}
className="mb-5"
>
Read the blog post
</LemonButton>

<WelcomeRow>
<WelcomeCard>
<Title>Dark mode</Title>
<Description>Toggle between light, dark, or sync with your system</Description>
<Description>Toggle between light and dark. Synced with your system by default.</Description>
<div className="-mr-4 -mb-3">
<img
src={featureDarkMode}
Expand All @@ -125,11 +118,11 @@ export const SidePanelWelcome = (): JSX.Element => {
style={{ borderTopLeftRadius: '0.25rem' }}

Check warning on line 118 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
/>
</div>
</Card>
</Row>
</WelcomeCard>
</WelcomeRow>

<Row className="grid grid-cols-2" columns="40% calc(60% - 1.25rem)">
<Card>
<WelcomeRow className="grid grid-cols-2" columns="40% calc(60% - 1.25rem)">
<WelcomeCard>
<Title>Updated nav</Title>
<Description>Products are now split out from project & data.</Description>
<div className="-mr-4 -mb-3">
Expand All @@ -140,8 +133,8 @@ export const SidePanelWelcome = (): JSX.Element => {
style={{ borderTopLeftRadius: '0.25rem' }}

Check warning on line 133 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
/>
</div>
</Card>
<Card>
</WelcomeCard>
<WelcomeCard>
<Title>Notebooks</Title>
<Description>
Analyze data from different angles and share results with your team - all in a single
Expand All @@ -155,16 +148,19 @@ export const SidePanelWelcome = (): JSX.Element => {
style={{ borderTopLeftRadius: '0.25rem' }}

Check warning on line 148 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
/>
</div>
</Card>
</Row>
</WelcomeCard>
</WelcomeRow>

<Row>
<Card>
<WelcomeRow>
<WelcomeCard>
<div className="grid grid-cols-2 gap-5 items-center">
<div>
<Title>Side panel</Title>
<Description>It’s this multipurpose thing you’re looking at right now!</Description>
<Description>Access docs, notebooks, contact support, and more.</Description>
<Description>
It's this multipurpose thing you're looking at right now!
<br />
Create notebook, read docs, contact support, and more.
</Description>
</div>
<div className="-mr-4 -my-3">
<img
Expand All @@ -175,14 +171,14 @@ export const SidePanelWelcome = (): JSX.Element => {
/>
</div>
</div>
</Card>
</Row>
</WelcomeCard>
</WelcomeRow>

<Row className="grid grid-cols-2" columns="calc(60% - 1.25rem) 40%">
<Card>
<WelcomeRow className="grid grid-cols-2" columns="calc(60% - 1.25rem) 40%">
<WelcomeCard>
<Title>Improved search</Title>
<Description>
Search for anything with <KeyboardShortcut command k />
Search for anything with <KeyboardShortcut command k />.
</Description>
<div className="-mr-4 -mb-3">
<img
Expand All @@ -192,12 +188,12 @@ export const SidePanelWelcome = (): JSX.Element => {
style={{ borderTopLeftRadius: '0.25rem' }}

Check warning on line 188 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
/>
</div>
</Card>
<Card className="flex flex-col">
</WelcomeCard>
<WelcomeCard className="flex flex-col">
<div className="flex-1">
<Title>Command palette</Title>
<Description>
Navigate faster with <KeyboardShortcut command shift k />
Navigate faster with <KeyboardShortcut command shift k />.
</Description>
</div>
<div className="-mr-4 -mb-3 flex-shrink">
Expand All @@ -208,31 +204,31 @@ export const SidePanelWelcome = (): JSX.Element => {
style={{ borderTopLeftRadius: '0.25rem' }}

Check warning on line 204 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
/>
</div>
</Card>
</Row>
</WelcomeCard>
</WelcomeRow>

<Row>
<Card>
<WelcomeRow>
<WelcomeCard>
<Title>Toolbar</Title>
<Description>
Same functionality, but easier to look at. And we finally put the <em>bar</em> in toolbar.
Also dark mode.
Dark mode on. Same functionality, but easier to use – we finally put the "<em>bar</em>" in
"toolbar".
</Description>
<div>
<img src={featureToolbar} alt="Toolbar" width={259} />
</div>
</Card>
</Row>
</WelcomeCard>
</WelcomeRow>

<div className="flex items-center gap-2 -mb-3">
<IconArrowLeft className="w-5 h-5" />
<p className="m-0">
<div className="-mb-3">
<IconArrowLeft className="text-base mr-2 inline" />
<span className="m-0">
<strong>Pro tip:</strong> Access this panel again from the{' '}
<span className="w-6 h-6 border p-1 rounded mx-1">
<IconEllipsis className="" />
<span className="text-base font border p-1 rounded mx-1 w-6 h-6 inline-flex align-middle">
<IconEllipsis />
</span>{' '}
menu
</p>
</span>
</div>
</div>
</>
Expand Down

0 comments on commit 80febd0

Please sign in to comment.