feat: show return, cash and structure on account cards (#114)

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.module.css

@@ -1,7 +1,9 @@
 .list {
+	display: grid;
 	width: 100%;
 	margin: 0;
 	padding: 0;
+	gap: var(--mantine-spacing-sm);
 	list-style: none;
 }
 
@@ -9,15 +11,16 @@
 	display: grid;
 	grid-template-areas:
 		"identity balance"
-		"details balance";
+		"details balance"
+		"structure structure";
 	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
-	gap: var(--mantine-spacing-xs) var(--mantine-spacing-xl);
+	gap: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
 	align-items: center;
-	padding: var(--mantine-spacing-md);
+	padding: var(--mantine-spacing-lg);
 	border: 1px solid var(--wl-color-border);
-	border-left: 3px solid var(--mantine-color-blue-5);
+	border-left: 3px solid var(--wl-color-primary);
 	border-radius: var(--mantine-radius-md);
-	background: var(--mantine-color-white);
+	background: var(--wl-color-surface);
 	color: inherit;
 	text-decoration: none;
 	transition: background-color 160ms ease, border-color 160ms ease;
@@ -25,13 +28,12 @@
 
 .row:hover,
 .row:focus-visible {
-	border-color: var(--mantine-color-blue-3);
-	border-left-color: var(--mantine-color-blue-6);
-	background: var(--mantine-color-blue-0);
+	border-color: var(--wl-color-primary);
+	background: var(--wl-color-subtle);
 }
 
 .row:focus-visible {
-	outline: 2px solid var(--mantine-color-blue-6);
+	outline: 2px solid var(--wl-color-primary);
 	outline-offset: -2px;
 }
 
@@ -42,74 +44,101 @@
 
 .name {
 	margin: 0;
-	color: var(--mantine-color-blue-9);
+	color: var(--wl-color-text);
 	font-size: var(--mantine-font-size-md);
 	line-height: var(--mantine-line-height-md);
 	overflow-wrap: anywhere;
 }
 
 .accountType {
+	flex-shrink: 0;
 	align-self: flex-start;
 	padding: 2px var(--mantine-spacing-xs);
 	border-radius: var(--mantine-radius-sm);
-	background: var(--mantine-color-blue-0);
-	color: var(--mantine-color-blue-8);
 }
 
 .balance {
 	grid-area: balance;
 	min-width: 0;
-	padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-	border-radius: var(--mantine-radius-sm);
-	background: var(--wl-color-subtle);
 	text-align: right;
 }
 
 .summary {
-	font-variant-numeric: tabular-nums;
+	font-variant-numeric: tabular-nums lining-nums;
+	white-space: nowrap;
 }
 
 .total {
-	color: var(--mantine-color-dark-7);
+	color: var(--wl-color-text);
 	font-size: var(--mantine-font-size-lg);
-	line-height: var(--mantine-line-height-md);
-	overflow-wrap: anywhere;
+	line-height: var(--mantine-line-height-lg);
 }
 
-.total + .total {
-	font-weight: 500;
+.return,
+.cashValue {
+	font-variant-numeric: tabular-nums lining-nums;
+	white-space: nowrap;
+}
+
+.positive {
+	color: var(--wl-color-positive);
+}
+
+.negative {
+	color: var(--wl-color-negative);
+}
+
+.neutral {
+	color: var(--wl-color-muted);
+}
+
+.cash {
+	font-variant-numeric: tabular-nums lining-nums;
 }
 
 .details {
 	grid-area: details;
 	min-width: 0;
+	font-variant-numeric: tabular-nums lining-nums;
 }
 
-.positions {
-	margin: 0;
-}
-
-.positions > div {
-	display: flex;
+.structure {
+	grid-area: structure;
 	gap: var(--mantine-spacing-xs);
-	align-items: baseline;
 }
 
-.positions dd {
-	margin: 0;
+.structureBar {
+	display: flex;
+	width: 100%;
+	height: 6px;
+	overflow: hidden;
+	border-radius: var(--mantine-radius-xs);
+	background: var(--wl-color-subtle);
 }
 
-.status {
-	min-width: 0;
-	overflow-wrap: anywhere;
+.structureSection {
+	flex: none;
+	height: 100%;
+	background: var(--category-color);
 }
 
-@media (max-width: 48em) {
+@media (max-width: 47.9375em) {
 	.row {
-		column-gap: var(--mantine-spacing-sm);
+		grid-template-areas:
+			"identity"
+			"balance"
+			"structure"
+			"details";
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--mantine-spacing-sm);
+		padding: var(--mantine-spacing-md);
 	}
 
 	.balance {
-		max-width: 50vw;
+		text-align: left;
+	}
+
+	.balance > div {
+		justify-content: flex-start;
 	}
 }