feat: redesign year-over-year income comparison

2026-09-09 18:28:15 +03:00
parent 451400b63b
commit 91eaeb5661
6 changed files with 398 additions and 59 deletions
@@ -29,6 +29,123 @@
 	overflow-wrap: anywhere;
 }

+.comparison {
+	container-type: inline-size;
+}
+
+.comparisonGrid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: var(--mantine-spacing-sm);
+}
+
+.comparisonPanel {
+	min-width: 0;
+	padding: var(--mantine-spacing-md);
+	border-radius: var(--mantine-radius-md);
+	border-top: 3px solid var(--mantine-color-gray-4);
+	background: var(--mantine-color-gray-0);
+}
+
+.comparisonPanel[data-kind="selected"] {
+	border-color: var(--mantine-color-blue-6);
+	background: var(--mantine-color-blue-0);
+}
+
+.comparisonPanel[data-tone="positive"] {
+	border-color: var(--mantine-color-green-8);
+	background: var(--mantine-color-green-0);
+}
+
+.comparisonPanel[data-tone="negative"] {
+	border-color: var(--mantine-color-red-8);
+	background: var(--mantine-color-red-0);
+}
+
+.comparisonLabel,
+.comparisonValues dt {
+	color: var(--mantine-color-gray-7);
+}
+
+.comparisonValues {
+	margin: var(--mantine-spacing-md) 0 0;
+	font-size: var(--mantine-font-size-sm);
+}
+
+.comparisonValues dd {
+	min-width: 0;
+	margin: 0;
+	font-weight: 600;
+	font-variant-numeric: tabular-nums;
+	overflow-wrap: anywhere;
+}
+
+.comparisonTotal {
+	margin-bottom: var(--mantine-spacing-md);
+	padding-bottom: var(--mantine-spacing-md);
+	border-bottom: 1px solid var(--mantine-color-gray-3);
+}
+
+.comparisonTotal dd {
+	margin-top: 4px;
+	font-size: var(--mantine-h2-font-size);
+	line-height: 1.3;
+	font-weight: 700;
+	letter-spacing: -0.025em;
+}
+
+.comparisonValues dd[data-tone="positive"] {
+	color: color-mix(
+		in srgb,
+		var(--mantine-color-green-9) 85%,
+		var(--mantine-color-black)
+	);
+}
+
+.comparisonValues dd[data-tone="negative"] {
+	color: var(--mantine-color-red-9);
+}
+
+.comparisonValues dd[data-tone="neutral"] {
+	color: var(--mantine-color-gray-7);
+}
+
+.comparisonPanel[data-kind="selected"] .comparisonTotal dd {
+	color: var(--mantine-color-blue-8);
+}
+
+.comparisonDetail {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 4px var(--mantine-spacing-xs);
+	margin-top: var(--mantine-spacing-xs);
+}
+
+.comparisonPercent {
+	display: inline-block;
+	margin-left: var(--mantine-spacing-xs);
+	padding: 2px 6px;
+	border-radius: var(--mantine-radius-sm);
+	background: var(--mantine-color-white);
+	font-size: var(--mantine-font-size-xs);
+	font-weight: 600;
+	line-height: 1.5;
+	letter-spacing: normal;
+	vertical-align: middle;
+}
+
+.comparisonNotice {
+	background: var(--mantine-color-gray-0);
+	border-left: 3px solid var(--mantine-color-gray-4);
+}
+
+@container (min-width: 42em) {
+	.comparisonGrid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+}
+
@media (max-width: 35.999em) {
 	.fields {
 		grid-template-columns: minmax(0, 1fr);