From d89f096ee3f115eaea27381f9dc4e1a31bd87590 Mon Sep 17 00:00:00 2001
From: Amy Liu <amliu@jumptrading.com>
Date: Wed, 5 Nov 2025 16:44:34 -0600
Subject: [PATCH] fix: more dense snapshot startup

---
 src/colors.ts                                          |  4 ++--
 src/features/StartupProgress/Firedancer/Body.tsx       |  6 +++---
 .../StartupProgress/Firedancer/SnapshotLoadingCard.tsx |  8 +++++++-
 .../StartupProgress/Firedancer/SnapshotProgress.tsx    |  2 +-
 .../Firedancer/SnapshotSparklineCard.tsx               |  2 +-
 .../StartupProgress/Firedancer/bars.module.css         |  2 +-
 .../StartupProgress/Firedancer/gossip.module.css       |  2 +-
 .../StartupProgress/Firedancer/progressBar.module.css  |  5 ++---
 .../StartupProgress/Firedancer/snapshot.module.css     | 10 ++++------
 9 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/colors.ts b/src/colors.ts
index 0c7f94da..ae067740 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -48,8 +48,8 @@ export const bootProgressGossipHighFilledBarColor = "#5E1717";
 export const bootProgressGossipHighThresholdBarColor = "#CE3636";
 
 export const bootProgressPrimaryTextColor = "#A2A2A2";
-export const bootProgressSecondaryTextColor = "#454545";
-export const bootProgressSnapshotPctColor = "#C8B3B3";
+export const bootProgressSecondaryTextColor = "#666";
+export const bootProgressTertiaryColor = "#C8B3B3";
 export const bootProgressSnapshotUnitsColor = "#686868";
 
 export const progressBarIncompleteGossipColor = "#171765ff";
