UX Improvements

Author: jason5ng32

src/components/globallatency.vue

@@ -60,7 +60,7 @@
                   <tbody>
                     <tr v-for="result in pingResults" :key="result.country">
                       <td>
-                        <span :class="'fi fi-' + result.country.toLowerCase()"></span>
+                        <span :class="'jn-fl fi fi-' + result.country.toLowerCase()"></span>
                         {{ result.country }}
                       </td>
                       <td :class="result.stats.min < 100 ? 'text-success' : ''">{{ result.stats.min.toFixed(1) }}

src/components/ipcheck.vue

@@ -67,7 +67,7 @@
                   </span>
                   <span class="col-10 ">
                     {{ card.country_name }}
-                    <span v-if="card.country_code" :class="'fi fi-' + card.country_code.toLowerCase()"></span>
+                    <span v-if="card.country_code" :class="'jn-fl fi fi-' + card.country_code.toLowerCase()"></span>
                   </span>
                 </li>
 

src/components/mtrtest.vue

@@ -49,7 +49,7 @@
                     <button class="accordion-button" type="button" data-bs-toggle="collapse"
                       :data-bs-target="'#collapse' + index" :aria-expanded="index === 0 ? 'true' : 'false'"
                       :aria-controls="'collapse' + index" :class="{ collapsed: index !== 0 }">
-                      <span :class="'fi fi-' + result.country.toLowerCase()"></span>&nbsp;<strong>{{ result.city }}, {{
+                      <span :class="'jn-fl fi fi-' + result.country.toLowerCase()"></span>&nbsp;<strong>{{ result.city }}, {{
                         result.country }}</strong>
                       <span v-if="!isMobile">&nbsp;-&nbsp;{{ result.network }}&nbsp;</span>
                       <span v-if="!isMobile" class="badge rounded-pill"

src/components/queryip.vue

@@ -28,7 +28,7 @@
                                         }}</span>&nbsp;:&nbsp;
                                     <span class="col-10 ">{{ modalQueryResult.country_name }}&nbsp;
                                         <span v-if="modalQueryResult.country_code"
-                                            :class="'fi fi-' + modalQueryResult.country_code.toLowerCase()"></span>
+                                            :class="'jn-fl fi fi-' + modalQueryResult.country_code.toLowerCase()"></span>
                                     </span>
                                 </li>
                                 <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span

src/style.css

@@ -71,6 +71,10 @@
 height: fit-content;
 }
 
+.jn-fl {
+  box-shadow: 0 0 1pt #201f1f70;
+}
+
 .jn-list-group-item {
   border-bottom: 1px solid rgb(222, 226, 230);
   padding: 12px 4px 12px 4px;