fix(3000): various ui fixes #18861

thmsobrmlr · 2023-11-23T14:43:31Z

Problem

Some things are broken in 3000.

Changes

This PR:

makes the links in the funnel legend "subtle"
adds a gray tooltip style in dark mode & fixes the arrow color in light mdoe
fixes the funnel glyphs and line color in dark mode
adapts the styling of the retention table for partial days
fixes the gray lettermark in dark mode
fixes the breakdown tag somewhat. sizing and colors still need to be adapted, but I know button styles for buttons with just icons are currently being worked on elsewhere.

How did you test this code?

Testes locally

posthog-bot · 2023-11-23T14:52:05Z

📸 UI snapshots have been updated

3 snapshot changes in total. 0 added, 3 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

github-actions · 2023-11-23T16:05:00Z

Size Change: 0 B

Total Size: 1.83 MB

ℹ️ View Unchanged

Filename	Size
`frontend/dist/toolbar.js`	1.83 MB

_{compressed-size-action}

posthog-bot · 2023-11-23T16:31:27Z

📸 UI snapshots have been updated

3 snapshot changes in total. 0 added, 3 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

Twixes · 2023-11-23T18:02:49Z

frontend/src/styles/vars.scss

+    --tooltip-background-light: var(--bg-charcoal);
+    --tooltip-background-dark: #656d81;


Great foundation for tuning this in the future.
Note: considering we're using --tooltip-bg, these should be --tooltip-bg-{light,dark}

Twixes · 2023-11-23T18:06:22Z

frontend/__snapshots__/exporter-exporter--retention-breakdown-insight.png

Is this legacy UI change intended?

Yep or at least tolerated, since I think this is a more clear "partial data" state anyways

corywatilo · 2023-11-23T20:05:08Z

These look great! 🙏

# Conflicts: # frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss # frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss # frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss # frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTag.scss # frontend/src/styles/global.scss

posthog-bot · 2023-11-24T08:52:39Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2023-11-24T09:00:56Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2023-11-24T09:09:16Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

* subtle links in the funnel legend * tooltip styles * funnel glyphs and line * retention table * gray lettermark * breakdown tag * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (1) * consistent bg naming * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * fix retention table css --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