diff --git a/src/features/StartupProgress/Firedancer/Body.tsx b/src/features/StartupProgress/Firedancer/Body.tsx
index b5863f45..1943f40f 100644
--- a/src/features/StartupProgress/Firedancer/Body.tsx
+++ b/src/features/StartupProgress/Firedancer/Body.tsx
@@ -68,7 +68,7 @@ function BootProgressContent({ phase }: BootProgressContentProps) {
     >
       <PhaseHeader phase={phase} />
 
-      <Box pt="6" flexGrow="1">
+      <Box flexGrow="1" m="9">
         {phase === BootPhaseEnum.joining_gossip && <GossipProgress />}
         {(phase === BootPhaseEnum.loading_full_snapshot ||
           phase === BootPhaseEnum.loading_incremental_snapshot) && (
@@ -111,15 +111,15 @@ function PhaseHeader({ phase }: { phase: BootPhase }) {
   return (
     <>
       <Header />
-      <Flex justify="between" mt="4" mb="20px" className={styles.stepContainer}>
+      <Flex justify="between" mt="7" mb="2" className={styles.stepContainer}>
         <span>
           <Text className={styles.secondaryText}>Elapsed </Text>
           <TotalDuration />
         </span>
         <Text className={styles.stepName}>{step.name}</Text>
         <span>
+          <Text className={styles.secondaryText}>Complete </Text>
           <Text>{overallPct}% </Text>
-          <Text className={styles.secondaryText}>Complete</Text>
         </span>
       </Flex>
 
diff --git a/src/features/StartupProgress/Firedancer/SnapshotLoadingCard.tsx b/src/features/StartupProgress/Firedancer/SnapshotLoadingCard.tsx
index f12e35f1..ea60c351 100644
--- a/src/features/StartupProgress/Firedancer/SnapshotLoadingCard.tsx
+++ b/src/features/StartupProgress/Firedancer/SnapshotLoadingCard.tsx
@@ -45,7 +45,13 @@ export function SnapshotLoadingCard({
 
   return (
     <Card className={clsx(styles.card, styles.throughputCard)}>
-      <Flex justify="between" align="center" className={styles.cardHeader}>
+      <Flex
+        justify="between"
+        align="center"
+        wrap="wrap"
+        gap="2"
+        className={styles.cardHeader}
+      >
         <Text className={clsx(styles.title, styles.ellipsis)}>{title}</Text>
 
         {showAccountRate && (
diff --git a/src/features/StartupProgress/Firedancer/SnapshotProgress.tsx b/src/features/StartupProgress/Firedancer/SnapshotProgress.tsx
index 7596b67d..d42e039f 100644
--- a/src/features/StartupProgress/Firedancer/SnapshotProgress.tsx
+++ b/src/features/StartupProgress/Firedancer/SnapshotProgress.tsx
@@ -77,7 +77,7 @@ export function SnapshotProgress() {
       : 0;
 
   return (
-    <Flex direction="column" gap="40px">
+    <Flex direction="column" gap="26px">
       <Flex gap={rowGap}>
         <SnapshotLoadingCard
           title="Reading"
diff --git a/src/features/StartupProgress/Firedancer/SnapshotSparklineCard.tsx b/src/features/StartupProgress/Firedancer/SnapshotSparklineCard.tsx
index cafbf805..24527804 100644
--- a/src/features/StartupProgress/Firedancer/SnapshotSparklineCard.tsx
+++ b/src/features/StartupProgress/Firedancer/SnapshotSparklineCard.tsx
@@ -15,7 +15,7 @@ import type { TileType } from "../../../api/types";
 import TileBusy from "../../Overview/SlotPerformance/TileBusy";
 import { useMeasure } from "react-use";
 
-const gridSize = 20;
+const gridSize = 15;
 // add 1 px for the final grid line
 const height = gridSize * 6 + 1;
 const width = gridSize * 15 + 1;
diff --git a/src/features/StartupProgress/Firedancer/bars.module.css b/src/features/StartupProgress/Firedancer/bars.module.css
index 0d71d30d..aa432704 100644
--- a/src/features/StartupProgress/Firedancer/bars.module.css
+++ b/src/features/StartupProgress/Firedancer/bars.module.css
@@ -1,6 +1,6 @@
 .bars {
   width: 100%;
-  height: 77px;
+  height: 50px;
 
   rect {
     fill: var(--boot-progress-gossip-bars-color);
diff --git a/src/features/StartupProgress/Firedancer/gossip.module.css b/src/features/StartupProgress/Firedancer/gossip.module.css
index a01e58c7..b56681b9 100644
--- a/src/features/StartupProgress/Firedancer/gossip.module.css
+++ b/src/features/StartupProgress/Firedancer/gossip.module.css
@@ -15,7 +15,7 @@
   line-height: normal;
 
   .value {
-    color: var(--boot-progress-snapshot-pct-color);
+    color: var(--boot-progress-tertiary-color);
     font-size: 36px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/features/StartupProgress/Firedancer/progressBar.module.css b/src/features/StartupProgress/Firedancer/progressBar.module.css
index edf37c86..70fb61a3 100644
--- a/src/features/StartupProgress/Firedancer/progressBar.module.css
+++ b/src/features/StartupProgress/Firedancer/progressBar.module.css
@@ -1,10 +1,9 @@
 .progress-bar {
-  height: 25px;
   align-items: center;
   width: 100%;
 
   .current-step {
-    height: 100%;
+    height: 40px;
     border-width: 1px;
     border-style: solid;
     border-radius: 5px;
@@ -19,6 +18,6 @@
   }
 
   div {
-    height: 50%;
+    height: 25px;
   }
 }
diff --git a/src/features/StartupProgress/Firedancer/snapshot.module.css b/src/features/StartupProgress/Firedancer/snapshot.module.css
index 7712d757..94d78624 100644
--- a/src/features/StartupProgress/Firedancer/snapshot.module.css
+++ b/src/features/StartupProgress/Firedancer/snapshot.module.css
@@ -9,8 +9,8 @@
 }
 
 .card {
-  padding: 20px;
-  gap: 20px;
+  min-height: 150px;
+  padding: 10px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(234, 103, 103, 0.05);
   color: var(--boot-progress-primary-text-color);
@@ -55,6 +55,7 @@
 .throughput-card {
   flex-grow: 1;
   display: flex;
+  min-width: 200px;
   flex-direction: column;
   justify-content: space-between;
 
@@ -62,9 +63,6 @@
     font-size: 18px;
     line-height: normal;
     font-weight: 400;
-    & > * {
-      flex-basis: 25%;
-    }
   }
 
   .title {
@@ -86,7 +84,7 @@
   }
 
   .snapshot-pct-text {
-    color: var(--boot-progress-snapshot-pct-color);
+    color: var(--boot-progress-primary-text-color);
     font-size: 28px;
     font-weight: 400;
   }