From a8acd8e21fabb4cce5b6c76610cbc74fbc0b2317 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Fri, 18 Mar 2022 15:35:28 +0800
Subject: [PATCH] Improve UI of uptime

---
 src/views/Uptime.vue              | 10 ++++++----
 src/views/UptimeMyChainBlocks.vue | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/views/Uptime.vue b/src/views/Uptime.vue
index fc8b1d48..3518a77f 100644
--- a/src/views/Uptime.vue
+++ b/src/views/Uptime.vue
@@ -40,14 +40,15 @@
               @change="pinValidator(`${chain}#${x.address}`)"
             ><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
             </b-form-checkbox>
-            <span
+            <b-badge
               v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0"
               v-b-tooltip.hover.v-danger
-              :title="`missed blocks:${missing[x.address].missed_blocks_counter}`"
+              variant="light-danger"
+              :title="`missed blocks: ${missing[x.address].missed_blocks_counter}`"
               class="text-danger text-bolder"
             >
               {{ missing[x.address].missed_blocks_counter }}
-            </span>
+            </b-badge>
           </div>
           <div class="d-flex justify-content-between align-self-stretch flex-wrap">
             <div
@@ -72,7 +73,7 @@
 
 <script>
 import {
-  BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton,
+  BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BBadge,
 } from 'bootstrap-vue'
 
 import {
@@ -88,6 +89,7 @@ export default {
     BCard,
     BAlert,
     BButton,
+    BBadge,
     BFormCheckbox,
   },
   directives: {
diff --git a/src/views/UptimeMyChainBlocks.vue b/src/views/UptimeMyChainBlocks.vue
index ab0c3d64..84dcbad4 100644
--- a/src/views/UptimeMyChainBlocks.vue
+++ b/src/views/UptimeMyChainBlocks.vue
@@ -32,14 +32,15 @@
             >
               <span class="d-inline-block text-truncate font-weight-bold align-bottom"> {{ x.validator.moniker }} </span>
             </b-form-checkbox>
-            <span
+            <b-badge
               v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0"
               v-b-tooltip.hover.v-danger
-              :title="`missed blocks:${missing[x.address].missed_blocks_counter}`"
+              variant="light-danger"
+              :title="`missed blocks: ${missing[x.address].missed_blocks_counter}`"
               class="text-danger text-bolder"
             >
               {{ missing[x.address].missed_blocks_counter }}
-            </span>
+            </b-badge>
           </div>
           <div class="d-flex justify-content-between align-self-stretch flex-wrap">
             <div
@@ -64,7 +65,7 @@
 
 <script>
 import {
-  BRow, BCol, VBTooltip, BCard, BAlert, BCardTitle, BFormCheckbox,
+  BRow, BCol, VBTooltip, BCard, BAlert, BCardTitle, BFormCheckbox, BBadge,
 } from 'bootstrap-vue'
 
 import {
@@ -75,6 +76,7 @@ import { Bech32, toHex } from '@cosmjs/encoding'
 export default {
   name: 'Blocks',
   components: {
+    BBadge,
     BRow,
     BCol,
     BCard,