…18949) * fix: re-add background to tertiary button * final color * Update UI snapshots for `chromium` (1) * Fix button styles to allow secondary to be transparent * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * all styles in default state * button active states * fix full width * remove custom nav styling as buttons now 3px shorter * tertiary danger hover highlight * muted stealth when not active * button sizes * move min-height to chrome * side buttons in primary * change sidepanel buttons to tertiary * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * fix border radius * dark mode colors * remove unused styles * fix: set metadata when level change (#18899) * set user analytics metadata when membership level is changed * also set whenever user is updated since that includes updating current org * fix tests * fix other tests * style(3000): Align border radius to 6px in 3000 (#18866) * style: Align border radius to 6px in 3000 * Only affect .posthog-3000 * Also tune some non-4px radii * Add radius comment Co-authored-by: David Newell <[email protected]> * Fix missing warehouse mocks and strictly prevent toasts * Don't affect utility classes --------- Co-authored-by: David Newell <[email protected]> * fix(3000): various ui fixes (#18861) * subtle links in the funnel legend * tooltip styles * funnel glyphs and line * retention table * gray lettermark * breakdown tag * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (1) * consistent bg naming * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * fix retention table css --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> * fix(plugin-server): Remove Postgres-based plugin error logging in favor of existing ClickHouse-based approaches (#18764) * fix: delay usage report sending on sunday (#18900) delay usage report sending on sunday * feat(hogql): run filter based insights via hogql (undo revert) (#17645) * chore(data-warehouse): fix close button (#18918) fix close button * feat: Only show other recordings if there are no pinned ones by default (#18915) * fix(trends): convert any missing property operators to the default of exact (#18895) * Convert any missing property operators to the default of exact * Handle undefined values * Check for undefined values * feat(3000): Make nav usable on mobile (#18912) * chore(3000): updated tag colors (#18786) * updated tag colors * darkened warning text * Enable 3000 snapshots * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Lint CSS --------- Co-authored-by: Michael Matloka <[email protected]> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> * chore(plugin server): add OS version to person properties (#18924) * feat: Concise titles for the top nav (#18856) * fix(groups): add debounce to search (#18927) * style(3000): Clean up segmented buttons (#18897) * style(3000): Make segmented buttons feel like IRL radio buttons * Fix font size * Revert full press * Update query snapshots * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> * chore: update es build (#18917) * chore: update ESBuild * chore: update ESBuild * more logging collapsing * Fix * fiddling * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * end when finished if not --dev --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> * chore(plugin-server): add deprecated imports list, log if they are us… (#18726) * chore(3000): More styling tweaks (#18923) * Align more rounding * Align switch. select, input sizing with buttons * Resolve extra UI snags * Fix 3000-dependency * Fix one more stray divider * Remove legacy `description` prop of `PageHeader` * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Make "New insight" button regular size * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> * feat(surveys): be able to drag and reorder questions (#18763) * reorder questions wip * reorder questions * address comments and open question box to where it's dragged * import linter fix * key prop error * rotate drag handle icon * add back auto disappear * chore(plugin-server): only inject imports that are used by the plugin and remove unused plugin imports (#18934) * fix: Swap canvas state var and remove it on unmount (#18922) * fix: Support modal url changes (#18937) * feat(3000): Relabeled apps to data pipeline, re-ordered nav (#18919) * relabeled apps to data pipeline, re-ordered nav * Update UI snapshots for `chromium` (1) * RIP connectors → apps * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> * chore(plugin-server): bump node-rdkafka to 2.18.0 (librdkafka 2.3.0) (#18420) * revert(plugin-server): bump node-rdkafka to 2.18.0 (librdkafka 2.3.0) (#18420) (#18941) * feat: Fixed up feature previews panel (#18931) * fix: PersonDisplay links should be the new subtle style (#18932) * fix: Added missing 3000 parts for exporter (#18913) * fix: e2e tests flakiness with unit image (#18933) * Change celery metrics port so it doesn't clash with webserver * Change back to unit image * chore(deps): bump aiohttp from 3.8.6 to 3.9.0 (#18920) * chore(deps): bump aiohttp from 3.8.6 to 3.9.0 Bumps [aiohttp](https://github.com/aio-libs/aiohttp) from 3.8.6 to 3.9.0. - [Release notes](https://github.com/aio-libs/aiohttp/releases) - [Changelog](https://github.com/aio-libs/aiohttp/blob/master/CHANGES.rst) - [Commits](aio-libs/aiohttp@v3.8.6...v3.9.0) --- updated-dependencies: - dependency-name: aiohttp dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> * update properly --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Paul D'Ambra <[email protected]> * reset snapshots * reset button snapshots * merge cleanup * final merge * remove old snapshots * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * reset snapshots * change onboaring to primary-alt in 3000 * add back in upwards motion on hover * fix segmented button styles * restore button heights * padding adjacent to icons in buttons * side action hover state * Update UI snapshots for `chromium` (1) * reset snapshots * danger colors and unused color cleanup * darken icons on hover * restore all chrome hover / press depths * increase navbar padding * fix clearable select * fix inspector button in session replay * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * fix rebase issues * retain legacy lemon select styles * improve active / hover states on segmented button * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Avoid extra margin between 3D buttons This allows for a slightly nicer overlaying effect * Update UI snapshots for `chromium` (1) * Update query snapshots * Update query snapshots * Update UI snapshots for `chromium` (1) * Update query snapshots * Update UI snapshots for `chromium` (1) * Update query snapshots * reset snapshots * always show danger icon opacity as 1 * stop content overflow * set full width horizontal padding * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * rotate shadows on sidepanel buttons * Update UI snapshots for `chromium` (1) --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben White <[email protected]> Co-authored-by: Raquel Smith <[email protected]> Co-authored-by: Thomas Obermüller <[email protected]> Co-authored-by: ted kaemming <[email protected]> Co-authored-by: Eric Duong <[email protected]> Co-authored-by: Tom Owers <[email protected]> Co-authored-by: Michael Matloka <[email protected]> Co-authored-by: Cory Watilo <[email protected]> Co-authored-by: Michael Matloka <[email protected]> Co-authored-by: Juraj Majerik <[email protected]> Co-authored-by: Paul D'Ambra <[email protected]> Co-authored-by: Brett Hoerner <[email protected]> Co-authored-by: Li Yi Yu <[email protected]> Co-authored-by: Frank Hamand <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

thmsobrmlr added 6 commits November 23, 2023 13:49

subtle links in the funnel legend

d669219

tooltip styles

f9bc086

funnel glyphs and line

79d0c6b

retention table

15cb9dc

gray lettermark

b09d261

breakdown tag

f1d816e

Merge branch 'master' into thomas-3000-fixes

5c58b23

thmsobrmlr force-pushed the thomas-3000-fixes branch from ff8ecd0 to 5c58b23 Compare November 23, 2023 16:23

github-actions bot added 2 commits November 23, 2023 16:30

Update UI snapshots for webkit (2)

1d440a2

Update UI snapshots for chromium (1)

5683743

thmsobrmlr requested a review from a team November 23, 2023 17:14

thmsobrmlr marked this pull request as ready for review November 23, 2023 17:14

Twixes reviewed Nov 23, 2023

View reviewed changes

thmsobrmlr and others added 4 commits November 24, 2023 09:24

consistent bg naming

98910a3

Merge branch 'master' into thomas-3000-fixes

0f58cec

Update UI snapshots for chromium (2)

cb0b5a0

Update UI snapshots for chromium (1)

b64ca57

Update UI snapshots for chromium (1)

09d92e4

fix retention table css

019be96

thmsobrmlr requested a review from Twixes November 24, 2023 11:38

Twixes approved these changes Nov 27, 2023

View reviewed changes

Twixes merged commit f0d531b into master Nov 27, 2023
78 checks passed

Twixes deleted the thomas-3000-fixes branch November 27, 2023 17:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(3000): various ui fixes #18861

fix(3000): various ui fixes #18861

thmsobrmlr commented Nov 23, 2023 •

edited

Loading

posthog-bot commented Nov 23, 2023

github-actions bot commented Nov 23, 2023 •

edited

Loading

posthog-bot commented Nov 23, 2023

Twixes Nov 23, 2023

Twixes Nov 23, 2023

thmsobrmlr Nov 23, 2023

corywatilo commented Nov 23, 2023

posthog-bot commented Nov 24, 2023

posthog-bot commented Nov 24, 2023

posthog-bot commented Nov 24, 2023

		--tooltip-background-light: var(--bg-charcoal);
		--tooltip-background-dark: #656d81;

fix(3000): various ui fixes #18861

fix(3000): various ui fixes #18861

Conversation

thmsobrmlr commented Nov 23, 2023 • edited Loading

Problem

Changes

How did you test this code?

posthog-bot commented Nov 23, 2023

📸 UI snapshots have been updated

github-actions bot commented Nov 23, 2023 • edited Loading

posthog-bot commented Nov 23, 2023

📸 UI snapshots have been updated

Twixes Nov 23, 2023

Choose a reason for hiding this comment

Twixes Nov 23, 2023

Choose a reason for hiding this comment

thmsobrmlr Nov 23, 2023

Choose a reason for hiding this comment

corywatilo commented Nov 23, 2023

posthog-bot commented Nov 24, 2023

📸 UI snapshots have been updated

posthog-bot commented Nov 24, 2023

📸 UI snapshots have been updated

posthog-bot commented Nov 24, 2023

📸 UI snapshots have been updated

thmsobrmlr commented Nov 23, 2023 •

edited

Loading

github-actions bot commented Nov 23, 2023 •

edited

Loading