diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--active--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--active--dark.png index 7ff855501ba44..2ea7a6a0b5af0 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--active--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--active--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--active--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--active--light.png index bdbdad9c33c30..3834d05eb5249 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--active--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--active--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--as-links--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--as-links--dark.png index fd8eb2e05ba08..6a53270f112d8 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--as-links--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--as-links--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--as-links--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--as-links--light.png index 4d8afc2142022..9e2bdac9d6737 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--as-links--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--as-links--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--default--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--default--dark.png index 699a1a4e5e4d5..b51f62f8762e3 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--default--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--default--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--default--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--default--light.png index f778b0439282a..40376bded0395 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--default--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--default--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--disabled-with-reason--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--disabled-with-reason--dark.png index 74b31ddb77194..87d9a6b72b037 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--disabled-with-reason--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--disabled-with-reason--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--disabled-with-reason--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--disabled-with-reason--light.png index 0f28786e0fbe0..1362a06181979 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--disabled-with-reason--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--disabled-with-reason--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--full-width--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--full-width--dark.png index b63e3339a6b68..beabbbe93cf4e 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--full-width--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--full-width--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--full-width--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--full-width--light.png index d718129f7907f..1856b67633292 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--full-width--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--full-width--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--loading--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--loading--dark.png index bc45e997e817c..15fffcbcd9515 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--loading--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--loading--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--loading--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--loading--light.png index 7010bef145683..e5add98d20b2a 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--loading--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--loading--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--loading.png b/frontend/__snapshots__/lemon-ui-lemon-button--loading.png index 802b2187b8169..0242c063f0781 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--loading.png and b/frontend/__snapshots__/lemon-ui-lemon-button--loading.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--menu-buttons--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--menu-buttons--dark.png index 73c2abebbe5c8..7310b67542d91 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--menu-buttons--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--menu-buttons--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--menu-buttons--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--menu-buttons--light.png index 2f43b54fd97f3..cc608b2f0ccc2 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--menu-buttons--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--menu-buttons--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--more--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--more--dark.png index f9c2569eb719a..6a159d15129ea 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--more--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--more--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--more--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--more--light.png index e254f362a5bb7..403010fe7a22c 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--more--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--more--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--no-padding--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--no-padding--dark.png index 2a4966cad0fdb..9a8171bf7d4a7 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--no-padding--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--no-padding--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--sizes--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--sizes--dark.png index cd4718833510a..63074b3cfd72a 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--sizes--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--sizes--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--sizes--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--sizes--light.png index 059dffd093401..26a89438937d4 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--sizes--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--sizes--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--dark.png index d6554973cad8a..c8d52e384f548 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--light.png index 27845dc2518ec..c8ae34ef7107c 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--text-only--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--text-only--dark.png index 78e1b2f4546e5..1954b0a962d2c 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--text-only--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--text-only--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--text-only--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--text-only--light.png index 1a35c75292b31..9fdeafd9ce01f 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--text-only--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--text-only--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png new file mode 100644 index 0000000000000..4b360e20e22f0 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png new file mode 100644 index 0000000000000..3b141807c7f47 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png new file mode 100644 index 0000000000000..920416789b607 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--dark.png index 6630658a65b2f..234e69c2ac746 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--light.png index 709979fd8c7bf..492184129e732 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses.png index 890069390aa00..d3cd52d1cce62 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-bottom--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-bottom--dark.png index 02d52eb16097f..97ee8deb0ddca 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-bottom--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-bottom--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-bottom--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-bottom--light.png index 1f688eb7250a0..4891510342aed 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-bottom--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-bottom--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-right--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-right--dark.png index 4870210c00208..76a583453b7d3 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-right--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-right--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-right--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-right--light.png index 7ddb04f2efb72..810241035e47b 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-right--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-dropdown-to-the-right--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--dark.png index 197c6b4ce1bd6..2f969f42a0736 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--light.png index 61f2518aa269a..b824c6b73d161 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action.png index 84872c5498474..51a84ba81aa51 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-icon--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-icon--dark.png index 09b14d5bbcde6..32ec7b140f4fc 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-icon--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-icon--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-icon--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-icon--light.png index 8809b1fd96925..4cf23f0453946 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-icon--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-icon--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-tooltip--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-tooltip--dark.png index 699a1a4e5e4d5..b51f62f8762e3 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-tooltip--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-tooltip--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-tooltip--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-tooltip--light.png index f778b0439282a..40376bded0395 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-tooltip--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-tooltip--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-very-long-popover-to-the-bottom--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-very-long-popover-to-the-bottom--dark.png index 02d52eb16097f..97ee8deb0ddca 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-very-long-popover-to-the-bottom--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-very-long-popover-to-the-bottom--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-very-long-popover-to-the-bottom--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-very-long-popover-to-the-bottom--light.png index 1f688eb7250a0..4891510342aed 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-very-long-popover-to-the-bottom--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-very-long-popover-to-the-bottom--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default--dark.png b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default--dark.png index cf25e4319c419..913ca748dbe4b 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default--light.png b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default--light.png index e083da92ceadb..eda659bff9eb1 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default--light.png and b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--default--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width--dark.png b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width--dark.png index cf25e4319c419..913ca748dbe4b 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width--light.png b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width--light.png index e083da92ceadb..eda659bff9eb1 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width--light.png and b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--full-width--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small--dark.png b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small--dark.png index 3c9e69eed118b..7e12d518b5a5e 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small--light.png b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small--light.png index 76a59f29f09fc..661b818ef6560 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small--light.png and b/frontend/__snapshots__/lemon-ui-lemon-segmented-button--small--light.png differ diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png index ce9955fdb7018..3a00c8642275d 100644 Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png differ diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png index 3569d06ddd29a..514a795a1d74e 100644 Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png index 1a4722fdb1a6f..e62b82ad36afb 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png differ diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png index 02d8f3f1691d6..795ebf75b07bd 100644 Binary files a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png differ diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png index e90259fc005da..00527eba0cf7c 100644 Binary files a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png differ diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-notebooks.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-notebooks.png index 3a9b22804f2f0..3db10cacc0263 100644 Binary files a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-notebooks.png and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-notebooks.png differ diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png index 556293aff86ee..569c9c9f33fba 100644 Binary files a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png differ diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss index 0a30317ba9af3..68787fb5643a0 100644 --- a/frontend/src/layout/navigation-3000/Navigation.scss +++ b/frontend/src/layout/navigation-3000/Navigation.scss @@ -78,7 +78,7 @@ background: var(--accent-3000); .LemonButton__chrome { - padding: 0.25rem !important; + --lemon-button-padding-horizontal: 0.25rem !important; } ul { @@ -88,10 +88,6 @@ ul + ul { border-top-width: 1px; } - - li + li { - margin-top: -1px; - } } } diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss index 19f18390369b9..946b01aefd9d2 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss +++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss @@ -71,20 +71,39 @@ .LemonButton { padding-right: 1px !important; // padding-bottom in regular buttons padding-bottom: 0 !important; - } - .LemonButton__chrome { - top: 0 !important; - left: -1px !important; // top in regular buttons - margin: -1px 0 !important; // x and y axes swapped from regular buttons - &:hover { - top: 0 !important; - left: -1.5px !important; // top in regular buttons + .LemonButton__chrome { + padding: 0.25rem + calc( + var(--lemon-button-padding-right, var(--lemon-button-padding-horizontal)) + + var(--lemon-button-chrome-depth) * 0.5 + ) + 0.25rem + calc( + var(--lemon-button-padding-left, var(--lemon-button-padding-horizontal)) - + var(--lemon-button-chrome-depth) * 0.5 + ) !important; + + &::after { + inset: -1px calc(var(--lemon-button-chrome-depth) - 1px) -1px -1px !important; + box-shadow: var(--lemon-button-chrome-depth) 0 0 -1px var(--lemon-button-frame-bg-color) !important; + } } - &:active { - top: 0 !important; - left: -0.5px !important; // top in regular buttons + &:hover:not([aria-disabled='true']), + &:not([aria-disabled='true']):active { + .LemonButton__chrome { + transform: translateX(var(--lemon-button-depth)) !important; + + &::after { + box-shadow: calc(var(--lemon-button-chrome-depth) - var(--lemon-button-depth)) 0 0 -1px var(--lemon-button-frame-bg-color) !important; + } + + &::before { + right: calc(var(--lemon-button-depth) - 1px) !important; + bottom: -1px !important; + } + } } } } diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss index 299745d01cb83..ba4a24b365b3a 100644 --- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss +++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss @@ -54,13 +54,6 @@ &.LemonButton--full-width { width: 100%; - padding-right: 0.5rem; - padding-left: 0.5rem; - - > span, - .LemonButton__content { - overflow: hidden; - } } &.LemonButton--centered { @@ -153,26 +146,6 @@ color: #fff !important; } } - - @each $status in ('primary', 'danger', 'primary-alt', 'muted') { - &.LemonButton--status-#{$status} { - // Primary - blocked color style - &.LemonButton--onboarding, - &.LemonButton--primary { - color: #fff; - background: var(--#{$status}-3000, var(--#{$status})); - - &:not([aria-disabled='true']):hover, - &.LemonButton--active { - color: #fff; - } - - &:not([aria-disabled='true']):active { - color: #fff; - } - } - } - } } .LemonButtonWithSideAction { diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx index 26edb911c1c8d..7673cb3b3b84a 100644 --- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx +++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx @@ -18,7 +18,7 @@ import { import { More } from './More' const statuses: LemonButtonProps['status'][] = ['primary', 'danger', 'primary-alt', 'muted', 'stealth'] -const types: LemonButtonProps['type'][] = ['onboarding', 'primary', 'secondary', 'tertiary'] +const types: LemonButtonProps['type'][] = ['primary', 'secondary', 'tertiary'] type Story = StoryObj const meta: Meta = { @@ -74,6 +74,83 @@ const TypesAndStatusesTemplate: StoryFn = (props) => { ) } +export const Types3000: Story = () => { + return ( +
+
type=BLOCK
+
+
+ }> + Primary + + }> + Primary Alt + + }> + Secondary + + }> + Destroy + + }> + Stealth + +
+
+
Active
+
+ }> + Primary + + }> + Primary Alt + + }> + Secondary + + }> + Destroy + + }> + Stealth + +
+
+
+
Light background
+
+ }> + Primary + + }> + Primary Alt + + }> + Secondary + + }> + Destroy + + }> + Stealth + +
+
+
+
type=MENU
+
+ }> + Primary + + }> + Danger + +
+
+ ) +} +Types3000.args = { ...Default.args } + export const TypesAndStatuses: Story = TypesAndStatusesTemplate.bind({}) TypesAndStatuses.args = { ...Default.args } diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx index a6fd8f19c96bd..087f10ea8558f 100644 --- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx +++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx @@ -31,7 +31,7 @@ export interface LemonButtonPropsBase | 'aria-haspopup' > { children?: React.ReactNode - type?: 'onboarding' | 'primary' | 'secondary' | 'tertiary' + type?: 'primary' | 'secondary' | 'tertiary' /** Button color scheme. */ status?: 'primary' | 'danger' | 'primary-alt' | 'muted' | 'stealth' /** Whether hover style should be applied, signaling that the button is held active in some way. */ diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss index 37ecf6d9703c5..c0eecbddab98e 100644 --- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss +++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss @@ -1,18 +1,28 @@ .posthog-3000 { + --lemon-button-chrome-depth: 0.1875rem; + --lemon-button-hover-depth: -0.03125rem; + --lemon-button-press-depth: 0.03125rem; + --lemon-button-padding-horizontal: 0.75rem; + --lemon-button-side-action-icon-width: 1.25rem; + .LemonButton, .Link.LemonButton { --lemon-button-transition: opacity 200ms ease, transform 200ms ease; --lemon-button-border-width: 0; + --lemon-button-bg-color: transparent; + --button-border-color: none; + --lemon-button-border-color-hover: none; + --lemon-button-frame-bg-color: none; + --lemon-button-font-size: 0.875rem; + --lemon-button-height: 2.3125rem; + --lemon-button-gap: 0.5rem; + --lemon-button-icon-opacity: 0.5; + --lemon-button-color: var(--default); position: relative; - min-height: 2.125rem; padding: 0; font-family: var(--font-title); cursor: pointer; - border-color: transparent; - border-style: solid; - border-width: var(--lemon-button-border-width); - border-radius: var(--radius); outline: none; transition: var(--lemon-button-transition); @@ -21,104 +31,60 @@ display: flex; flex-direction: row; flex-shrink: 0; - gap: 0.5rem; + gap: var(--lemon-button-gap); align-items: center; justify-content: flex-start; width: 100%; - min-height: 2.125rem; - padding: 0.25rem 0.75rem; - font-size: 0.875rem; + height: 100%; + min-height: var(--lemon-button-height); + padding: 0.25rem var(--lemon-button-padding-horizontal); + font-size: var(--lemon-button-font-size); font-weight: 500; line-height: 1.5rem; + color: var(--lemon-button-color); text-align: left; background: none; border-color: transparent; border-style: solid; border-width: var(--lemon-button-border-width); - border-radius: var(--radius); - transition: var(--transition); + + .LemonButton__content { + overflow: hidden; + } .LemonButton__icon { - opacity: 0.5; + opacity: var(--lemon-button-icon-opacity); } } + &:hover:not([aria-disabled='true']), + &:not([aria-disabled='true']):active { + --lemon-button-icon-opacity: 0.7; + } + &.LemonButton--full-width { - .LemonButton__chrome { - padding-right: 0.5rem; - padding-left: 0.5rem; - } + --lemon-button-padding-horizontal: 0.5rem; } &.LemonButton--xsmall { - min-height: 1.5rem; - padding-left: 0; - font-size: 0.8125rem; - - .LemonButton__chrome { - min-height: 1.5rem; - padding: 0.125rem 0.375rem; - } - - &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) { - .LemonButton__chrome { - padding-left: 0.25rem; - } - } - - &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) { - .LemonButton__chrome { - padding-right: 0.25rem; - } - } + --lemon-button-padding-horizontal: 0.375rem; + --lemon-button-padding-adjacent-icon: 0.25rem; + --lemon-button-font-size: 0.75rem; + --lemon-button-height: 1.6875rem; + --lemon-button-gap: 0.25rem; } &.LemonButton--small { - min-height: 1.75rem; - font-size: 0.8125rem; - - .LemonButton__chrome { - min-height: 1.75rem; - padding: 0.25rem 0.5rem; - } - - &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) { - .LemonButton__chrome { - padding-left: 0.375rem; - } - } - - &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) { - .LemonButton__chrome { - padding-right: 0.375rem; - } - } + --lemon-button-padding-horizontal: 0.5rem; + --lemon-button-padding-adjacent-icon: 0.375rem; + --lemon-button-height: 2.0625rem; } &.LemonButton--large { - min-height: 2.5rem; - - .LemonButton__chrome { - gap: 0.75rem; - min-height: 2.5rem; - padding: 0.5rem 1rem; - } - - &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) { - padding-left: 0; - - .LemonButton__chrome { - padding-left: 0.75rem; - } - } - - &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) { - padding-right: 0; - - .LemonButton__chrome { - padding-right: 0.75rem; - } - } + --lemon-button-font-size: 1rem; + --lemon-button-padding-adjacent-icon: 0.75rem; + --lemon-button-height: 3.0625rem; + --lemon-button-gap: 0.75rem; } &.LemonButton--no-padding { @@ -131,121 +97,161 @@ } } - &:not(.LemonButton--tertiary) { - padding-bottom: 1px; - - .LemonButton__chrome { - top: -1px; - margin: 0 -1px; - } - - &:not([aria-disabled='true']):hover, - &.LemonButton--active { - .LemonButton__chrome { - top: -1.5px; - } + &.LemonButton--primary { + --lemon-button-bg-color: var(--primary-3000-button-bg); + --lemon-button-bg-color-active: var(--primary-3000-button-bg); + --button-border-color: var(--primary-3000-button-border); + --lemon-button-border-color-hover: var(--primary-3000-button-border-hover); + --lemon-button-frame-bg-color: var(--primary-3000-frame-bg); + --lemon-button-color: var(--text-3000-light); + + &.LemonButton--status-primary-alt { + --lemon-button-bg-color: var(--primary-3000-frame-bg-light); + --lemon-button-bg-color-active: var(--lemon-button-bg-color); + --button-border-color: var(--primary-3000-button-border); + --lemon-button-border-color-hover: var(--primary-3000-button-border-hover); + --lemon-button-frame-bg-color: var(--primary-3000-button-bg-dark); + --lemon-button-color: var(--text-3000-light); } + } - &:not([aria-disabled='true']):active { - .LemonButton__chrome { - top: -0.5px; - } - } + &.LemonButton--is-stealth.LemonButton--active, + &.LemonButton--is-stealth:hover, + &.LemonButton--secondary:not(.LemonButton--is-stealth) { + --button-border-color: var(--secondary-3000-button-border); + --lemon-button-bg-color-active: var(--bg-light); + --lemon-button-border-color-hover: var(--secondary-3000-button-border-hover); + --lemon-button-frame-bg-color: var(--secondary-3000-frame-bg); } - &.LemonButton--onboarding { - --lemon-button-border-width: 1px; // TODO: increase this to 1.5px once snapshotting is in place to make sure other buttons are not affected + &.LemonButton--status-danger, + &.LemonButton--primary.LemonButton--status-danger, + &.LemonButton--secondary.LemonButton--status-danger { + --lemon-button-color: var(--danger-3000-button-border-hover); + --button-border-color: var(--danger-3000-button-border); + --lemon-button-border-color-hover: var(--danger-3000-button-border-hover); + --lemon-button-frame-bg-color: var(--danger-3000-frame-bg); + --lemon-button-icon-opacity: 1; + } - background: var(--primary-3000-button-bg-dark); - border-color: var(--primary-3000-button-border); + &.LemonButton--is-stealth { + --lemon-button-color: var(--muted); - .LemonButton__chrome { - font-weight: 600; - color: var(--text-3000-light); - background-color: var(--primary-3000-frame-bg-light); - border-color: var(--primary-3000-button-border); + &.LemonButton--active, + &:hover:not([aria-disabled='true']) { + --lemon-button-color: var(--default); } } - &.LemonButton--primary { + &.LemonButton--primary, + &.LemonButton--secondary { --lemon-button-border-width: 1px; - background: var(--primary-3000-frame-bg); - border-color: var(--primary-3000-frame-border); - - .LemonButton__chrome { - font-weight: 600; - color: #111; - background: var(--primary-3000-button-bg); - border-color: var(--primary-3000-button-border); - - &:not([aria-disabled='true']):hover, - &.LemonButton--active { - border-color: var(--primary-3000-button-border-hover); + &:not([aria-disabled='true']):hover .LemonButton__chrome { + &::after { + border-color: var(--lemon-button-border-color-hover); } } - } - &.LemonButton--secondary { - --lemon-button-border-width: 1px; - - background: var(--secondary-3000-frame-bg); - border-color: var(--secondary-3000-frame-border); + &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) { + --lemon-button-padding-left: var(--lemon-button-padding-adjacent-icon); + } - &:not([aria-disabled='true']):hover .LemonButton__chrome { - border-color: var(--secondary-3000-button-border-hover); + &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) { + --lemon-button-padding-right: var(--lemon-button-padding-adjacent-icon); } .LemonButton__chrome { - color: var(--default); - background: var(--accent-3000); - border-color: var(--secondary-3000-button-border); + padding: calc(0.25rem - var(--lemon-button-chrome-depth) * 0.5) + var(--lemon-button-padding-right, var(--lemon-button-padding-horizontal)) + calc(0.25rem + var(--lemon-button-chrome-depth) * 0.5) + var(--lemon-button-padding-left, var(--lemon-button-padding-horizontal)); + background: transparent; + + & > * { + z-index: 1; // Places button content above the ::after element + } + + &::before { + position: absolute; + inset: -1px; + z-index: 0; + content: ''; + border: 1px solid var(--button-border-color); + border-radius: var(--radius); + } + + &::after { + position: absolute; + inset: -1px -1px calc(var(--lemon-button-chrome-depth) - 1px) -1px; + z-index: 0; + content: ''; + background: var(--lemon-button-bg-color); + border: 1px solid var(--button-border-color); + border-radius: var(--radius); + box-shadow: 0 var(--lemon-button-chrome-depth) 0 -1px var(--lemon-button-frame-bg-color); + transition: opacity 200ms ease; + } } - &.LemonButton--active { + &.LemonButton--active, + &:not([aria-disabled='true']):active { .LemonButton__chrome { - color: var(--default); - background: var(--bg-light); - border-color: var(--secondary-3000-button-border-hover); + &::after { + border: 1px solid var(--lemon-button-border-color-hover); + } } } - } - &.LemonButton--is-stealth:not(.LemonButton--active) { - &:hover { + &:hover:not([aria-disabled='true']) { + --lemon-button-depth: var(--lemon-button-hover-depth); + } + + &:not([aria-disabled='true']):active { + --lemon-button-depth: var(--lemon-button-press-depth); + } + + &:hover:not([aria-disabled='true']), + &:not([aria-disabled='true']):active { .LemonButton__chrome { - border-color: var(--secondary-3000-button-border); + transform: translateY(var(--lemon-button-depth)); + + &::after { + box-shadow: 0 calc(var(--lemon-button-chrome-depth) - var(--lemon-button-depth)) 0 -1px var(--lemon-button-frame-bg-color); + } + + &::before { + bottom: calc(var(--lemon-button-depth) - 1px); + } } } - &:not(:hover) { - background-color: transparent; - border-color: transparent; - + &.LemonButton--active { .LemonButton__chrome { - color: var(--muted); - background-color: transparent; - border-color: transparent; + &::after { + background: var(--lemon-button-bg-color-active); + } } } } &.LemonButton--tertiary { - color: var(--default); - - &.LemonButton--status-danger { - color: var(--danger); - } - &:not([aria-disabled='true']):hover, &.LemonButton--active { background-color: var(--glass-border-3000); } + + &.LemonButton--status-danger { + &:not([aria-disabled='true']):hover, + &.LemonButton--active { + background-color: var(--danger-highlight); + } + } } } .LemonButtonWithSideAction__spacer { - width: 1.25rem; + width: var(--lemon-button-side-action-icon-width); height: 1.25rem; color: var(--muted); @@ -259,25 +265,39 @@ .LemonButtonWithSideAction__side-button { top: 1px; right: 1px; - bottom: 4px; - width: 1.625rem; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; + bottom: calc(var(--lemon-button-chrome-depth) + 1px); + z-index: 1; // Places button content above the main button + border-top-right-radius: calc(var(--radius) - 1px); + border-bottom-right-radius: calc(var(--radius) - 1px); transform: none; .LemonButton { + width: calc( + var(--lemon-button-side-action-icon-width) + + var(--lemon-button-padding-adjacent-icon, var(--lemon-button-padding-horizontal)) + ); height: 100%; - padding-bottom: 0 !important; - margin: 0 auto !important; - background: none !important; - border: none !important; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } .LemonButton__chrome { - top: 0 !important; - margin: auto !important; - background: none !important; + --lemon-button-depth: 0px; + + justify-content: center !important; + padding: 0 !important; border: none !important; + + &::before, + &::after { + content: none !important; + } + } + + &:not([aria-disabled='true']):active { + .LemonButton__chrome { + transform: none !important; + } } &:not([aria-disabled='true']):hover { diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss index fa52636448ffc..cc81672df5bae 100644 --- a/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss +++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss @@ -43,7 +43,14 @@ body:not(.posthog-3000) { } &.LemonButton--full-width { + padding-right: 0.5rem; + padding-left: 0.5rem; overflow: hidden; + + > span, + .LemonButton__content { + overflow: hidden; + } } &.LemonButton--large { @@ -140,9 +147,9 @@ body:not(.posthog-3000) { } // Primary - blocked color style - &.LemonButton--onboarding, &.LemonButton--primary { color: #fff; + background: var(--#{$status}-3000, var(--#{$status})); .LemonButton__icon { color: #fff; diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss index 48f756f14096a..f681b7fc8046b 100644 --- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss +++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss @@ -117,11 +117,12 @@ body:not(.posthog-3000) { .posthog-3000 { .LemonSegmentedButton__option { & .LemonButton, - & .LemonButton > .LemonButton__chrome { - border-radius: 0; + & .LemonButton > .LemonButton__chrome::after, + & .LemonButton > .LemonButton__chrome::before { + border-radius: 0 !important; } - .LemonButton > .LemonButton__chrome { + .LemonButton:not(:hover) { background: var(--bg-3000); .LemonButton__icon, @@ -131,23 +132,25 @@ body:not(.posthog-3000) { } .LemonButton.LemonButton--secondary:not([aria-disabled='true']):hover { - > .LemonButton__chrome { + > .LemonButton__chrome::after { border-color: var(--secondary-3000-button-border); } } &:first-child, &:first-child .LemonButton, - &:first-child .LemonButton > .LemonButton__chrome { - border-top-left-radius: var(--radius); - border-bottom-left-radius: var(--radius); + &:first-child .LemonButton > .LemonButton__chrome::after, + &:first-child .LemonButton > .LemonButton__chrome::before { + border-top-left-radius: var(--radius) !important; + border-bottom-left-radius: var(--radius) !important; } &:last-child, &:last-child .LemonButton, - &:last-child .LemonButton > .LemonButton__chrome { - border-top-right-radius: var(--radius); - border-bottom-right-radius: var(--radius); + &:last-child .LemonButton > .LemonButton__chrome::after, + &:last-child .LemonButton > .LemonButton__chrome::before { + border-top-right-radius: var(--radius) !important; + border-bottom-right-radius: var(--radius) !important; } &:not(:last-child) { @@ -164,7 +167,7 @@ body:not(.posthog-3000) { } } - .LemonButton__chrome { + .LemonButton__chrome::after { background-color: var(--bg-light); } } diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.scss b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.scss index fdcd0a1577f6c..2ffff0ebfda98 100644 --- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.scss +++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.scss @@ -1,15 +1,33 @@ -.LemonSelect--clearable { - padding-right: 0 !important; - - > span { +body:not(.posthog-3000) { + .LemonSelect--clearable { padding-right: 0 !important; + + > span { + padding-right: 0 !important; + } + + .LemonButton__content { + gap: 0.5rem; + + .LemonSelect--button--clearable { + margin-left: auto; + } + } } +} + +.posthog-3000 { + .LemonButton.LemonSelect--clearable { + --lemon-button-gap: 0rem; - .LemonButton__content { - gap: 0.5rem; + .LemonButton__content { + gap: 0.25rem; - .LemonSelect--button--clearable { - margin-left: auto; + .LemonSelect--button--clearable { + .LemonButton__chrome { + padding: 0.0625rem !important; + } + } } } } diff --git a/frontend/src/scenes/authentication/InviteSignup.tsx b/frontend/src/scenes/authentication/InviteSignup.tsx index ce00a35bdaf36..0128e51c01a68 100644 --- a/frontend/src/scenes/authentication/InviteSignup.tsx +++ b/frontend/src/scenes/authentication/InviteSignup.tsx @@ -7,6 +7,7 @@ import PasswordStrength from 'lib/components/PasswordStrength' import SignupRoleSelect from 'lib/components/SignupRoleSelect' import { SocialLoginButtons } from 'lib/components/SocialLoginButton/SocialLoginButton' import { Field, PureField } from 'lib/forms/Field' +import { useFeatureFlag } from 'lib/hooks/useFeatureFlag' import { IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons' import { Link } from 'lib/lemon-ui/Link' import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture' @@ -192,6 +193,7 @@ function AuthenticatedAcceptInvite({ invite }: { invite: PrevalidatedInvite }): function UnauthenticatedAcceptInvite({ invite }: { invite: PrevalidatedInvite }): JSX.Element { const { signup, isSignupSubmitting } = useValues(inviteSignupLogic) const { preflight } = useValues(preflightLogic) + const is3000 = useFeatureFlag('POSTHOG_3000') return ( { return is3000 ? { + status: 'primary-alt', size: 'large', } : { + status: 'primary', size: 'medium', } } diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx index 5a3829d1f9678..1f4ae73477d30 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx @@ -1,5 +1,6 @@ import { LemonButton, LemonCheckbox, LemonInput, LemonSelect, Tooltip } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' +import { useFeatureFlag } from 'lib/hooks/useFeatureFlag' import { IconGauge, IconInfo, @@ -36,6 +37,7 @@ export function PlayerInspectorControls(): JSX.Element { const { showOnlyMatching, timestampMode, miniFilters, syncScroll, searchQuery } = useValues(playerSettingsLogic) const { setShowOnlyMatching, setTimestampMode, setMiniFilter, setSyncScroll, setSearchQuery } = useActions(playerSettingsLogic) + const is3000 = useFeatureFlag('POSTHOG_3000') const mode = logicProps.mode ?? SessionRecordingPlayerMode.Standard @@ -173,7 +175,8 @@ export function PlayerInspectorControls(): JSX.Element { size="small" noPadding status="primary-alt" - type={syncScroll ? 'primary' : 'tertiary'} + active={is3000 && syncScroll} + type={is3000 ? 'tertiary' : syncScroll ? 'primary' : 'tertiary'} onClick={() => { // If the user has syncScrolling on but it is paused due to interacting with the Inspector, we want to resume it if (syncScroll && syncScrollingPaused) { diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss index 72bac1d54564e..f490b94a02c75 100644 --- a/frontend/src/styles/vars.scss +++ b/frontend/src/styles/vars.scss @@ -134,17 +134,19 @@ $colors: ( 'link-3000-light': #f54e00, 'primary-3000-frame-bg-light': #eb9d2a, - 'primary-3000-frame-border-light': #c28926, 'primary-3000-button-bg-light': #fff, 'primary-3000-button-border-light': #b17816, 'primary-3000-button-border-hover-light': #8e5b03, 'secondary-3000-frame-bg-light': #e1dddd, - 'secondary-3000-frame-border-light': #d7d7d7, 'secondary-3000-button-bg-light': #f3f4ef, 'secondary-3000-button-border-light': #ccc, 'secondary-3000-button-border-hover-light': #aaa, + 'danger-3000-frame-bg-light': #f54e0080, + 'danger-3000-button-border-light': #e96b30, + 'danger-3000-button-border-hover-light': #f54e00, + 'shadow-elevation-3000-light': 0 3px 0 var(--border-3000-light), 'shadow-elevation-3000-dark': 0 3px 0 var(--border-3000-dark), 'text-3000-dark': #fff, @@ -168,18 +170,20 @@ $colors: ( 'link-3000-dark': #f1a82c, 'primary-3000-frame-bg-dark': #926826, - 'primary-3000-frame-border-dark': #a97a2f, 'primary-3000-button-bg-dark': #e0a045, 'primary-3000-button-border-dark': #b17816, 'primary-3000-button-border-hover-dark': #8e5b03, 'primary-alt-highlight-3000-dark': #232429, 'secondary-3000-frame-bg-dark': #323232, - 'secondary-3000-frame-border-dark': #383838, 'secondary-3000-button-bg-dark': #1d1f27, 'secondary-3000-button-border-dark': #4a4c52, 'secondary-3000-button-border-hover-dark': #5e6064, + 'danger-3000-frame-bg-dark': #f54e0080, + 'danger-3000-button-border-dark': #c44003, + 'danger-3000-button-border-hover-dark': #f54e00, + // The derived colors 'text-3000': var(--text-3000), 'text-secondary-3000': var(--text-secondary-3000), @@ -197,14 +201,11 @@ $colors: ( 'glass-bg-3000': var(--glass-bg-3000), 'glass-border-3000': var(--border-3000), 'link-3000': var(--link-3000), - // 'bg-light': var(--accent-3000), 'primary-3000-frame-bg': var(--primary-3000-frame-bg), - 'primary-3000-frame-border': var(--primary-3000-frame-border), 'primary-3000-button-bg': var(--primary-3000-button-bg), 'primary-3000-button-border': var(--primary-3000-button-border), 'primary-3000-button-border-hover': var(--primary-3000-button-border-hover), 'secondary-3000-frame-bg': var(--secondary-3000-frame-bg), - 'secondary-3000-frame-border': var(--secondary-3000-frame-border), 'secondary-3000-button-bg': var(--secondary-3000-button-bg), 'secondary-3000-button-border': var(--secondary-3000-button-border), 'secondary-3000-button-border-hover': var(--secondary-3000-button-border-hover), @@ -405,16 +406,17 @@ $_lifecycle_dormant: $_danger; --link: var(--link-3000-light); --shadow-elevation-3000: var(--shadow-elevation-3000-light); --primary-3000-frame-bg: var(--primary-3000-frame-bg-light); - --primary-3000-frame-border: var(--primary-3000-frame-border-light); --primary-3000-button-bg: var(--primary-3000-button-bg-light); --primary-3000-button-border: var(--primary-3000-button-border-light); --primary-3000-button-border-hover: var(--primary-3000-button-border-hover-light); --primary-alt-highlight-3000: var(--primary-alt-highlight-3000-light); --secondary-3000-frame-bg: var(--secondary-3000-frame-bg-light); - --secondary-3000-frame-border: var(--secondary-3000-frame-border-light); --secondary-3000-button-bg: var(--secondary-3000-button-bg-light); --secondary-3000-button-border: var(--secondary-3000-button-border-light); --secondary-3000-button-border-hover: var(--secondary-3000-button-border-hover-light); + --danger-3000-frame-bg: var(--danger-3000-frame-bg-light); + --danger-3000-button-border: var(--danger-3000-button-border-light); + --danger-3000-button-border-hover: var(--danger-3000-button-border-hover-light); --tooltip-bg: var(--tooltip-bg-light); } @@ -442,16 +444,17 @@ $_lifecycle_dormant: $_danger; --link: var(--link-3000-dark); --shadow-elevation-3000: var(--shadow-elevation-3000-dark); --primary-3000-frame-bg: var(--primary-3000-frame-bg-dark); - --primary-3000-frame-border: var(--primary-3000-frame-border-dark); --primary-3000-button-bg: var(--primary-3000-button-bg-dark); --primary-3000-button-border: var(--primary-3000-button-border-dark); --primary-3000-button-border-hover: var(--primary-3000-button-border-hover-dark); --primary-alt-highlight-3000: var(--primary-alt-highlight-3000-dark); --secondary-3000-frame-bg: var(--secondary-3000-frame-bg-dark); - --secondary-3000-frame-border: var(--secondary-3000-frame-border-dark); --secondary-3000-button-bg: var(--secondary-3000-button-bg-dark); --secondary-3000-button-border: var(--secondary-3000-button-border-dark); --secondary-3000-button-border-hover: var(--secondary-3000-button-border-hover-dark); + --danger-3000-frame-bg: var(--danger-3000-frame-bg-dark); + --danger-3000-button-border: var(--danger-3000-button-border-dark); + --danger-3000-button-border-hover: var(--danger-3000-button-border-hover-dark); --tooltip-bg: var(--tooltip-bg-dark); --data-color-2: #7f26d9; --data-color-3: #3e7a76; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 999a308480d24..5ecf0f3ef8100 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -869,7 +869,7 @@ packages: '@babel/helper-plugin-utils': 7.22.5 debug: 4.3.4(supports-color@8.1.1) lodash.debounce: 4.0.8 - resolve: 1.22.8 + resolve: 1.22.1 transitivePeerDependencies: - supports-color @@ -2269,7 +2269,7 @@ packages: react: '>=16.8.0' dependencies: react: 18.2.0 - tslib: 2.6.2 + tslib: 2.4.1 dev: false /@dnd-kit/core@6.0.8(react-dom@18.2.0)(react@18.2.0): @@ -2917,7 +2917,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/fake-timers': 29.3.1 - '@jest/types': 29.3.1 + '@jest/types': 29.6.3 '@types/node': 18.18.4 jest-mock: 29.3.1 dev: true @@ -2960,7 +2960,7 @@ packages: resolution: {integrity: sha512-iHTL/XpnDlFki9Tq0Q1GGuVeQ8BHZGIYsvCO5eN/O/oJaRzofG9Xndd9HuSDBI/0ZS79pg0iwn07OMTQ7ngF2A==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@jest/types': 29.3.1 + '@jest/types': 29.6.3 '@sinonjs/fake-timers': 9.1.2 '@types/node': 18.18.4 jest-message-util: 29.3.1 @@ -7460,7 +7460,7 @@ packages: dependencies: '@types/react': 17.0.52 react: 18.2.0 - tslib: 2.6.2 + tslib: 2.4.1 /aria-query@5.1.3: resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==} @@ -9956,7 +9956,7 @@ packages: resolution: {integrity: sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.2 + call-bind: 1.0.5 es-to-primitive: 1.2.1 function-bind: 1.1.2 function.prototype.name: 1.1.5 @@ -12143,7 +12143,6 @@ packages: resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==} dependencies: has: 1.0.3 - dev: true /is-core-module@2.13.1: resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==} @@ -12828,7 +12827,7 @@ packages: anymatch: 3.1.2 fb-watchman: 2.0.2 graceful-fs: 4.2.11 - jest-regex-util: 29.2.0 + jest-regex-util: 29.6.3 jest-util: 29.7.0 jest-worker: 29.3.1 micromatch: 4.0.5 @@ -12946,7 +12945,7 @@ packages: resolution: {integrity: sha512-H8/qFDtDVMFvFP4X8NuOT3XRDzOUTz+FeACjufHzsOIBAxivLqkB1PoLCaJx9iPPQ8dZThHPp/G3WRWyMgA3JA==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@jest/types': 29.3.1 + '@jest/types': 29.6.3 '@types/node': 18.18.4 jest-util: 29.3.1 dev: true @@ -13043,7 +13042,7 @@ packages: jest-pnp-resolver: 1.2.2(jest-resolve@29.7.0) jest-util: 29.7.0 jest-validate: 29.7.0 - resolve: 1.22.8 + resolve: 1.22.1 resolve.exports: 2.0.2 slash: 3.0.0 dev: true @@ -13145,7 +13144,7 @@ packages: resolution: {integrity: sha512-7YOVZaiX7RJLv76ZfHt4nbNEzzTRiMW/IiOG7ZOKmTXmoGBxUDefgMAxQubu6WPVqP5zSzAdZG0FfLcC7HOIFQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@jest/types': 29.3.1 + '@jest/types': 29.6.3 '@types/node': 18.18.4 chalk: 4.1.2 ci-info: 3.5.0 @@ -14424,7 +14423,7 @@ packages: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: hosted-git-info: 2.8.9 - resolve: 1.22.8 + resolve: 1.22.1 semver: 5.7.1 validate-npm-package-license: 3.0.4 dev: true @@ -14434,7 +14433,7 @@ packages: engines: {node: '>=10'} dependencies: hosted-git-info: 4.1.0 - is-core-module: 2.13.1 + is-core-module: 2.11.0 semver: 7.5.4 validate-npm-package-license: 3.0.4 dev: true @@ -14545,7 +14544,7 @@ packages: resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.2 + call-bind: 1.0.5 define-properties: 1.2.1 has-symbols: 1.0.3 object-keys: 1.1.1 @@ -16960,7 +16959,7 @@ packages: resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.2 + call-bind: 1.0.5 define-properties: 1.2.1 functions-have-names: 1.2.3 @@ -17121,10 +17120,9 @@ packages: resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==} hasBin: true dependencies: - is-core-module: 2.13.1 + is-core-module: 2.11.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 - dev: true /resolve@1.22.8: resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} @@ -17259,7 +17257,7 @@ packages: resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==} engines: {node: '>=0.4'} dependencies: - call-bind: 1.0.2 + call-bind: 1.0.5 get-intrinsic: 1.2.2 has-symbols: 1.0.3 isarray: 2.0.5 @@ -17497,7 +17495,7 @@ packages: /side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: - call-bind: 1.0.2 + call-bind: 1.0.5 get-intrinsic: 1.2.2 object-inspect: 1.12.2