ui polish

PostHog · Mar 27, 2024 · 97340d9 · 97340d9
1 parent ca2879f
commit 97340d9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/frontend/src/scenes/experiments/ExperimentView/Goal.tsx b/frontend/src/scenes/experiments/ExperimentView/Goal.tsx
@@ -204,8 +204,8 @@ export function Goal(): JSX.Element {
 
     return (
         <div>
-            <h2 className="font-semibold text-lg mb-1">Experiment goal</h2>
-            <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 through each step of the user journey.'

diff --git a/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx b/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx
@@ -30,8 +30,12 @@ export function ProgressBar(): JSX.Element {
 
     return (
         <div>
-            <h2 className="font-semibold text-lg">Data collection</h2>
-            <div className="mb-1 font-semibold">{`${
+            <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>
+            <div className="mt-4 mb-1 font-semibold">{`${
                 experimentProgressPercent > 100 ? 100 : experimentProgressPercent.toFixed(2)
             }% complete`}</div>
             <LemonProgress

diff --git a/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx b/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
@@ -300,7 +300,9 @@ export function SecondaryMetricsTable({
                 <div className="flex">
                     <div className="w-1/2">
                         <h2 className="mb-0 font-semibold text-lg">Secondary metrics</h2>
-                        {metrics.length > 0 && <div className="mb-2">Monitor side effects of your experiment.</div>}
+                        {metrics.length > 0 && (
+                            <div className="text-muted text-xs mb-2">Monitor side effects of your experiment.</div>
+                        )}
                     </div>
 
                     <div className="w-1/2 flex flex-col justify-end">