From 14005a85f9d5ba575467e6012ef1d41bd0dda13d Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sat, 5 Oct 2024 15:53:24 -0700
Subject: add description field to dividers

---
 src/components/CompactTable/CompactTable.tsx |  2 +-
 src/components/Divider/Divider.tsx           | 25 ++++++++++++++++---------
 src/pages/stats/[slug].tsx                   |  9 ++++-----
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/CompactTable/CompactTable.tsx b/src/components/CompactTable/CompactTable.tsx
index 804fa28..656fa1e 100644
--- a/src/components/CompactTable/CompactTable.tsx
+++ b/src/components/CompactTable/CompactTable.tsx
@@ -9,7 +9,7 @@ interface CompactTableProps {
 
 const CompactTable: React.FC<CompactTableProps> = ({ tableData }) => {
 	return (
-		<div className="max-w-full mx-auto bg-gray-100 shadow-md rounded-lg overflow-hidden">
+		<div className="max-w-full mx-auto bg-gray-100 shadow-md overflow-hidden">
 			<div className="flex gap-x-4">
 				<div className="w-1/2 px-4 py-5">
 					<h2 className="text-lg font-semibold text-gray-900">Dates</h2>
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index ef6b30b..a19f4a9 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -1,14 +1,21 @@
 interface DividerProps {
-	text: string;
+  text: string;
+  description?: string;
 }
 
 const Divider = (props: DividerProps) => {
-	return (
-		<div className="flex flex-row items-center justify-center bg-black h-24 max-w-full px-72">
-			<div className="px-2 text-white text-4xl font-extrabold">
-				{props.text}
-			</div>
-		</div>
-	);
+  return (
+    <div className="flex flex-col items-center justify-center bg-black h-24 mx-24 rounded-xl px-72">
+      <div className="px-2 mt-2 text-white text-4xl font-extrabold">
+        {props.text}
+      </div>
+      {props.description && (
+        <div className="px-2 my-2 text-white text-lg font-medium">
+          {props.description}
+        </div>
+      )}
+    </div>
+  );
 };
-export default Divider;
+
+export default Divider;
\ No newline at end of file
diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx
index 685d01b..c2427c0 100644
--- a/src/pages/stats/[slug].tsx
+++ b/src/pages/stats/[slug].tsx
@@ -108,7 +108,7 @@ function Page({
 				/>
 			</div>
 			<div className="hidden sm:block">
-				<Divider text="Individual Data" />
+				<Divider text="Individual Data" description="All verified collected datapoints by PhaseTracker. Numbers before data collection started not shown" />
 				<div className="px-48 mb-10 mt-10">
 					<div className="mb-12">
 						<DataChart
@@ -125,17 +125,16 @@ function Page({
 							graphTitle="7 Day Historical"
 						/>
 					</div>
-					<Divider text="Milestones" />
-					<div className="mb-12">
+				</div>
+				<Divider text="Milestones" description="Approximations are shown for milestones before data collection started" />
+					<div className="mb-12 mx-24">
 						<CompactTable
 							tableData={{
 								dates: milestoneData.dates,
 								milestones: milestoneData.milestones,
 							}}
 						/>
-						<p className="mt-2 font-semibold">For intervals which we did not record any data, the closest recorded datapoint is chosen</p>
 					</div>
-				</div>
 			</div>
 			<Footer />
 		</>
-- 
cgit v1.2.3