From 674810d51352ddf91d3b9a03b55722d1c389669f Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 21:02:58 +0800
Subject: [PATCH] feat: dashboard Dashboard Community Pool Content exceeds

---
 .../src/components/ProposalProcess.vue        |   5 +-
 .../dashboard/src/modules/[chain]/index.vue   | 247 +++++++++++-------
 src/components/CardStatisticsVertical.vue     |  38 +--
 src/components/ProposalListItem.vue           |  31 ++-
 src/modules/[chain]/index.vue                 | 133 +++++-----
 tailwind.config.js                            |   1 -
 6 files changed, 263 insertions(+), 192 deletions(-)

diff --git a/packages/dashboard/src/components/ProposalProcess.vue b/packages/dashboard/src/components/ProposalProcess.vue
index 28d3e823..8fd5bec4 100644
--- a/packages/dashboard/src/components/ProposalProcess.vue
+++ b/packages/dashboard/src/components/ProposalProcess.vue
@@ -37,10 +37,7 @@ const veto = computed(() =>
   <div class="progress">
     <div class="progress-bar bg-success" :style="`width: ${yes}`"></div>
     <div class="progress-bar bg-error" :style="`width: ${no}`"></div>
-    <div
-      class="progress-bar"
-      :style="`width: ${veto}; background-color: #B71C1C;`"
-    ></div>
+    <div class="progress-bar bg-[#B71C1C]" :style="`width: ${veto};`"></div>
     <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
   </div>
 </template>
diff --git a/packages/dashboard/src/modules/[chain]/index.vue b/packages/dashboard/src/modules/[chain]/index.vue
index 06b2437c..c32da653 100644
--- a/packages/dashboard/src/modules/[chain]/index.vue
+++ b/packages/dashboard/src/modules/[chain]/index.vue
@@ -1,40 +1,45 @@
 <script lang="ts" setup>
-import MdEditor from 'md-editor-v3';
-import PriceMarketChart from '@/components/charts/PriceMarketChart.vue'
+import MdEditor from "md-editor-v3";
+import PriceMarketChart from "@/components/charts/PriceMarketChart.vue";
 
-import { useBlockchain, useFormatter } from '@/stores';
-import { onMounted, ref } from 'vue';
-import { useIndexModule } from './indexStore';
-import { computed } from '@vue/reactivity';
+import { useBlockchain, useFormatter } from "@/stores";
+import { onMounted, ref } from "vue";
+import { useIndexModule } from "./indexStore";
+import { computed } from "@vue/reactivity";
 
-import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
-import ProposalProcess from '@/components/ProposalProcess.vue';
+import CardStatisticsVertical from "@/components/CardStatisticsVertical.vue";
+import ProposalProcess from "@/components/ProposalProcess.vue";
 
-const blockchain = useBlockchain()
-const store = useIndexModule()
+const blockchain = useBlockchain();
+const store = useIndexModule();
 
 const coinInfo = computed(() => {
-  return store.coinInfo
-})
+  return store.coinInfo;
+});
 
 onMounted(() => {
-  store.loadDashboard()
-})
+  store.loadDashboard();
+});
 
-const format = useFormatter()
-const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex])
+const format = useFormatter();
+const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
 
 blockchain.$subscribe((m, s) => {
-  console.log('index:', m)
-  if(!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
-    console.log(m.events.key)
-    store.loadDashboard()
+  console.log("index:", m);
+  if (
+    !Array.isArray(m.events) &&
+    ["chainName", "endpoint"].includes(m.events.key)
+  ) {
+    console.log(m.events.key);
+    store.loadDashboard();
   }
-})
+});
 function shortName(name: string, id: string) {
-  return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id: name
+  return name.toLowerCase().startsWith("ibc/") ||
+    name.toLowerCase().startsWith("0x")
+    ? id
+    : name;
 }
-
 </script>
 
 <template>
