UX Improvements

jason5ng32 · Feb 5, 2024 · bc6e4ce · bc6e4ce
1 parent a634f23
commit bc6e4ce
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 199 deletions.
diff --git a/src/components/connectivity.vue b/src/components/connectivity.vue
@@ -20,8 +20,8 @@
       <div class="jn-title2">
         <h2 id="Connectivity" :class="{ 'mobile-h2': isMobile }">🚦 {{ $t('connectivity.Title') }}</h2>
         <button @click="checkAllConnectivity(false, true)"
-          :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"><i
-            class="bi bi-arrow-clockwise"></i></button>
+          :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"
+          aria-label="Refresh Connectivity Test"><i class="bi bi-arrow-clockwise"></i></button>
       </div>
       <div class="text-secondary">
         <p>{{ $t('connectivity.Note') }}</p>
@@ -89,10 +89,10 @@ export default {
       alertMessage: "",
       connectivityTests: [
         {
-          id: "netease",
-          name: "Netease",
-          icon: "browser-safari",
-          url: "https://www.163.com/favicon.ico?",
+          id: "bilibili",
+          name: "Bilibili",
+          icon: "tv-fill",
+          url: "https://www.bilibili.com/favicon.ico?",
           status: this.$t('connectivity.StatusWait'),
           time: 0,
         },
@@ -116,7 +116,7 @@ export default {
           id: "google",
           name: "Google",
           icon: "google",
-          url: "https://www.google.com/images/errors/robot.png?",
+          url: "https://www.google.com/favicon.ico?",
           status: this.$t('connectivity.StatusWait'),
           time: 0,
         },
@@ -132,15 +132,15 @@ export default {
           id: "youtube",
           name: "Youtube",
           icon: "youtube",
-          url: "https://i.ytimg.com/vi/GYkq9Rgoj8E/hq720.jpg?",
+          url: "https://www.youtube.com/favicon.ico?",
           status: this.$t('connectivity.StatusWait'),
           time: 0,
         },
         {
           id: "github",
           name: "Github",
           icon: "github",
-          url: "https://raw.githubusercontent.com/jason5ng32/fulian4/master/background.jpg?",
+          url: "https://github.com/favicon.ico?",
           status: this.$t('connectivity.StatusWait'),
           time: 0,
         },

diff --git a/src/components/dnsleaks.vue b/src/components/dnsleaks.vue
@@ -3,9 +3,8 @@
   <div class="dnsleak-test-section mb-4">
     <div class="jn-title2">
       <h2 id="DNSLeakTest" :class="{ 'mobile-h2': isMobile }">🛑 {{ $t('dnsleaktest.Title') }}</h2>
-      <button @click="checkAllDNSLeakTest(true)"
-        :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"><i
-          class="bi bi-arrow-clockwise"></i></button>
+      <button @click="checkAllDNSLeakTest(true)" :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"
+        aria-label="Refresh DNS Leak Test"><i class="bi bi-arrow-clockwise"></i></button>
     </div>
     <div class="text-secondary">
       <p>{{ $t('dnsleaktest.Note') }}</p>
@@ -21,8 +20,8 @@
               'text-success': leak.ip.includes('.') || leak.ip.includes(':'),
             }">
               <i class="bi"
-              :class="[leak.ip === $t('dnsleaktest.StatusWait') || leak.ip === $t('dnsleaktest.StatusError') ? 'bi-hourglass-split' : 'bi-box-arrow-right']"
-              ></i> {{ $t('dnsleaktest.Endpoint') }}: {{
+                :class="[leak.ip === $t('dnsleaktest.StatusWait') || leak.ip === $t('dnsleaktest.StatusError') ? 'bi-hourglass-split' : 'bi-box-arrow-right']"></i>
+              {{ $t('dnsleaktest.Endpoint') }}: {{
                 leak.ip }}
             </p>
 
@@ -31,8 +30,8 @@
               'alert-success': leak.geo !== $t('dnsleaktest.StatusWait'),
             }" :data-bs-theme="isDarkMode ? 'dark' : ''">
               <i class="bi"
-              :class="[leak.ip === $t('dnsleaktest.StatusWait') || leak.ip === $t('dnsleaktest.StatusError') ? 'bi-hourglass-split' : 'bi-geo-alt-fill']"
-              ></i> {{ $t('dnsleaktest.EndpointCountry') }}: <strong>{{ leak.geo }}</strong>
+                :class="[leak.ip === $t('dnsleaktest.StatusWait') || leak.ip === $t('dnsleaktest.StatusError') ? 'bi-hourglass-split' : 'bi-geo-alt-fill']"></i>
+              {{ $t('dnsleaktest.EndpointCountry') }}: <strong>{{ leak.geo }}</strong>
             </div>
           </div>
         </div>

diff --git a/src/components/footer.vue b/src/components/footer.vue
@@ -2,13 +2,15 @@
   <footer>
     <div id="copyleft">
       <p class="text-center">{{ $t('page.footerName') }} <a :href="$t('page.footerLink')" class="link-dark"
-          target="_blank" @click="$trackEvent('Footer', 'FooterClick', 'Github');"><i class="bi bi-github" :class="{ 'dark-mode': isDarkMode }"></i></a>
+          target="_blank" @click="$trackEvent('Footer', 'FooterClick', 'Github');" aria-label="Github"><i
+            class="bi bi-github" :class="{ 'dark-mode': isDarkMode }"></i></a>
       </p>
     </div>
 
     <div id="about" class="text-center mb-2">
       <a class="link link-underline-offset link-underline-opacity-0" :class="[isDarkMode ? 'link-info' : 'link-dark']"
-        data-bs-toggle="offcanvas" href="#About" role="button" aria-controls="About" @click="$trackEvent('Footer', 'FooterClick', 'About');">
+        data-bs-toggle="offcanvas" href="#About" role="button" aria-controls="About"
+        @click="$trackEvent('Footer', 'FooterClick', 'About');">
         {{ $t('about.Title') }} <i class="bi bi-arrow-left-circle-fill"></i>
       </a>
     </div>