From c62f041819870d7d21cf2d1b874b7f9c512909d7 Mon Sep 17 00:00:00 2001
From: Zayd Krunz <70227235+ShrootBuck@users.noreply.github.com>
Date: Wed, 3 Jan 2024 03:30:14 -0700
Subject: [PATCH] style: Basic refactoring, a little tooltip fix, and some
 small language changes (#1850)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
---
 .../summary/components/SummaryMetadata.tsx     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx
index 8b7a55f6df..8e1f591eb8 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx
@@ -80,29 +80,29 @@ export default function SummaryMetadata({
     <div className="mb-4">
       <div className="flex flex-col-reverse gap-y-2 lg:grid lg:grid-cols-3 lg:gap-x-2">
         <div className="grid grid-cols-2 gap-4 md:grid-cols-5 md:gap-x-2 lg:col-span-2">
-          <div className="flex flex-col justify-between space-y-2 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
-            <p className="text-sm text-slate-600">Displays</p>
-            <p className="text-2xl font-bold text-slate-800">
-              {displayCount === 0 ? <span>-</span> : displayCount}
-            </p>
-          </div>
+          <StatCard
+            label="Displays"
+            percentage={null}
+            value={displayCount === 0 ? <span>-</span> : displayCount}
+            tooltipText="Number of times the survey has been viewed."
+          />
           <StatCard
             label="Starts"
             percentage={`${Math.round((totalResponses / displayCount) * 100)}%`}
             value={totalResponses === 0 ? <span>-</span> : totalResponses}
-            tooltipText="People who started the survey."
+            tooltipText="Number of times the survey has been started."
           />
           <StatCard
             label="Responses"
             percentage={`${Math.round((completedResponsesCount / displayCount) * 100)}%`}
             value={responses.length === 0 ? <span>-</span> : completedResponsesCount}
-            tooltipText="People who completed the survey."
+            tooltipText="Number of times the survey has been completed."
           />
           <StatCard
             label="Drop Offs"
             percentage={`${Math.round(((totalResponses - completedResponsesCount) / totalResponses) * 100)}%`}
             value={responses.length === 0 ? <span>-</span> : totalResponses - completedResponsesCount}
-            tooltipText="People who started but not completed the survey."
+            tooltipText="Number of times the survey has been started but not completed."
           />
           <StatCard
             label="Time to Complete"