@@ -44,58 +49,97 @@ function shortName(name: string, id: string) {
         <VCol md="5">
           <VCardItem>
             <VCardTitle>
-              {{ coinInfo.name }} (<span class="text-uppercase">{{ coinInfo.symbol }}</span>)
+              {{ coinInfo.name }} (<span class="text-uppercase">{{
+                coinInfo.symbol
+              }}</span
+              >)
             </VCardTitle>
             <VCardSubtitle>
-              Rank:  <VChip color="error" size="x-small">#{{ coinInfo.market_cap_rank }}</VChip>
+              Rank:
+              <VChip color="error" size="x-small"
+                >#{{ coinInfo.market_cap_rank }}</VChip
+              >
             </VCardSubtitle>
           </VCardItem>
-          <VDivider/>
-          <VCardItem>              
-            <VBtn variant="text" size="small" :href="store.homepage" prependIcon="mdi-web">Website</VBtn> 
-            <VBtn variant="text" size="small" :href="store.twitter" prependIcon="mdi-twitter">Twitter</VBtn>
-            <VBtn variant="text" size="small" :href="store.telegram" prependIcon="mdi-telegram">Telegram</VBtn>
-            <VBtn variant="text" size="small" :href="store.github" prependIcon="mdi-github">Github</VBtn>
+          <VDivider />
+          <VCardItem>
+            <VBtn
+              variant="text"
+              size="small"
+              :href="store.homepage"
+              prependIcon="mdi-web"
+              >Website</VBtn
+            >
+            <VBtn
+              variant="text"
+              size="small"
+              :href="store.twitter"
+              prependIcon="mdi-twitter"
+              >Twitter</VBtn
+            >
+            <VBtn
+              variant="text"
+              size="small"
+              :href="store.telegram"
+              prependIcon="mdi-telegram"
+              >Telegram</VBtn
+            >
+            <VBtn
+              variant="text"
+              size="small"
+              :href="store.github"
+              prependIcon="mdi-github"
+              >Github</VBtn
+            >
           </VCardItem>
           <VCardItem>
             <!-- SECTION upgrade plan banner -->
-            <div class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3">
-              <h3
-                class="plan-details me-3"
-                :class="store.priceColor"
-              >
+            <div
+              class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3"
+            >
+              <h3 class="plan-details me-3" :class="store.priceColor">
                 {{ store.priceChange }}<small>%</small>
               </h3>
-              
+
               <VMenu open-on-hover>
                 <template #activator="{ props }">
                   <div class="d-flex flex-column align-start" v-bind="props">
                     <h3 class="text-base font-weight-semibold">
-                      {{ ticker?.market?.name || ''}}
+                      {{ ticker?.market?.name || "" }}
                     </h3>
-                    <span class="text-primary text-xs">{{ shortName(ticker?.base, ticker.coin_id) }}/{{ shortName(ticker?.target, ticker.target_coin_id) }}</span>
+                    <span class="text-primary text-xs"
+                      >{{ shortName(ticker?.base, ticker.coin_id) }}/{{
+                        shortName(ticker?.target, ticker.target_coin_id)
+                      }}</span
+                    >
                   </div>
                 </template>
-                <VList style="max-height: 300px;">
+                <VList style="max-height: 300px">
                   <VListItem
                     v-for="(item, i) in store.coinInfo.tickers"
                     :key="i"
                     rounded
                     @click="store.selectTicker(i)"
                   >
-                    <template #prepend>
-                    </template>
+                    <template #prepend> </template>
                     <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
                     <VListItemTitle v-text="item.market.name" />
-                    <VListItemSubtitle>{{ shortName(item?.base, item.coin_id) }}/{{ shortName(item?.target, item.target_coin_id) }}</VListItemSubtitle>
+                    <VListItemSubtitle
+                      >{{ shortName(item?.base, item.coin_id) }}/{{
+                        shortName(item?.target, item.target_coin_id)
+                      }}</VListItemSubtitle
+                    >
                     <template #append>
-                      <span class="ml-3" :class="`text-${store.tickerColor(item.trust_score)}`">{{ item.converted_last.usd }}</span>
+                      <span
+                        class="ml-3"
+                        :class="`text-${store.tickerColor(item.trust_score)}`"
+                        >{{ item.converted_last.usd }}</span
+                      >
                     </template>
                   </VListItem>
                 </VList>
               </VMenu>
 
-
               <VSpacer />
 
               <div class="d-flex align-center">
@@ -107,14 +151,14 @@ function shortName(name: string, id: string) {
             </div>
             <!-- !SECTION -->
             <VSpacer />
-          <VBtn
-            block
-            :color="store.trustColor"
-            class="mt-3"
-            :href="ticker.trade_url"
-          >
-            Buy {{ coinInfo.symbol || '' }}
-          </VBtn>
+            <VBtn
+              block
+              :color="store.trustColor"
+              class="mt-3"
+              :href="ticker.trade_url"
+            >
+              Buy {{ coinInfo.symbol || "" }}
+            </VBtn>
           </VCardItem>
         </VCol>
         <VCol md="7">
@@ -124,9 +168,16 @@ function shortName(name: string, id: string) {
         </VCol>
       </VRow>
       <VDivider />
-      <VCardText class="" style="max-height: 250px; overflow:auto;"><MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor></VCardText>
+      <VCardText class="" style="max-height: 250px; overflow: auto"
+        ><MdEditor
+          :model-value="coinInfo.description?.en"
+          previewOnly
+        ></MdEditor
+      ></VCardText>
       <VCardItem>
-        <VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{ tag }}</VChip>
+        <VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{
+          tag
+        }}</VChip>
       </VCardItem>
     </VCard>
 
@@ -139,46 +190,56 @@ function shortName(name: string, id: string) {
     </VRow>
 
     <VCard class="my-5">
-        <VCardItem class="pb-0">
-          <VCardTitle>Active Proposals</VCardTitle>
-        </VCardItem>
-        <VCardItem>
-          <VExpansionPanels variant="accordion">
-            <VExpansionPanel v-for="(x, i) in store.proposals">
-              <VExpansionPanelTitle disable-icon-rotate>
-                    <VChip label color="primary" class="mr-2">{{x.proposalId}}</VChip>
-                    <div class="w-100">{{ x.content?.title }}
-                      <div class="d-flex mt-1">
-                        <small class="text-secondary me-auto"> {{ format.toDay(x.votingEndTime, 'from') }}</small>      
-                        <ProposalProcess style="width:300px;" :pool="store.pool" :tally="store.tally[Number(x.proposalId)]"></ProposalProcess> 
-                        <span></span>
-                      </div>              
-                    </div>
-                <template #actions>    
-                  <VIcon
-                    icon="mdi-check"
-                    color="success"
-                    class="ml-2"
-                  />
-                </template>
-              </VExpansionPanelTitle>
-              <VExpansionPanelText>
-                <VCard class="card-box">         
-                  <VCardText>
-                    <MdEditor :model-value="x.content?.description" previewOnly></MdEditor> 
-                  </VCardText>
-                  <div class="text-center w-100 my-2">
-                    <VBtn color="primary" variant="flat">Vote</VBtn>
-                  </div>
-                </VCard>
-              </VExpansionPanelText>
-            </VExpansionPanel>
-          </VExpansionPanels>          
-        </VCardItem>   
-        <VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
+      <VCardItem class="pb-0">
+        <VCardTitle>Active Proposals</VCardTitle>
+      </VCardItem>
+      <VCardItem>
+        <VExpansionPanels variant="accordion">
+          <VExpansionPanel v-for="(x, i) in store.proposals">
+            <VExpansionPanelTitle disable-icon-rotate>
+              <VChip label color="primary" class="mr-2">{{
+                x.proposalId
+              }}</VChip>
+              <div class="w-100">
+                {{ x.content?.title }}
+                <div class="d-flex mt-1">
+                  <small class="text-secondary me-auto">
+                    {{ format.toDay(x.votingEndTime, "from") }}</small
+                  >
+                  <ProposalProcess
+                    style="width: 300px"
+                    :pool="store.pool"
+                    :tally="store.tally[Number(x.proposalId)]"
+                  ></ProposalProcess>
+                  <span></span>
+                </div>
+              </div>
+              <template #actions>
+                <VIcon icon="mdi-check" color="success" class="ml-2" />
+              </template>
+            </VExpansionPanelTitle>
+            <VExpansionPanelText>
+              <VCard class="card-box">
+                <VCardText>
+                  <MdEditor
+                    :model-value="x.content?.description"
+                    previewOnly
+                  ></MdEditor>
+                </VCardText>
+                <div class="text-center w-100 my-2">
+                  <VBtn color="primary" variant="flat">Vote</VBtn>
+                </div>
+              </VCard>
+            </VExpansionPanelText>
+          </VExpansionPanel>
+        </VExpansionPanels>
+      </VCardItem>
+      <VCardText v-if="store.proposals.length === 0"
+        >No active proposals</VCardText
+      >
     </VCard>
 
-    <VBtn block color='secondary' variant="outlined" class="mt-5">
+    <VBtn block color="secondary" variant="outlined" class="mt-5">
       Connect Wallet
     </VBtn>
   </div>
diff --git a/src/components/CardStatisticsVertical.vue b/src/components/CardStatisticsVertical.vue
index 796fa7a6..e1d874ef 100644
--- a/src/components/CardStatisticsVertical.vue
+++ b/src/components/CardStatisticsVertical.vue
@@ -1,34 +1,28 @@
 <script setup lang="ts">
 interface Props {
-  title: string
-  color?: string
-  icon: string
-  stats: string
-  change?: number
-  subtitle?: string
+  title: string;
+  color?: string;
+  icon: string;
+  stats: string;
+  change?: number;
+  subtitle?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   color: 'primary',
-})
+});
 
