chore(3000): Buttons 3000 (#18534)

PostHog · Nov 16, 2023 · fb3af1c · fb3af1c
1 parent ff67436
commit fb3af1c
Show file tree

Hide file tree

Showing 25 changed files with 730 additions and 297 deletions.
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png
diff --git a/...tend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png b/...tend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png
diff --git a/frontend/__snapshots__/scenes-app-saved-insights--card-view.png b/frontend/__snapshots__/scenes-app-saved-insights--card-view.png
diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss
@@ -52,7 +52,14 @@
 
         .LemonButton {
             min-height: 2.25rem !important; // Reduce minimum height
-            padding: 0.375rem !important; // Use a custom padding for the navbar only
+
+            > span {
+                padding: 0.25rem !important;
+            }
+
+            .LemonButton__content {
+                font-size: 0.813rem;
+            }
         }
 
         ul {
@@ -64,7 +71,7 @@
         }
 
         li + li {
-            margin-top: 1px;
+            margin-top: 0.25rem;
         }
     }
 }

diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
@@ -45,7 +45,7 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
             if (tag === 'alpha') {
                 content = (
                     <>
-                        {content}
+                        <span className="grow">{content}</span>
                         <LemonTag type="completion" size="small" className="ml-2">
                             ALPHA
                         </LemonTag>
@@ -54,7 +54,7 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
             } else if (tag === 'beta') {
                 content = (
                     <>
-                        {content}
+                        <span className="grow">{content}</span>
                         <LemonTag type="warning" size="small" className="ml-2">
                             BETA
                         </LemonTag>
@@ -75,6 +75,8 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
             }}
             className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
             fullWidth
+            type="secondary"
+            stealth={true}
             {...buttonProps}
         >
             {content}

diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
@@ -98,6 +98,8 @@ export function SidePanel(): JSX.Element | null {
                                 }
                                 data-attr={`sidepanel-tab-${tab}`}
                                 active={activeTab === tab}
+                                type="secondary"
+                                stealth={true}
                             >
                                 {label}
                             </LemonButton>

diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -194,7 +194,6 @@ export function FilterBasedCardContent({
         <BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}>
             <div
                 className="InsightCard__viz"
-                // eslint-disable-next-line react/forbid-dom-props
                 onClick={
                     setAreDetailsShown
                         ? () => {

diff --git a/frontend/src/lib/components/Cards/TextCard/TextCard.tsx b/frontend/src/lib/components/Cards/TextCard/TextCard.tsx
@@ -32,7 +32,6 @@ interface TextCardBodyProps extends Pick<React.HTMLAttributes<HTMLDivElement>, '
 
 export function TextContent({ text, closeDetails, className }: TextCardBodyProps): JSX.Element {
     return (
-        // eslint-disable-next-line react/forbid-dom-props
         <div className={clsx('p-2 w-full overflow-auto', className)} onClick={() => closeDetails?.()}>
             <LemonMarkdown>{text}</LemonMarkdown>
         </div>

diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
@@ -68,6 +68,10 @@
         &.hover {
             background-color: var(--primary-bg-hover);
             border-radius: var(--radius);
+
+            .posthog-3000 & {
+                background-color: var(--bg-3000);
+            }
         }
 
         &.selected {

diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
@@ -5,10 +5,6 @@
     display: flex;
     flex-direction: column;
 
-    .posthog-3000 & {
-        background: var(--bg-3000);
-    }
-
     &.force-minimum-width {
         min-width: 300px;
     }