From 4a049f924c903c412368aca1ea3991d3d3521288 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Sun, 4 Feb 2024 00:57:34 +0800
Subject: [PATCH] UX Improvements

---
 src/components/ipcheck.vue | 17 +++++++++--------
 src/components/queryip.vue | 10 +++++-----
 src/style.css              |  8 +++++---
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/ipcheck.vue b/src/components/ipcheck.vue
index 91a9aa29..e5076817 100644
--- a/src/components/ipcheck.vue
+++ b/src/components/ipcheck.vue
@@ -32,12 +32,13 @@
           <div v-for="card in ipDataCards" :key="card.id" :ref="card.id"
             :class="{ 'jn-opacity': !card.asn, 'col-xl-4': true, 'col-lg-6': true, 'col-md-6': true, 'mb-4': true }">
             <div class="card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
-              <div class="card-header jn-ip-title" :class="{ 'dark-mode-title': isDarkMode }" style="font-weight: bold;">
+              <div class="card-header jn-ip-title" :class="{ 'dark-mode-title': isDarkMode, 'bg-light': !isMapShown && !isDarkMode }" style="font-weight: bold;">
                 <span>{{ $t('ipInfos.Source') }}: {{ card.source }}</span>
                 <button @click="refreshCard(card)"
                   :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']">
                   <i class="bi bi-arrow-clockwise"></i></button>
               </div>
+              
               <img v-if="isMapShown" :src="isDarkMode ? card.mapUrl_dark : card.mapUrl" class="card-img-top jn-map-image"
                 alt="Map">
 
@@ -45,7 +46,7 @@
               " class="card-body">
                 <ul class="list-group list-group-flush">
                   <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
