Corrected Korea

resources/js/Components/FlightsGoneBy/AirlineLogo.vue

@@ -2,6 +2,8 @@
 import {Airline, SharedProps} from "@/Types/types";
 import {computed} from "vue";
 import {usePage} from "@inertiajs/vue3";
+import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
+import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 
 const props = defineProps<{
     airline: Airline | null;
@@ -22,44 +24,36 @@ const size = computed(() => props.size ? props.size + 'px' : '30px');
 </script>
 
 <template>
-    <v-tooltip location="top" :open-delay="200">
+    <GlassTooltip>
         <template #activator="{ props: tooltipProps }">
             <span class="airline-logo" v-bind="tooltipProps"></span>
         </template>
 
-        <template #default>
-            <div v-if="airline" class="airline-tooltip glass glass-border">
-                <div class="tooltip-header">
+        <div v-if="airline" class="airline-tooltip-content">
+            <div class="tooltip-header">
+                <div class="logo-title">
                     <span class="airline-logo-tooltip" :style="logoStyle"></span>
                     <span class="airline-name">{{ airline.name }}</span>
-                    <span v-if="airline.IATA_code || airline.ICAO_code" class="codes">
-                        <span v-if="airline.IATA_code" class="code-badge">{{ airline.IATA_code }}</span>
-                        <span v-if="airline.ICAO_code" class="code-badge">{{ airline.ICAO_code }}</span>
-                    </span>
                 </div>
-                <div class="tooltip-divider"></div>
-                <div class="tooltip-meta">
-                    <span
-                        v-if="airline.country"
-                        :class="`fi fi-${airline.country.code.toLowerCase()}`"
-                        class="country-flag"
-                    ></span>
-                    <span v-if="airline.country" class="country-name">{{ airline.country.name }}</span>
+                <div v-if="airline.IATA_code || airline.ICAO_code" class="codes">
+                    <InlineBadge v-if="airline.IATA_code" variant="generic">{{ airline.IATA_code }}</InlineBadge>
+                    <InlineBadge v-if="airline.ICAO_code" variant="generic">{{ airline.ICAO_code }}</InlineBadge>
                 </div>
             </div>
-            <span v-else class="airline-tooltip muted">Unknown airline</span>
-        </template>
-    </v-tooltip>
+            <div class="tooltip-divider"></div>
+            <div class="tooltip-meta">
+                <span
+                    v-if="airline.country"
+                    :class="`fi fi-${airline.country.code.toLowerCase()}`"
+                    class="country-flag"
+                ></span>
+                <span v-if="airline.country" class="country-name">{{ airline.country.name }}</span>
+            </div>
+        </div>
+    </GlassTooltip>
 </template>
 
 <style scoped>
-
-:deep(.v-overlay__content) {
-    background: transparent !important;
-    box-shadow: none !important;
-    filter: none !important;
-}
-
 span.airline-logo {
     width: v-bind(size);
     height: v-bind(size);
@@ -69,28 +63,26 @@ span.airline-logo {
     display: inline-block;
 }
 
-.airline-tooltip {
-    background: var(--surface);
-    border: 1px solid var(--table-border);
-    border-radius: 8px;
-    padding: 10px 14px;
-    min-width: 180px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    color: var(--text);
-    font-size: 0.85rem;
+.airline-tooltip-content {
+    display: contents;
 }
 
-.tooltip-header {
+.logo-title {
     display: flex;
     align-items: center;
     gap: 10px;
 }
 
+.codes{
+    width:100%;
+    display: flex;
+    gap: 4px;
+    padding-top:1em;
+    justify-content:flex-start;
+}
+
+
 .airline-name {
-    font-weight: 600;
-    color: var(--muted);
     letter-spacing: 0.03em;
 }
 
@@ -121,18 +113,4 @@ span.airline-logo {
     margin-left: auto;
 }
 
-.code-badge {
-    background: var(--accent-glow);
-    border: 1px solid var(--accent-soft);
-    color: var(--accent);
-    border-radius: 4px;
-    padding: 1px 6px;
-    font-size: 0.72rem;
-    font-family: monospace;
-    letter-spacing: 0.05em;
-}
-
-.muted {
-    color: var(--muted);
-}
 </style>