Improve style consistency Closes #1711

app/features/user-page/routes/u.$identifier.seasons.tsx

@@ -762,19 +762,14 @@ function Match({
 			<Link
 				to={sendouQMatchPage(match.id)}
 				className={clsx("u__season__match", {
-					"u__season__match__with-diff": match.spDiff,
+					"u__season__match__with-sub-section ":
+						match.spDiff || !match.isLocked,
 				})}
 			>
 				{rows}
-				{!match.isLocked ? (
-					<div className="stack horizontal sm text-xs text-lighter items-center justify-center">
-						<AlertIcon className="text-warning w-24px" />
-						{t("user:seasons.matchBeingProcessed")}
-					</div>
-				) : null}
 			</Link>
 			{match.spDiff ? (
-				<div className="u__season__match__sp-diff">
+				<div className="u__season__match__sub-section">
 					{match.spDiff > 0 ? (
 						<span className="text-success">▲</span>
 					) : (
@@ -783,6 +778,12 @@ function Match({
 					{Math.abs(roundToNDecimalPlaces(match.spDiff))}SP
 				</div>
 			) : null}
+			{!match.isLocked ? (
+				<div className="u__season__match__sub-section">
+					<AlertIcon className="u__season__match__sub-section__icon" />
+					{t("user:seasons.matchBeingProcessed")}
+				</div>
+			) : null}
 		</div>
 	);
 }

app/styles/u.css

@@ -362,11 +362,11 @@
 	gap: var(--s-4);
 }
 
-.u__season__match__with-diff {
+.u__season__match__with-sub-section {
 	border-radius: var(--rounded) var(--rounded) 0 0;
 }
 
-.u__season__match__sp-diff {
+.u__season__match__sub-section {
 	border-radius: 0 0 var(--rounded) var(--rounded);
 	background-color: var(--bg-light-variation);
 	font-size: var(--fonts-xs);
@@ -375,6 +375,12 @@
 	display: flex;
 	gap: var(--s-1);
 	justify-content: center;
+	padding-block: var(--s-0-5);
+}
+
+.u__season__match__sub-section__icon {
+	width: 18px;
+	color: var(--theme-warning);
 }
 
 .u__season__match:hover {

app/styles/utils.css

@@ -150,10 +150,6 @@
 	width: var(--s-24);
 }
 
-.w-24px {
-	width: 24px;
-}
-
 .w-max {
 	width: max-content;
 }