-                      class="jn-text">🖥️ {{ $t('ipInfos.IP') }}</span>: {{ card.ip
+                      class="jn-text"><i class="bi bi-pc-display-horizontal"></i> {{ $t('ipInfos.IP') }}</span>: {{ card.ip
                       }}
                     <i v-if="isValidIP(card.ip)"
                       :class="copiedStatus[card.id] ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'"
@@ -53,24 +54,24 @@
                   </li>
                   <li class="list-group-item jn-list-group-item"
                     :class="{ 'dark-mode': isDarkMode, 'mobile-list': isMobile && isCardsCollapsed }">
-                    <span class="jn-text">🌍 {{ $t('ipInfos.Country') }}</span>: {{
+                    <span class="jn-text"><i class="bi bi-geo-alt-fill"></i> {{ $t('ipInfos.Country') }}</span>: {{
                       card.country_name }}&nbsp;<span v-if="card.country_code"
                       :class="'fi fi-' + card.country_code.toLowerCase()"></span>
                   </li>
                   <li v-show="!isMobile || !isCardsCollapsed" class="list-group-item jn-list-group-item"
-                    :class="{ 'dark-mode': isDarkMode }"><span class="jn-text">🏚️
+                    :class="{ 'dark-mode': isDarkMode }"><span class="jn-text"><i class="bi bi-houses"></i>
                       {{ $t('ipInfos.Region') }}</span>: {{ card.region
                       }}</li>
                   <li v-show="!isMobile || !isCardsCollapsed" class="list-group-item jn-list-group-item"
-                    :class="{ 'dark-mode': isDarkMode }"><span class="jn-text">🚏
+                    :class="{ 'dark-mode': isDarkMode }"><span class="jn-text"><i class="bi bi-sign-turn-right"></i>
                       {{ $t('ipInfos.City') }}</span>: {{ card.city }}
                   </li>
                   <li v-show="!isMobile || !isCardsCollapsed" class="list-group-item jn-list-group-item"
-                    :class="{ 'dark-mode': isDarkMode }"><span class="jn-text">🏢
+                    :class="{ 'dark-mode': isDarkMode }"><span class="jn-text"><i class="bi bi-buildings"></i>
                       {{ $t('ipInfos.ISP') }}</span>: {{ card.isp }}
                   </li>
                   <li v-show="!isMobile || !isCardsCollapsed" class="list-group-item jn-list-group-item"
-                    :class="{ 'dark-mode': isDarkMode }"><span class="jn-text">📶
+                    :class="{ 'dark-mode': isDarkMode }"><span class="jn-text"><i class="bi bi-reception-4"></i>
                       {{ $t('ipInfos.ASN') }}</span>: <a v-if="card.asnlink" :href="card.asnlink" target="_blank">{{
                         card.asn }}</a><a v-else>{{ card.asn }}</a></li>
                 </ul>
@@ -468,7 +469,7 @@ export default {
         longitude: data.longitude || "",
         isp: data.org || "",
         asn: data.asn || "",
-        asnlink: data.asn ? `https://radar.cloudflare.com/traffic/${data.asn}` : false,
+        asnlink: data.asn ? `https://radar.cloudflare.com/${data.asn}` : false,
         mapUrl: data.latitude && data.longitude ? `/api/map?latitude=${data.latitude}&longitude=${data.longitude}&language=${this.bingMapLanguage}&CanvasMode=CanvasLight` : "",
         mapUrl_dark: data.latitude && data.longitude ? `/api/map?latitude=${data.latitude}&longitude=${data.longitude}&language=${this.bingMapLanguage}&CanvasMode=RoadDark` : ""
       };
diff --git a/src/components/queryip.vue b/src/components/queryip.vue
index 27c23ffd..5e33f58c 100644
--- a/src/components/queryip.vue
+++ b/src/components/queryip.vue
@@ -22,24 +22,24 @@
                         <div class="card-body">
                             <ul class="list-group list-group-flush">
                                 <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }">
-                                    <span class="jn-text">🌍 {{ $t('ipInfos.Country') }}</span>: {{
+                                    <span class="jn-text"><i class="bi bi-pc-display-horizontal"></i> {{ $t('ipInfos.Country') }}</span>: {{
                                         modalQueryResult.country_name }}&nbsp;<span v-if="modalQueryResult.country_code"
                                         :class="'fi fi-' + modalQueryResult.country_code.toLowerCase()"></span>
                                 </li>
                                 <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
-                                        class="jn-text">🏚️ {{ $t('ipInfos.Region') }}</span>: {{
+                                        class="jn-text"><i class="bi bi-houses"></i> {{ $t('ipInfos.Region') }}</span>: {{
                                             modalQueryResult.region
                                         }}</li>
                                 <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
-                                        class="jn-text">🚏 {{ $t('ipInfos.City') }}</span>: {{
+                                        class="jn-text"><i class="bi bi-sign-turn-right"></i> {{ $t('ipInfos.City') }}</span>: {{
                                             modalQueryResult.city }}
                                 </li>
                                 <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
-                                        class="jn-text">🏢 {{ $t('ipInfos.ISP') }}</span>: {{
+                                        class="jn-text"><i class="bi bi-buildings"></i> {{ $t('ipInfos.ISP') }}</span>: {{
                                             modalQueryResult.isp }}
                                 </li>
                                 <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
-                                        class="jn-text">📶 {{ $t('ipInfos.ASN') }}</span>: <a
+                                        class="jn-text"><i class="bi bi-reception-4"></i> {{ $t('ipInfos.ASN') }}</span>: <a
                                         v-if="modalQueryResult.asnlink" :href="modalQueryResult.asnlink" target="_blank">{{
                                             modalQueryResult.asn }}</a><a v-else>{{ modalQueryResult.asn }}</a></li>
                             </ul>
diff --git a/src/style.css b/src/style.css
index 66d1aff2..06842197 100644
--- a/src/style.css
+++ b/src/style.css
@@ -67,9 +67,11 @@
   max-width: 1400px;
 }
 
-.jn-text {
-  font-weight: bold;
-}
+/* .jn-text {
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-color: #1a8754;
+} */
 
 .jn-list-group-item {
   padding: 0.75rem 0.25rem;