-const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change||0) === 1)
+const isPositive = controlledComputed(
+  () => props.change,
+  () => Math.sign(props.change || 0) === 1
+);
 </script>
 
 <template>
   <VCard class="h-full flex-col content-between">
     <VCardText class="d-flex align-center justify-between">
-      <VAvatar
-        v-if="props.icon"
-        rounded
-        size="38"
-        variant="tonal"
-        :color="props.color"
-      >
-        <VIcon
-          :icon="props.icon"
-          size="24"
-        />
+      <VAvatar v-if="props.icon" rounded size="38" variant="tonal" :color="props.color">
+        <VIcon :icon="props.icon" size="24" />
       </VAvatar>
 
       <div
@@ -50,11 +44,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
         {{ props.title }}
       </p>
 
-      <VChip
-        v-if="props.subtitle"
-        size="x-small"
-        class="font-weight-medium"
-      >
+      <VChip v-if="props.subtitle" size="x-small" class="font-weight-medium">
         <span class="text-truncate">{{ props.subtitle }}</span>
       </VChip>
     </VCardText>
diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index f2ef0b3b..ef002436 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-import MdEditor from 'md-editor-v3';
 import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
-import type { GovProposal, PaginatedProposals } from '@/types';
+import type { PaginatedProposals } from '@/types';
 import ProposalProcess from './ProposalProcess.vue';
 import type { PropType } from 'vue';
 
