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 {