Merge pull request jason5ng32#65 from jason5ng32/dev

UX Improvements
PekingJam · Feb 3, 2024 · 39c8377 · 39c8377
2 parents f3f2f10 + 20b8a3b
commit 39c8377
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/components/dnsleaks.vue b/src/components/dnsleaks.vue
@@ -20,15 +20,19 @@
               'text-info': leak.ip === $t('dnsleaktest.StatusWait') || leak.ip === $t('dnsleaktest.StatusError'),
               'text-success': leak.ip.includes('.') || leak.ip.includes(':'),
             }">
-              <i class="bi bi-box-arrow-right"></i> {{ $t('dnsleaktest.Endpoint') }}: {{
+              <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') }}: {{
                 leak.ip }}
             </p>
 
             <div class="alert" :class="{
               'alert-info': leak.geo === $t('dnsleaktest.StatusWait'),
               'alert-success': leak.geo !== $t('dnsleaktest.StatusWait'),
             }" :data-bs-theme="isDarkMode ? 'dark' : ''">
-              <i class="bi bi-geo-alt-fill"></i> {{ $t('dnsleaktest.EndpointCountry') }}: <strong>{{ leak.geo }}</strong>
+              <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>
             </div>
           </div>
         </div>

diff --git a/src/components/speedtest.vue b/src/components/speedtest.vue
@@ -18,7 +18,7 @@
           <div class="card-body">
             <div class="progress" style="height: 20px; margin: 4pt 0 20pt 0;"
               :class="{ 'jn-opacity-0': speedTestStatus == 'idle', 'jn-progress-dark': isDarkMode }">
-              <div class="progress-bar progress-bar-striped progress-bar-animated bg-success jn-progress"
+              <div class="progress-bar progress-bar-striped progress-bar-animated jn-progress" :class="[ speedTestStatus === 'finished'? 'bg-success' : 'bg-info']"
                 role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                 id="speedtest-progress">
               </div>

diff --git a/src/components/webrtc.vue b/src/components/webrtc.vue
@@ -21,14 +21,18 @@
               'text-success': stun.ip.includes('.') || stun.ip.includes(':'),
               'text-danger': stun.ip === $t('webrtc.StatusError')
             }">
-              <i class="bi bi-pc-display-horizontal"></i>
+              <i class="bi"
+              :class="[stun.ip === $t('webrtc.StatusWait') ? 'bi-hourglass-split' : 'bi-pc-display-horizontal']"
+              ></i>
               {{ stun.ip }}
             </p>
             <div v-if="stun.natType" class="alert" :class="{
               'alert-info': stun.natType === $t('webrtc.StatusWait'),
               'alert-success': stun.natType !== $t('webrtc.StatusWait'),
             }" :data-bs-theme="isDarkMode ? 'dark' : ''">
-              <i class="bi bi-controller"></i> {{ stun.natType }}
+              <i class="bi"
+              :class="[stun.natType === $t('webrtc.StatusWait') ? 'bi-hourglass-split' : ' bi-controller']"
+              ></i> {{ stun.natType }}
             </div>
           </div>
         </div>