-const props = defineProps({
+defineProps({
   proposals: { type: Object as PropType<PaginatedProposals> },
 });
-// const list = computed(()=> proposl)
+
 const format = useFormatter();
 const staking = useStakingStore();
 const chain = useBlockchain();
@@ -48,12 +47,26 @@ const statusMap: Record<string, string> = {
           </div>
         </div>
 
-        <div 
-          class=" flex items-center mb-3"
-          :class="statusMap?.[item?.status] === 'PASSED'?'text-yes':statusMap?.[item?.status] === 'REJECTED' ?'text-no':'text-inProgress'">
-          <div 
+        <div
+          class="flex items-center mb-3"
+          :class="
+            statusMap?.[item?.status] === 'PASSED'
+              ? 'text-yes'
+              : statusMap?.[item?.status] === 'REJECTED'
+              ? 'text-no'
+              : 'text-info'
+          "
+        >
+          <div
             class="w-1 h-1 rounded-full mr-2"
-            :class="statusMap?.[item?.status] === 'PASSED'?'bg-yes':statusMap?.[item?.status] === 'REJECTED' ?'bg-no':'bg-inProgress'"></div>
+            :class="
+              statusMap?.[item?.status] === 'PASSED'
+                ? 'bg-yes'
+                : statusMap?.[item?.status] === 'REJECTED'
+                ? 'bg-no'
+                : 'bg-info'
+            "
+          ></div>
           <div class="text-xs">{{ statusMap?.[item?.status] || item?.status }}</div>
         </div>
 
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 3282d129..b75a32ec 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import MdEditor from 'md-editor-v3';
-import PriceMarketChart from '@/components/charts/PriceMarketChart.vue'
+import PriceMarketChart from '@/components/charts/PriceMarketChart.vue';
 
 import { useBlockchain, useFormatter } from '@/stores';
 import { onMounted, ref } from 'vue';
@@ -10,31 +10,30 @@ import { computed } from '@vue/reactivity';
 import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
 import ProposalListItem from '@/components/ProposalListItem.vue';
 
-const blockchain = useBlockchain()
-const store = useIndexModule()
+const blockchain = useBlockchain();
+const store = useIndexModule();
 
 const coinInfo = computed(() => {
-  return store.coinInfo
-})
+  return store.coinInfo;
+});
 
 onMounted(() => {
-  store.loadDashboard()
-})
+  store.loadDashboard();
+});
 
