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

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();