From 6b7149905adf4401d9714fbaa3b0e99615f51b37 Mon Sep 17 00:00:00 2001
From: Matt <matt@mattwb65.com>
Date: Wed, 16 Apr 2025 00:43:50 -0400
Subject: [PATCH] fix background colors in traceroute window

---
 webapp/frontend/src/components/TracerouteInfo.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/frontend/src/components/TracerouteInfo.vue b/webapp/frontend/src/components/TracerouteInfo.vue
index 4d9b495..4b3faa0 100644
--- a/webapp/frontend/src/components/TracerouteInfo.vue
+++ b/webapp/frontend/src/components/TracerouteInfo.vue
@@ -64,7 +64,7 @@ import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from
                                         </div>
                                         <div class="my-auto relative flex flex-none items-center justify-center">
                                             <div>
-                                                <div class="flex rounded-full h-12 w-12 text-white shadow-sm" :class="[ `bg-[${getNodeColor(state.selectedTraceRoute.to)}]`, `text-[${getNodeTextColor(state.selectedTraceRoute.to)}]` ]">
+                                                <div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.to)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.to)}]` ]">
                                                     <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.to)?.short_name ?? "?" }}</div>
                                                 </div>
                                             </div>
@@ -83,7 +83,7 @@ import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from
                                         </div>
                                         <div class="my-auto relative flex flex-none items-center justify-center">
                                             <div>
-                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColor(route)}]`, `text-[${getNodeTextColor(route)}]` ]">
+                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(route))}" :class="[ `text-[${getNodeTextColor(route)}]` ]">
                                                     <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(route)?.short_name ?? "?" }}</div>
                                                 </div>
                                             </div>
@@ -102,7 +102,7 @@ import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from
                                         </div>
                                         <div class="my-auto relative flex flex-none items-center justify-center">
                                             <div>
-                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColor(state.selectedTraceRoute.from)}]`, `text-[${getNodeTextColor(state.selectedTraceRoute.from)}]` ]">
+                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.from)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.from)}]` ]">
                                                     <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.from)?.short_name ?? "?" }}</div>
                                                 </div>
                                             </div>
@@ -121,7 +121,7 @@ import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from
                                         </div>
                                         <div class="my-auto relative flex flex-none items-center justify-center">
                                             <div>
-                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColor(state.selectedTraceRoute.gateway_id)}]`, `text-[${getNodeTextColor(state.selectedTraceRoute.gateway_id)}]` ]">
+                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.gateway_id)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.gateway_id)}]` ]">
                                                     <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.gateway_id)?.short_name ?? "?" }}</div>
                                                 </div>
                                             </div>