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>
PostHog · Nov 29, 2023 · 2de1b35 · 2de1b35
1 parent 4c68904
commit 2de1b35
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 12 deletions.
diff --git a/frontend/__snapshots__/exporter-exporter--retention-breakdown-insight.png b/frontend/__snapshots__/exporter-exporter--retention-breakdown-insight.png
diff --git a/frontend/__snapshots__/exporter-exporter--retention-insight.png b/frontend/__snapshots__/exporter-exporter--retention-insight.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit.png b/frontend/__snapshots__/scenes-app-insights--retention-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/lib/components/HoqQLPropertyInfo.tsx b/frontend/src/lib/components/HoqQLPropertyInfo.tsx
@@ -6,7 +6,7 @@ type HoqQLPropertyInfoProps = {
 
 export const HoqQLPropertyInfo = ({ value }: HoqQLPropertyInfoProps): JSX.Element => {
     return (
-        <span title={value} className="font-mono text-link text-xs">
+        <span title={value} className="font-mono text-primary text-xs">
             {midEllipsis(value, 60)}
         </span>
     )

diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
@@ -10,7 +10,7 @@
     background: var(--border);
     border-radius: var(--radius);
 
-    .posthog-3000 & {
+    .posthog-3000 &:not(.breakdown) {
         padding: 0.075rem 0.25rem;
         font-size: 0.688rem;
         background: none;
@@ -100,6 +100,17 @@
         background: none;
     }
 
+    &.breakdown {
+        padding: 8px 12px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 16px;
+        color: var(--primary-alt);
+        vertical-align: bottom;
+        background-color: var(--primary-bg-hover);
+        border-radius: 40px;
+    }
+
     &.LemonTag--size-small {
         padding: 0.0625rem 0.1875rem;
         font-size: 0.625rem;

diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx
@@ -15,6 +15,7 @@ export type LemonTagType =
     | 'completion'
     | 'caution'
     | 'none'
+    | 'breakdown'
 
 export interface LemonTagProps extends React.HTMLAttributes<HTMLDivElement> {
     type?: LemonTagType
@@ -61,7 +62,7 @@ export function LemonTag({
                     icon={<IconClose className="h-3.5 w-3.5" />}
                     onClick={onClose}
                     status="primary"
-                    size="small"
+                    size="xsmall"
                     className="LemonTag__right-button"
                 />
             )}

diff --git a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss
@@ -18,7 +18,7 @@
 
     &.Lettermark--variant-gray {
         color: var(--default);
-        background: var(--border-light);
+        background: var(--border);
     }
 
     @each $variant in (1, 2, 3, 4, 5, 6, 7, 8) {

diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss b/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss
@@ -63,7 +63,8 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
                 left: 0;
                 box-sizing: border-box;
                 width: calc(#{$series_container_width} / 2 + 1px);
-                border-right: 2px solid var(--mid);
+                border-right: 2px solid var(--border);
+                opacity: 0.5;
 
                 &.before {
                     top: 0;

diff --git a/frontend/src/scenes/funnels/ValueInspectorButton.tsx b/frontend/src/scenes/funnels/ValueInspectorButton.tsx
@@ -21,6 +21,7 @@ export const ValueInspectorButton = forwardRef<HTMLElement, ValueInspectorButton
             onMouseLeave={onMouseLeave}
             className="funnel-inspect-button"
             title={title}
+            subtle
         >
             {children}
         </Link>

diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTag.tsx b/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTag.tsx
@@ -1,5 +1,3 @@
-import './BreakdownTag.scss'
-
 import { LemonTag, LemonTagProps } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
 import { HoqQLPropertyInfo } from 'lib/components/HoqQLPropertyInfo'
@@ -86,7 +84,7 @@ export function BreakdownTag({
     }
 
     return (
-        <LemonTag className="breakdown-tag" {...props}>
+        <LemonTag type="breakdown" {...props}>
             {breakdownType === 'hogql' ? (
                 <HoqQLPropertyInfo value={propertyName as string} />
             ) : (

diff --git a/frontend/src/scenes/retention/RetentionTable.scss b/frontend/src/scenes/retention/RetentionTable.scss
@@ -49,9 +49,10 @@
         }
 
         &.RetentionTable__Tab--period {
+            color: var(--muted);
             background-color: var(--bg-light);
-            border: 1px solid var(--retention-table-color);
-            opacity: 0.75;
+            border: 1px solid var(--border);
+            border-style: dashed;
         }
     }
 

diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
@@ -361,7 +361,7 @@ input::-ms-clear {
         height: 23px;
         font-size: unset;
         color: var(--primary-alt);
-        background-color: white;
+        background-color: var(--bg-light);
         border-color: var(--border);
     }
 }
@@ -544,6 +544,7 @@ body {
     --bg-light: #fff;
     --bg-table: var(--bg-light);
     --link: var(--primary-3000);
+    --tooltip-bg: var(--bg-charcoal);
 
     touch-action: manipulation; // Disable double-tap-to-zoom on mobile, making taps slightly snappier
 
@@ -727,7 +728,11 @@ body {
 
     // Tooltip styles
     .ant-tooltip-inner {
-        background-color: var(--bg-charcoal);
+        background-color: var(--tooltip-bg);
+    }
+
+    .ant-tooltip-arrow-content {
+        background-color: var(--tooltip-bg);
     }
 
     .ant-tooltip {

diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
@@ -365,6 +365,10 @@ $_lifecycle_dormant: $_danger;
     --modal-backdrop-color: rgb(0 0 0 / 20%);
     --modal-transition-time: 200ms;
 
+    // Tooltips
+    --tooltip-bg-light: var(--bg-charcoal);
+    --tooltip-bg-dark: #656d81;
+
     // Notebooks
     --notebook-popover-transition-properties: 150ms cubic-bezier(0, 0.5, 0.5, 1);
     --notebook-column-left-width: 27rem;
@@ -409,6 +413,7 @@ $_lifecycle_dormant: $_danger;
     --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);
+    --tooltip-bg: var(--tooltip-bg-light);
 }
 
 // defined here so that they can be shared with the toolbar
@@ -445,6 +450,7 @@ $_lifecycle_dormant: $_danger;
     --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);
+    --tooltip-bg: var(--tooltip-bg-dark);
     --data-color-2: #7f26d9;
     --data-color-3: #3e7a76;
     --data-color-4: #bf0d6c;