From db0aef207c719dd0238a26efdd536e2a984f99a3 Mon Sep 17 00:00:00 2001
From: Juraj Majerik <juro.majerik@gmail.com>
Date: Thu, 25 Apr 2024 07:24:31 +0200
Subject: [PATCH] fix(experiments): some UI polish (#21815)

init
---
 .../src/scenes/experiments/ExperimentForm.tsx | 12 ++++-----
 .../experiments/ExperimentView/Goal.tsx       | 25 +++++++++++++------
 .../ExperimentView/ProgressBar.tsx            | 18 +++++++------
 .../ExperimentView/SecondaryMetricsTable.tsx  | 18 +++++++------
 4 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/frontend/src/scenes/experiments/ExperimentForm.tsx b/frontend/src/scenes/experiments/ExperimentForm.tsx
index a5829d2c482..7fac1d995a9 100644
--- a/frontend/src/scenes/experiments/ExperimentForm.tsx
+++ b/frontend/src/scenes/experiments/ExperimentForm.tsx
@@ -48,8 +48,8 @@ const StepInfo = (): JSX.Element => {
                     </LemonField>
                 </div>
                 <div className="mt-10">
-                    <h3>Variants</h3>
-                    <div>Add up to 9 variants to test against your control.</div>
+                    <h3 className="mb-1">Variants</h3>
+                    <div className="text-xs text-muted">Add up to 9 variants to test against your control.</div>
                     <LemonDivider />
                     <div className="grid grid-cols-2 gap-4 max-w-160">
                         <div className="max-w-60">
@@ -163,8 +163,8 @@ const StepGoal = (): JSX.Element => {
             <div className="space-y-8">
                 {groupTypes.size > 0 && (
                     <div>
-                        <h3>Participant type</h3>
-                        <div>
+                        <h3 className="mb-1">Participant type</h3>
+                        <div className="text-xs text-muted">
                             The type on which to aggregate metrics. You can change this at any time during the
                             experiment.
                         </div>
@@ -239,8 +239,8 @@ const StepGoal = (): JSX.Element => {
                     />
                 </div>
                 <div>
-                    <h3>Goal criteria</h3>
-                    <div>
+                    <h3 className="mb-1">Goal criteria</h3>
+                    <div className="text-xs text-muted">
                         {experimentInsightType === InsightType.FUNNELS
                             ? 'Create the funnel you want to measure.'
                             : 'Select a single metric to track.'}
diff --git a/frontend/src/scenes/experiments/ExperimentView/Goal.tsx b/frontend/src/scenes/experiments/ExperimentView/Goal.tsx
index 5ceadd7c283..a711388bb44 100644
--- a/frontend/src/scenes/experiments/ExperimentView/Goal.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/Goal.tsx
@@ -210,16 +210,27 @@ export function Goal(): JSX.Element {
 
     return (
         <div>
-            <h2 className="font-semibold text-lg mb-0">Experiment goal</h2>
-            <div className="text-muted text-xs">
-                This <b>{experimentInsightType === InsightType.FUNNELS ? 'funnel' : 'trend'}</b>{' '}
-                {experimentInsightType === InsightType.FUNNELS
-                    ? 'experiment measures conversion at each stage.'
-                    : 'experiment tracks the count of a single metric.'}
+            <div>
+                <div className="inline-flex space-x-2">
+                    <h2 className="font-semibold text-lg mb-0">Experiment goal</h2>
+                    <Tooltip
+                        title={
+                            <>
+                                {' '}
+                                This <b>{experimentInsightType === InsightType.FUNNELS ? 'funnel' : 'trend'}</b>{' '}
+                                {experimentInsightType === InsightType.FUNNELS
+                                    ? 'experiment measures conversion at each stage.'
+                                    : 'experiment tracks the count of a single metric.'}
+                            </>
+                        }
+                    >
+                        <IconInfo className="text-muted-alt text-base" />
+                    </Tooltip>
+                </div>
             </div>
             <div className="inline-flex space-x-6">
                 <div>
-                    <div className="card-secondary mb-2 mt-4">
+                    <div className="card-secondary mb-2 mt-2">
                         {experimentInsightType === InsightType.FUNNELS ? 'Conversion goal steps' : 'Trend goal'}
                     </div>
                     <MetricDisplay filters={experiment.filters} />
diff --git a/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx b/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx
index 75a221b5148..0aea97a5a37 100644
--- a/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx
@@ -31,12 +31,16 @@ export function ProgressBar(): JSX.Element {
 
     return (
         <div>
-            <h2 className="font-semibold text-lg mb-0">Data collection</h2>
-            <div className="text-muted text-xs">
-                Estimated target for the number of participants. Actual data may reveal significance earlier or later
-                than predicted.
+            <div className="inline-flex space-x-2">
+                <h2 className="font-semibold text-lg mb-0">Data collection</h2>
+                <Tooltip
+                    title="Estimated target for the number of participants. Actual data may reveal significance earlier or later
+                    than predicted."
+                >
+                    <IconInfo className="text-muted-alt text-base" />
+                </Tooltip>
             </div>
-            <div className="mt-4 mb-1 font-semibold">{`${
+            <div className="mt-2 mb-1 font-semibold">{`${
                 experimentProgressPercent > 100 ? 100 : experimentProgressPercent.toFixed(2)
             }% complete`}</div>
             <LemonProgress
@@ -46,7 +50,7 @@ export function ProgressBar(): JSX.Element {
                 percent={experimentProgressPercent}
             />
             {experimentInsightType === InsightType.TRENDS && (
-                <div className="flex justify-between mt-2">
+                <div className="flex justify-between mt-0">
                     {experiment.end_date ? (
                         <div>
                             Ran for <b>{actualRunningTime}</b> {formatUnitByQuantity(actualRunningTime, 'day')}
@@ -80,7 +84,7 @@ export function ProgressBar(): JSX.Element {
                 </div>
             )}
             {experimentInsightType === InsightType.FUNNELS && (
-                <div className="flex justify-between mt-2">
+                <div className="flex justify-between mt-0">
                     {experiment.end_date ? (
                         <div>
                             Saw <b>{humanFriendlyNumber(funnelResultsPersonsTotal)}</b>{' '}
diff --git a/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx b/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
index 6337d23c883..666238a3ea1 100644
--- a/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
@@ -1,7 +1,7 @@
 import '../Experiment.scss'
 
-import { IconPencil, IconPlus } from '@posthog/icons'
-import { LemonButton, LemonInput, LemonModal, LemonTable, LemonTableColumns } from '@posthog/lemon-ui'
+import { IconInfo, IconPencil, IconPlus } from '@posthog/icons'
+import { LemonButton, LemonInput, LemonModal, LemonTable, LemonTableColumns, Tooltip } from '@posthog/lemon-ui'
 import { Empty } from 'antd'
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
@@ -286,11 +286,15 @@ export function SecondaryMetricsTable({
         <>
             <div>
                 <div className="flex">
-                    <div className="w-1/2">
-                        <h2 className="mb-0 font-semibold text-lg">Secondary metrics</h2>
-                        {metrics.length > 0 && (
-                            <div className="text-muted text-xs mb-2">Monitor side effects of your experiment.</div>
-                        )}
+                    <div className="w-1/2 pt-5">
+                        <div className="inline-flex space-x-2 mb-0">
+                            <h2 className="mb-0 font-semibold text-lg">Secondary metrics</h2>
+                            {metrics.length > 0 && (
+                                <Tooltip title="Monitor side effects of your experiment.">
+                                    <IconInfo className="text-muted-alt text-base" />
+                                </Tooltip>
+                            )}
+                        </div>
                     </div>
 
                     <div className="w-1/2 flex flex-col justify-end">