Improve UI

src/views/GovernanceProposalView.vue

@@ -1,6 +1,8 @@
 <template>
   <section>
-    <b-card>
+    <b-card
+      no-body
+    >
       <b-card-header>
         <b-card-title>
           <b-badge
@@ -39,9 +41,16 @@
         </b-card-title>
       </b-card-header>
       <b-card-body>
-        <b-table-simple>
+        <b-table-simple
+          stacked="sm"
+          hover
+          striped
+        >
+          <tbody>
             <b-tr>
-            <b-td style="width:200px">
+              <b-td
+                style="text-transform: capitalize; vertical-align: top; width:200px"
+              >
                 {{ $t('proposal_id') }}
               </b-td><b-td>{{ proposal.id }}</b-td>
             </b-tr>
@@ -73,13 +82,17 @@
             <b-tr>
               <b-td>
                 {{ $t('proposal_type') }}
-            </b-td><b-td>{{ proposal.type }}</b-td>
+              </b-td><b-td>
+                {{ proposal.type }}
+              </b-td>
             </b-tr>
+          </tbody>
         </b-table-simple>
+        <div>
           <object-field-component
             :tablefield="proposal.contents"
             :small="false"
-        />
+          /></div>
       </b-card-body>
       <b-card-footer>
         <router-link :to="`../gov`">
@@ -99,7 +112,7 @@
       </b-card-footer>
     </b-card>
 
-    <b-card>
+    <b-card no-body>
       <b-card-header>
         <b-card-title>
           Votes
@@ -158,12 +171,14 @@
           {{ proposal.tally.abstain }}% voted Abstain
         </b-tooltip>
         <b-table
+          stacked="sm"
           :fields="votes_fields"
           :items="votes"
+          striped
         />
       </b-card-body>
     </b-card>
-    <b-card>
+    <b-card no-body>
       <b-card-header>
         <b-card-title>
           Deposits ({{ proposal.total_deposit }})
@@ -171,8 +186,10 @@
       </b-card-header>
       <b-card-body>
         <b-table
+          stacked="sm"
           :items="deposits"
           :fields="deposit_fields"
+          striped
         />
       </b-card-body>
       <b-card-footer>

src/views/Home.vue

@@ -132,7 +132,7 @@ export default {
   },
   created() {
     this.chains = JSON.parse(localStorage.getItem('chains'))
-    this.timer = setInterval(this.fetch, 12000)
+    this.timer = setInterval(this.fetch, 120000)
   },
   beforeDestroy() {
     clearInterval(this.timer)

src/views/ObjectFieldComponent.vue

@@ -4,14 +4,16 @@
     hover
     :small="small"
     striped
-    responsive
+    stacked="sm"
+    responsive="sm"
   >
+    <b-tbody>
       <b-tr
         v-for="(value, name) in tablefield"
         :key="name"
       >
         <b-td
-        style="text-transform: capitalize; vertical-align: top; width:200px"
+          style="text-transform: capitalize; vertical-align: top;"
         >
           {{ name }}
         </b-td>
@@ -32,12 +34,13 @@
           hover
           class="overflow-hidden"
         >
-        <b-tabs>
+          <b-tabs pills>
             <b-tab
               v-for="key in Object.keys(value)"
               :key="key"
               :title="key"
-            variant="danger"
+              class="pl-0 pr-0"
+              title-item-class="bg-light-primary"
             >
               <array-field-component
                 v-if="Array.isArray(value[key])"
@@ -55,12 +58,13 @@
           {{ value }}
         </b-td>
       </b-tr>
+    </b-tbody>
   </b-table-simple>
 </template>
 
 <script>
 import {
-  BTableSimple, BTr, BTd, BTabs, BTab,
+  BTableSimple, BTr, BTd, BTabs, BTab, BTbody,
 } from 'bootstrap-vue'
 import {
   abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, tokenFormatter,
@@ -75,6 +79,7 @@ export default {
     BTd,
     BTabs,
     BTab,
+    BTbody,
     ArrayFieldComponent,
   },
   props: {

src/views/Transaction.vue

@@ -5,7 +5,12 @@
         v-if="!tx.std"
         :tablefield="tx.raw"
       />
-      <b-table-simple v-else>
+      <b-table-simple
+        v-else
+        striped
+        stacked="sm"
+      >
+        <tbody>
           <b-tr>
             <b-td style="width:200px">
               {{ 'txhash' }}
@@ -69,12 +74,14 @@
               {{ 'timeout_height' }}
             </b-td><b-td>{{ tx.tx.timeout_height }}</b-td>
           </b-tr>
+        </tbody>
       </b-table-simple>
     </b-card>
 
     <b-card
       v-if="tx.tx.messages"
       :title="`Messages (total: ${tx.tx.messages.length})`"
+      no-body
     >
       <b-card-body
         v-for="(item, i) in tx.tx.messages "