diff --git a/app/routes/analyzer.tsx b/app/routes/analyzer.tsx index 0870b0bb5..f55c7e914 100644 --- a/app/routes/analyzer.tsx +++ b/app/routes/analyzer.tsx @@ -119,7 +119,6 @@ function StatCategory({ ); } -// xxx: cobra kai style function StatCard({ title, stat, @@ -132,16 +131,24 @@ function StatCard({ return (
-

{title}

- {stat.value !== stat.baseValue && ( +

{title}

+
- Current: {stat.value} - {suffix} +

Base

{" "} +
+ {stat.baseValue} + {suffix} +
- )} -
- Base: {stat.baseValue} - {suffix} + {stat.value !== stat.baseValue && ( +
+

Build

{" "} +
+ {stat.value} + {suffix} +
+
+ )}
diff --git a/app/styles/analyzer.css b/app/styles/analyzer.css index c941f5872..7b0abaffd 100644 --- a/app/styles/analyzer.css +++ b/app/styles/analyzer.css @@ -51,11 +51,34 @@ } .analyzer__stat-card__title { + height: 2.75rem; font-size: var(--fonts-xs); + text-align: center; +} + +.analyzer__stat-card-values { + display: flex; + justify-content: space-evenly; + gap: var(--s-1); } .analyzer__stat-card__value { - font-size: var(--fonts-xs); + display: flex; + flex-direction: column; + align-items: center; +} + +.analyzer__stat-card__value__title { + color: var(--text-lighter); + font-size: var(--fonts-xxs); + font-weight: 400; + letter-spacing: 0.5px; + text-transform: uppercase; +} + +.analyzer__stat-card__value__number { + font-size: var(--fonts-md); + font-weight: var(--bold); } .analyzer__consumption-table-container {