feat: clarify grouped coupon payouts (#162) (#165)

src/shared/i18n/locales/ru.ts

@@ -443,6 +443,7 @@ const ru = {
 				transfer: "Перевод",
 			},
 			clearPeriod: "Очистить период",
+			couponPayment: "Выплата купонов {{instrument}}",
 			emptyText: "Измените период или фильтры.",
 			emptyTitle: "Операций нет",
 			entryLabel: {

src/shared/ui/EntryGroup/EntryGroup.module.css

@@ -4,6 +4,40 @@
 	background: var(--wl-color-subtle);
 }
 
+.flat {
+	background: var(--wl-color-surface);
+}
+
+.flat > :first-child {
+	border: 0;
+	background: transparent;
+}
+
+.flat .accounts {
+	padding-bottom: var(--mantine-spacing-md);
+}
+
+.flat .accountRow {
+	padding-block: var(--mantine-spacing-md);
+}
+
+.flat .accountRow:last-child {
+	padding-bottom: 0;
+}
+
+.flat .accountRow > :first-child {
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+.positive {
+	color: var(--wl-color-positive);
+}
+
+.negative {
+	color: var(--wl-color-negative);
+}
+
 .accounts {
 	padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-sm);
 	list-style: none;
@@ -38,4 +72,12 @@
 	.accountRow {
 		align-items: flex-start;
 	}
+
+	.flat .accountRow {
+		flex-wrap: wrap;
+	}
+
+	.flat .accountValue {
+		white-space: normal;
+	}
 }

src/shared/ui/EntryGroup/EntryGroup.tsx

@@ -9,11 +9,15 @@ import classes from "./EntryGroup.module.css";
 
 type AccountRowProps = {
 	accountName: string;
+	tone?: "negative"
+		| "neutral"
+		| "positive";
 	value: string;
 	valueLabel: string;
 };
 
 type EntryGroupProps = PropsWithChildren<{
+	flat?: boolean;
 	header: ReactNode;
 	label: string;
 }>;
@@ -25,13 +29,14 @@ type EntryGroupTotalProps = {
 
 const AccountRow: FC<AccountRowProps> = (props) => {
 	const accessibleName = `${props.accountName}, ${props.value}`;
+	const valueClass = props.tone ? classes[props.tone] : undefined;
 
 	return (
 		<li aria-label={accessibleName} className={classes.accountRow}>
 			<Text>{props.accountName}</Text>
 
 			<Stack className={classes.accountValue} gap={2}>
-				<Text fw={700}>{props.value}</Text>
+				<Text className={valueClass} fw={700}>{props.value}</Text>
 
 				<Text c="dimmed" size="xs">{props.valueLabel}</Text>
 			</Stack>
@@ -53,20 +58,24 @@ const AccountCardRow: FC<AccountRowProps> = props => (
 	</li>
 );
 
-const EntryGroup: FC<EntryGroupProps> = props => (
-	<Paper className={classes.group} component="li" withBorder>
-		{props.header}
+const EntryGroup: FC<EntryGroupProps> = (props) => {
+	const groupClass = props.flat ? `${classes.group} ${classes.flat}` : classes.group;
 
-		<Stack
-			aria-label={props.label}
-			className={classes.accounts}
-			component="ul"
-			gap={0}
-		>
-			{props.children}
-		</Stack>
-	</Paper>
-);
+	return (
+		<Paper className={groupClass} component="li" withBorder>
+			{props.header}
+
+			<Stack
+				aria-label={props.label}
+				className={classes.accounts}
+				component="ul"
+				gap={0}
+			>
+				{props.children}
+			</Stack>
+		</Paper>
+	);
+};
 
 const EntryGroupTotal: FC<EntryGroupTotalProps> = (props) => {
 	const { t } = useTranslation();