Updated metrics components for compare mode.

src/components/metrics/MetricCard.module.css

@@ -2,7 +2,16 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-width: 140px;
+  min-width: 150px;
+}
+
+.card.compare {
+  gap: 10px;
+}
+
+.card.compare .change {
+  font-size: 16px;
+  padding: 5px 10px;
 }
 
 .card:first-child {
@@ -14,30 +23,33 @@
 }
 
 .value {
-  display: flex;
-  align-items: center;
-  font-size: 36px;
+  font-size: 40px;
   font-weight: 700;
   white-space: nowrap;
-  min-height: 60px;
   color: var(--base900);
+  line-height: 1.5;
+}
+
+.value.prev {
+  color: var(--base800);
 }
 
 .label {
-  display: flex;
-  align-items: center;
   font-weight: 700;
-  gap: 10px;
   white-space: nowrap;
-  min-height: 30px;
   color: var(--base800);
 }
 
 .change {
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+  font-weight: 700;
   padding: 0 5px;
   border-radius: 5px;
   color: var(--base500);
+  align-self: flex-start;
 }
 
 .change.positive {
@@ -49,7 +61,3 @@
   color: var(--red700);
   background: var(--red100);
 }
-
-.change.plusSign::before {
-  content: '+';
-}