From 4585d30d539c4fa15956e96c67c404f3d93281f5 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 6 Feb 2026 15:35:12 +0700
Subject: [PATCH] Tweak hub distance compass styling

---
 app/components/catalog/HubCard.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/components/catalog/HubCard.vue b/app/components/catalog/HubCard.vue
index d532b5f..d6999f7 100644
--- a/app/components/catalog/HubCard.vue
+++ b/app/components/catalog/HubCard.vue
@@ -19,18 +19,17 @@
         <!-- Title + distance/compass -->
         <div class="flex items-start justify-between gap-2">
           <Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
-          <div class="flex items-center gap-2 text-xs text-white/70 whitespace-nowrap">
-            <Text v-if="distanceLabel" size="xs" class="text-white/70">{{ distanceLabel }}</Text>
+          <div class="flex items-center gap-2 text-xs text-white/50 whitespace-nowrap">
+            <Text v-if="distanceLabel" size="xs" class="text-white/50">{{ distanceLabel }}</Text>
             <div v-if="bearing !== null" class="flex items-center gap-1">
-              <div class="w-6 h-6 rounded-full border border-white/20 bg-white/5 flex items-center justify-center">
+              <div class="w-6 h-6 rounded-full border border-white/10 bg-white/5 flex items-center justify-center">
                 <Icon
                   name="lucide:arrow-up"
                   size="12"
-                  class="text-white/80"
+                  class="text-white/50"
                   :style="{ transform: `rotate(${bearing}deg)` }"
                 />
               </div>
-              <Text size="xs" class="text-white/60">{{ Math.round(bearing) }}°</Text>
             </div>
           </div>
         </div>