-const format = useFormatter()
-const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex])
+const format = useFormatter();
+const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
 
 blockchain.$subscribe((m, s) => {
-  console.log('index:', m)
-  if(!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
-    console.log(m.events.key)
-    store.loadDashboard()
+  console.log('index:', m);
+  if (!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
+    console.log(m.events.key);
+    store.loadDashboard();
   }
-})
+});
 function shortName(name: string, id: string) {
-  return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id: name
+  return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id : name;
 }
-
 </script>
 
 <template>
@@ -44,58 +43,75 @@ function shortName(name: string, id: string) {
         <VCol md="5">
           <VCardItem>
             <VCardTitle>
-              {{ coinInfo.name }} (<span class="text-uppercase">{{ coinInfo.symbol }}</span>)
+              {{ coinInfo.name }} (
+              <span class="text-uppercase">{{ coinInfo.symbol }}</span>
+              )
             </VCardTitle>
             <VCardSubtitle>
-              Rank:  <VChip color="error" size="x-small">#{{ coinInfo.market_cap_rank }}</VChip>
+              Rank:
+              <VChip color="error" size="x-small">#{{ coinInfo.market_cap_rank }}</VChip>
             </VCardSubtitle>
           </VCardItem>
-          <VDivider/>
-          <VCardItem>              
-            <VBtn variant="text" size="small" :href="store.homepage" prependIcon="mdi-web">Website</VBtn> 
-            <VBtn variant="text" size="small" :href="store.twitter" prependIcon="mdi-twitter">Twitter</VBtn>
-            <VBtn variant="text" size="small" :href="store.telegram" prependIcon="mdi-telegram">Telegram</VBtn>
-            <VBtn variant="text" size="small" :href="store.github" prependIcon="mdi-github">Github</VBtn>
+          <VDivider />
+          <VCardItem>
+            <VBtn variant="text" size="small" :href="store.homepage" prependIcon="mdi-web">
+              Website
+            </VBtn>
+            <VBtn variant="text" size="small" :href="store.twitter" prependIcon="mdi-twitter">
+              Twitter
+            </VBtn>
+            <VBtn variant="text" size="small" :href="store.telegram" prependIcon="mdi-telegram">
+              Telegram
+            </VBtn>
+            <VBtn variant="text" size="small" :href="store.github" prependIcon="mdi-github">
+              Github
+            </VBtn>
           </VCardItem>
           <VCardItem>
             <!-- SECTION upgrade plan banner -->
             <div class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3">
-              <h3
-                class="plan-details me-3"
-                :class="store.priceColor"
-              >
-                {{ store.priceChange }}<small>%</small>
+              <h3 class="plan-details me-3" :class="store.priceColor">
+                {{ store.priceChange }}
+                <small>%</small>
               </h3>
-              
+
               <VMenu open-on-hover>
                 <template #activator="{ props }">
                   <div class="d-flex flex-column align-start" v-bind="props">
                     <h3 class="text-base font-weight-semibold">
-                      {{ ticker?.market?.name || ''}}
+                      {{ ticker?.market?.name || '' }}
                     </h3>
-                    <span class="text-primary text-xs">{{ shortName(ticker?.base, ticker.coin_id) }}/{{ shortName(ticker?.target, ticker.target_coin_id) }}</span>
+                    <span class="text-primary text-xs">
+                      {{ shortName(ticker?.base, ticker.coin_id) }}/{{
+                        shortName(ticker?.target, ticker.target_coin_id)
+                      }}
+                    </span>
                   </div>
                 </template>
-                <VList style="max-height: 300px;">
+                <VList style="max-height: 300px">
                   <VListItem
                     v-for="(item, i) in store.coinInfo.tickers"
                     :key="i"
                     rounded
                     @click="store.selectTicker(i)"
                   >
-                    <template #prepend>
-                    </template>
+                    <template #prepend></template>
                     <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
                     <VListItemTitle v-text="item.market.name" />
-                    <VListItemSubtitle>{{ shortName(item?.base, item.coin_id) }}/{{ shortName(item?.target, item.target_coin_id) }}</VListItemSubtitle>
+                    <VListItemSubtitle>
+                      {{ shortName(item?.base, item.coin_id) }}/{{
+                        shortName(item?.target, item.target_coin_id)
+                      }}
+                    </VListItemSubtitle>
                     <template #append>
-                      <span class="ml-3" :class="`text-${store.tickerColor(item.trust_score)}`">{{ item.converted_last.usd }}</span>
+                      <span class="ml-3" :class="`text-${store.tickerColor(item.trust_score)}`">
+                        {{ item.converted_last.usd }}
+                      </span>
                     </template>
                   </VListItem>
                 </VList>
               </VMenu>
 
-
               <VSpacer />
 
               <div class="d-flex align-center">
@@ -107,14 +123,9 @@ function shortName(name: string, id: string) {
             </div>
             <!-- !SECTION -->
             <VSpacer />
-          <VBtn
-            block
-            :color="store.trustColor"
-            class="mt-3"
-            :href="ticker.trade_url"
-          >
-            Buy {{ coinInfo.symbol || '' }}
-          </VBtn>
+            <VBtn block :color="store.trustColor" class="mt-3" :href="ticker.trade_url">
+              Buy {{ coinInfo.symbol || '' }}
+            </VBtn>
           </VCardItem>
         </VCol>
         <VCol md="7">
@@ -124,31 +135,31 @@ function shortName(name: string, id: string) {
         </VCol>
       </VRow>
       <VDivider />
-      <VCardText style="max-height: 250px; overflow:auto;"><MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor></VCardText>
+      <VCardText style="max-height: 250px; overflow: auto">
+        <MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor>
+      </VCardText>
       <VCardItem>
         <VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{ tag }}</VChip>
       </VCardItem>
     </VCard>
 
-    <VRow>
-      <VCol v-for="item in store.stats" cols="12" sm="6" md="2">
+    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
+      <div v-for="item in store.stats">
         <CardStatisticsVertical v-bind="item" />
-      </VCol>
-    </VRow>
+      </div>
+    </div>
 
     <VCard class="my-5">
-        <VCardItem class="pb-0">
-          <VCardTitle>Active Proposals</VCardTitle>
-        </VCardItem>
-        <VCardItem>
-          <ProposalListItem :proposals="store.proposals"/>      
-        </VCardItem>   
-        <VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
+      <VCardItem class="pb-0">
+        <VCardTitle>Active Proposals</VCardTitle>
+      </VCardItem>
+      <VCardItem>
+        <ProposalListItem :proposals="store.proposals" />
+      </VCardItem>
+      <VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
     </VCard>
 
-    <VBtn block color='secondary' variant="outlined" class="mt-5">
-      Connect Wallet
-    </VBtn>
+    <VBtn block color="secondary" variant="outlined" class="mt-5">Connect Wallet</VBtn>
   </div>
 </template>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index bda85761..e50eb1c7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,6 @@ module.exports = {
       colors: {
         main: '#5973fe',
         yes: '#3fb68b',
-        inProgress: '#4472de',
         no: '#ff5353',
         info: '#00b2ff',
         textMain: '#333',