From 39dfe47d6a3dd054b917967f2ae80067df1e0e89 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sat, 26 Jul 2025 15:44:52 -0400
Subject: [PATCH] replace dynamic class name with inline styles for
 SkBadgeStrip

---
 .../frontend/src/components/SkBadgeStrip.vue  | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/SkBadgeStrip.vue b/packages/frontend/src/components/SkBadgeStrip.vue
index b935d9adf5..9546848cc3 100644
--- a/packages/frontend/src/components/SkBadgeStrip.vue
+++ b/packages/frontend/src/components/SkBadgeStrip.vue
@@ -10,7 +10,11 @@ Horizontal strip that displays a user's badges.
 	<div
 		v-for="badge of badges"
 		:key="badge.key"
-		:class="[$style.badge, $style[`semantic_${badge.style ?? 'neutral'}`]]"
+		:class="$style.badge"
+		:style="{
+			'color': color(badge),
+			'border-color': color(badge),
+		}"
 	>
 		{{ badge.label }}
 	</div>
@@ -42,6 +46,16 @@ export interface Badge {
 defineProps<{
 	badges: Badge[],
 }>();
+
+// These can't be classes, or Vite will optimize them away from production builds.
+function color(badge: Badge) {
+	switch (badge.style) {
+		case 'success': return 'var(--MI_THEME-success)';
+		case 'warning': return 'var(--MI_THEME-warn)';
+		case 'error': return 'var(--MI_THEME-error)';
+		default: return 'unset';
+	}
+}
 </script>
 
 <style module lang="scss">
@@ -59,19 +73,4 @@ defineProps<{
 	padding: 2px 6px;
 	font-size: 85%;
 }
-
-.semantic_error {
-	color: var(--MI_THEME-error);
-	border-color: var(--MI_THEME-error);
-}
-
-.semantic_warning {
-	color: var(--MI_THEME-warn);
-	border-color: var(--MI_THEME-warn);
-}
-
-.semantic_success {
-	color: var(--MI_THEME-success);
-	border-color: var(--MI_THEME-success);
-}
 </style>