fix: more dense snapshot startup

Author: amliu-jumptrading

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";

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>
 

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 && (

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"

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;

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);

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;

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;
   }
 }

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,16 +55,14 @@
 .throughput-card {
   flex-grow: 1;
   display: flex;
+  min-width: 200px;
   flex-direction: column;
   justify-content: space-between;
 
   .card-header {
     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;
   }