From 9be8a49097582f374fdc7eb9e05e5c559645cbdb Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sat, 20 May 2023 13:36:05 +0800
Subject: [PATCH 1/3] feat: add important style

---
 src/components/CardParameter.vue            |  2 +-
 src/components/ProposalListItem.vue         |  8 ++++----
 src/layouts/components/ChainProfile.vue     |  2 +-
 src/layouts/components/DefaultLayout.vue    | 14 +++++++-------
 src/layouts/components/NavFooter.vue        |  2 +-
 src/modules/[chain]/account/[address].vue   |  6 +++---
 src/modules/[chain]/block/index.vue         |  6 +++---
 src/modules/[chain]/gov/[proposal_id].vue   | 10 +++++-----
 src/modules/[chain]/ibc/[connection_id].vue |  6 +++---
 src/modules/[chain]/index.vue               | 12 ++++++------
 src/modules/[chain]/params/index.vue        |  2 +-
 src/modules/[chain]/staking/[validator].vue |  4 ++--
 src/modules/[chain]/uptime/customize.vue    |  8 ++++----
 src/modules/[chain]/uptime/index.vue        |  2 +-
 src/modules/wallet/accounts.vue             | 16 ++++++++--------
 src/modules/wallet/portfolio.vue            |  8 ++++----
 src/pages/index.vue                         |  8 ++++----
 src/style.css                               |  7 -------
 18 files changed, 58 insertions(+), 65 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index 0a2c20a3..6ec37742 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -30,7 +30,7 @@ function calculateValue(value: any) {
   >
     <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
     <div
-      class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
+      class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4"
     >
       <div
         v-for="(item, index) of props.cardItem?.items"
diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index 7a4bc4e0..f7cd88be 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -42,7 +42,7 @@ const proposalInfo = ref();
 </script>
 <template>
   <div class="bg-white dark:bg-[#28334e] rounded text-sm">
-    <table class="table-compact w-full table-fixed hidden lg:table">
+    <table class="table-compact w-full table-fixed hidden lg:!table">
       <tbody>
         <tr v-for="(item, index) in proposals?.proposals" :key="index">
           <td class="px-4 w-20">
@@ -102,7 +102,7 @@ const proposalInfo = ref();
                 </div>
               </div>
               <div
-                class="truncate col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
+                class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start"
               >
                 {{ format.toDay(item.voting_end_time, 'from') }}
               </div>
@@ -134,7 +134,7 @@ const proposalInfo = ref();
       </tbody>
     </table>
 
-    <div class="lg:hidden">
+    <div class="lg:!hidden">
       <div
         v-for="(item, index) in proposals?.proposals"
         :key="index"
@@ -228,7 +228,7 @@ const proposalInfo = ref();
     </div>
 
     <input type="checkbox" id="proposal-detail-modal" class="modal-toggle" />
-    <label for="proposal-detail-modal" class="modal sm:modal-middle">
+    <label for="proposal-detail-modal" class="modal sm:!modal-middle">
       <label class="modal-box relative" for="">
         <label
           for="proposal-detail-modal"
diff --git a/src/layouts/components/ChainProfile.vue b/src/layouts/components/ChainProfile.vue
index 1b0589d2..617b3bdd 100644
--- a/src/layouts/components/ChainProfile.vue
+++ b/src/layouts/components/ChainProfile.vue
@@ -93,7 +93,7 @@ chainStore.$subscribe((m, s) => {
       </div>
       </Transition>
       <div
-        class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden lg:block"
+        class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden lg:!block"
       >
         {{ chainStore.connErr || chainStore.endpoint.address }}
       </div>
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 03ea5c98..9e2c4572 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -43,14 +43,14 @@ const showDiscord = window.location.host.search("ping.pub") > -1
     <!-- sidebar -->
     <div
       class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
-      :class="{ block: sidebarShow, 'hidden force-block': !sidebarShow }"
+      :class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }"
     >
       <div class="flex items-center pl-4 py-4 mb-1">
         <img class="w-10 h-10" src="../../assets/logo.svg" />
         <h1 class="flex-1 ml-3 text-2xl font-semibold dark:text-white">
           Ping.pub
         </h1>
-        <div class="pr-4 cursor-pointer xl:hidden" @click="sidebarShow = false">
+        <div class="pr-4 cursor-pointer xl:!hidden" @click="sidebarShow = false">
           <Icon icon="mdi-close" class="text-3xl" />
         </div>
       </div>
@@ -216,13 +216,13 @@ const showDiscord = window.location.host.search("ping.pub") > -1
         </a>
       </div>
     </div>
-    <div class="xl:ml-64 px-5">
+    <div class="xl:!ml-64 px-5">
       <!-- header -->
       <div
         class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 mt-4 shadow"
       >
         <div
-          class="text-2xl pr-3 cursor-pointer xl:hidden"
+          class="text-2xl pr-3 cursor-pointer xl:!hidden"
           @click="sidebarShow = true"
         >
           <Icon icon="mdi-menu" />
@@ -233,11 +233,11 @@ const showDiscord = window.location.host.search("ping.pub") > -1
         <div class="flex-1 w-0"></div>
 
         <!-- <NavSearchBar />-->
-        <NavBarI18n class="hidden md:inline-block" />
-        <NavbarThemeSwitcher class="hidden md:inline-block" />
+        <NavBarI18n class="hidden md:!inline-block" />
+        <NavbarThemeSwitcher class="hidden md:!inline-block" />
 
         <NavBarWallet
-          class="block truncate md:inline-block text-xs md:text-sm"
+          class="block truncate md:!inline-block text-xs md:!text-sm"
         />
       </div>
 
diff --git a/src/layouts/components/NavFooter.vue b/src/layouts/components/NavFooter.vue
index 13c5fc33..d2ce34b2 100644
--- a/src/layouts/components/NavFooter.vue
+++ b/src/layouts/components/NavFooter.vue
@@ -15,7 +15,7 @@
       >
     </div>
     <div
-      class="grid-flow-col gap-4 md:place-self-center md:justify-self-end hidden md:grid"
+      class="grid-flow-col gap-4 md:!place-self-center md:!justify-self-end hidden md:!grid"
     >
       <a
         class="link link-primary no-underline"
diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue
index c87e94a4..47172326 100644
--- a/src/modules/[chain]/account/[address].vue
+++ b/src/modules/[chain]/account/[address].vue
@@ -120,11 +120,11 @@ loadAccount(props.address);
     <!-- Assets -->
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
       <h2 class="card-title mb-4">Assets</h2>
-      <div class="grid md:grid-cols-3">
-        <div class="md:col-span-1">
+      <div class="grid md:!grid-cols-3">
+        <div class="md:!col-span-1">
           <DonutChart :series="totalAmountByCategory" :labels="labels" />
         </div>
-        <div class="mt-4 md:col-span-2 md:mt-0 md:ml-4">
+        <div class="mt-4 md:!col-span-2 md:!mt-0 md:!ml-4">
           <!-- button -->
           <div class="flex justify-end mb-4 pr-5">
             <label
diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index da1eea1d..f5df5ca9 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -32,7 +32,7 @@ const list = computed(() => {
       >
     </div>
 
-    <div v-show="tab === 'blocks'" class="grid xl:grid-cols-6 md:grid-cols-4 grid-cols-1">
+    <div v-show="tab === 'blocks'" class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1">
       
       <RouterLink
         v-for="item in list"
@@ -40,7 +40,7 @@ const list = computed(() => {
         :to="`/${chain}/block/${item.block.header.height}`"
       >
         <div class="flex justify-between">
-          <h3 class="text-md font-bold sm:text-lg">
+          <h3 class="text-md font-bold sm:!text-lg">
             {{ item.block.header.height }}
           </h3>
           <span class="rounded text-xs whitespace-nowrap font-medium text-green-600">
@@ -48,7 +48,7 @@ const list = computed(() => {
           </span>
         </div>
         <div class="flex justify-between tooltip" data-tip="Block Proposor">
-          <div class="mt-2 hidden text-sm sm:block truncate">
+          <div class="mt-2 hidden text-sm sm:!block truncate">
               <span>{{ format.validator(item.block?.header?.proposer_address) }}</span>
           </div>
           <span class="text-right mt-1 whitespace-nowrap"> {{ item.block?.data?.txs.length }} txs </span>
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index 574b6347..1977ccf0 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -164,7 +164,7 @@ const processList = computed(() => {
 <template>
   <div>
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title flex flex-col md:justify-between md:flex-row">
+      <h2 class="card-title flex flex-col md:!justify-between md:!flex-row">
         <p class="truncate w-full">
           {{ proposal_id }}. {{ proposal.content?.title }}
         </p>
@@ -185,9 +185,9 @@ const processList = computed(() => {
         <ObjectElement :value="proposal.content" />
       </div>
     </div>
-    <!-- grid lg:grid-cols-3 auto-rows-max-->
-    <!-- flex-col lg:flex-row flex -->
-    <div class="gap-4 mb-4 grid lg:grid-cols-3 auto-rows-max">
+    <!-- grid lg:!!grid-cols-3 auto-rows-max-->
+    <!-- flex-col lg:!!flex-row flex -->
+    <div class="gap-4 mb-4 grid lg:!!grid-cols-3 auto-rows-max">
       <!-- flex-1 -->
       <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
         <h2 class="card-title mb-1">Tally</h2>
@@ -227,7 +227,7 @@ const processList = computed(() => {
       </div>
 
       <div
-        class="bg-base-100 px-4 pt-3 pb-5 rounded shadow lg:col-span-2"
+        class="bg-base-100 px-4 pt-3 pb-5 rounded shadow lg:!!col-span-2"
       >
         <h2 class="card-title">Timeline</h2>
 
diff --git a/src/modules/[chain]/ibc/[connection_id].vue b/src/modules/[chain]/ibc/[connection_id].vue
index 752c3f34..c905c5de 100644
--- a/src/modules/[chain]/ibc/[connection_id].vue
+++ b/src/modules/[chain]/ibc/[connection_id].vue
@@ -42,9 +42,9 @@ function color(v: string) {
 </script>
 <template>
   <div>
-    <div class="px-4 pt-3 pb-4 bg-base-100 rounded mb-4 shadow py-24 sm:py-32">
-      <div class="mx-auto max-w-7xl px-6 lg:px-8">
-        <dl class="grid grid-cols-1 gap-x-8 text-center lg:grid-cols-3">
+    <div class="px-4 pt-3 pb-4 bg-base-100 rounded mb-4 shadow py-24 sm:!py-32">
+      <div class="mx-auto max-w-7xl px-6 lg:!px-8">
+        <dl class="grid grid-cols-1 gap-x-8 text-center lg:!grid-cols-3">
           <div class="mx-auto flex items-center">
             <div>
               <div
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index a3ce1ebe..7263c4c0 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -134,7 +134,7 @@ const color = computed(() => {
 
           <div>
             <div
-              class="dropdown dropdown-hover w-full md:w-[400px] mt-[16px] md:mt-[36px]"
+              class="dropdown dropdown-hover w-full md:!w-[400px] mt-[16px] md:!mt-[36px]"
             >
               <label>
                 <div
@@ -167,7 +167,7 @@ const color = computed(() => {
               </label>
               <div class="dropdown-content pt-1">
                 <div
-                  class="h-64 overflow-auto w-full md:w-[400px] shadow rounded"
+                  class="h-64 overflow-auto w-full md:!w-[400px] shadow rounded"
                 >
                   <ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
                     <li
@@ -201,7 +201,7 @@ const color = computed(() => {
 
             <a
               :color="store.trustColor"
-              class="mt-5 text-white btn btn-success w-full md:w-[400px] flex items-center"
+              class="mt-5 text-white btn btn-success w-full md:!w-[400px] flex items-center"
               :href="ticker.trade_url"
               target="_blank"
             >
@@ -210,7 +210,7 @@ const color = computed(() => {
           </div>
         </div>
 
-        <div class="flex-1 hidden md:block">
+        <div class="flex-1 hidden md:!block">
           <PriceMarketChart />
         </div>
       </div>
@@ -231,7 +231,7 @@ const color = computed(() => {
       </div>
     </div>
 
-    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
+    <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" />
       </div>
@@ -260,7 +260,7 @@ const color = computed(() => {
         >
       </div>
       <div
-        class="grid grid-cols-1 md:grid-cols-4 auto-cols-auto gap-4 px-4 pb-6"
+        class="grid grid-cols-1 md:!grid-cols-4 auto-cols-auto gap-4 px-4 pb-6"
       >
         <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
           <div class="text-sm mb-1">Balance</div>
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index d1f1ae51..8c634bda 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -16,7 +16,7 @@ onMounted(() => {
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded">
       <div class="text-base mb-3 text-main">{{ chain.title }}</div>
       <div
-        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
+        class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4"
       >
         <div
           v-for="(item, index) of chain.items"
diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index cdaf28f7..e8745400 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -139,7 +139,7 @@ onMounted(() => {
 <template>
   <div>
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow border-indigo-500">
-      <div class="flex flex-col lg:flex-row pt-2 pb-1">
+      <div class="flex flex-col lg:!flex-row pt-2 pb-1">
         <div class="flex-1">
           <div class="flex">
             <div class="avatar mr-4 relative w-24 rounded-lg overflow-hidden">
@@ -300,7 +300,7 @@ onMounted(() => {
       <div class="text-sm px-4 pt-3 border-t">{{ v.description?.details }}</div>
     </div>
 
-    <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-4">
+    <div class="mt-3 grid grid-cols-1 md:!grid-cols-3 gap-4">
       <div class="h-100">
         <CommissionRate :commission="v.commission"></CommissionRate>
       </div>
diff --git a/src/modules/[chain]/uptime/customize.vue b/src/modules/[chain]/uptime/customize.vue
index 6d6035b1..41c6aa18 100644
--- a/src/modules/[chain]/uptime/customize.vue
+++ b/src/modules/[chain]/uptime/customize.vue
@@ -119,10 +119,10 @@ function color(v: string) {
 <template>
   <div>
     <div class="overflow-x-auto w-full card ">
-      <div class="lg:flex lg:items-center lg:justify-between bg-base-100 p-5">
+      <div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
         <div class="min-w-0 flex-1">
-          <h2 class="text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">My Validators</h2>
-          <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
+          <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">My Validators</h2>
+          <div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
             <div class="mt-2 flex items-center text-sm text-gray-500">
               <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
                 aria-hidden="true">
@@ -136,7 +136,7 @@ function color(v: string) {
             </div>
           </div>
         </div>
-        <div class="mt-5 flex lg:ml-4 lg:mt-0">
+        <div class="mt-5 flex lg:!ml-4 lg:!mt-0">
           
         </div>
       </div>
diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue
index 0053cc2f..99a907f8 100644
--- a/src/modules/[chain]/uptime/index.vue
+++ b/src/modules/[chain]/uptime/index.vue
@@ -135,7 +135,7 @@ function changeTab(v: string) {
         <input type="text" v-model="keyword" placeholder="Keywords to filter validators"
           class="input input-sm w-full flex-1" />
       </div>
-      <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-x-4 mt-4" :class="tab === '2'?'':'hidden'">
+      <div class="grid grid-cols-1 md:!grid-cols-3 xl:!grid-cols-4 2xl:!grid-cols-6 gap-x-4 mt-4" :class="tab === '2'?'':'hidden'">
         <div v-for="({v, signing, hex}, i) in list" :key="i">
           <div class="flex items-center justify-between py-0">
             <label class="text-truncate text-sm">
diff --git a/src/modules/wallet/accounts.vue b/src/modules/wallet/accounts.vue
index e1248547..638ce274 100644
--- a/src/modules/wallet/accounts.vue
+++ b/src/modules/wallet/accounts.vue
@@ -122,10 +122,10 @@ async function addAddress(acc: AccountEntry) {
 <template>
   <div>
     <div class="overflow-x-auto w-full card ">
-      <div class="lg:flex lg:items-center lg:justify-between bg-base-100 p-5">
+      <div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
         <div class="min-w-0 flex-1">
-          <h2 class="text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">Accounts</h2>
-          <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
+          <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">Accounts</h2>
+          <div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
             <div class="mt-2 flex items-center text-sm text-gray-500">
               <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
                 aria-hidden="true">
@@ -139,8 +139,8 @@ async function addAddress(acc: AccountEntry) {
             </div>
           </div>
         </div>
-        <div class="mt-5 flex lg:ml-4 lg:mt-0">
-          <span class="hidden sm:block">
+        <div class="mt-5 flex lg:!ml-4 lg:!mt-0">
+          <span class="hidden sm:!block">
             <a href="#address-modal"
               class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
               <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
@@ -154,7 +154,7 @@ async function addAddress(acc: AccountEntry) {
             </a>
           </span>
 
-          <span class="ml-3 hidden sm:block">
+          <span class="ml-3 hidden sm:!block">
             <button type="button"
               class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm"
               @click="toggleEdit">
@@ -196,7 +196,7 @@ async function addAddress(acc: AccountEntry) {
                   </div>
                   <div>
                     <div class="font-bold capitalize">{{ acc.chainName }}</div>
-                    <div class="text-sm opacity-50 hidden md:block">{{ acc.address }}</div>
+                    <div class="text-sm opacity-50 hidden md:!block">{{ acc.address }}</div>
                   </div>
                 </div>
               </RouterLink>
@@ -258,7 +258,7 @@ async function addAddress(acc: AccountEntry) {
                   </div>
                   <div>
                     <div class="font-bold capitalize">{{ acc.chainName }}</div>
-                    <div class="text-sm opacity-50 hidden md:block">{{ acc.address }}</div>
+                    <div class="text-sm opacity-50 hidden md:!block">{{ acc.address }}</div>
                   </div>
                 </div>
           </td>
diff --git a/src/modules/wallet/portfolio.vue b/src/modules/wallet/portfolio.vue
index 6b4f1b97..b3e24cb5 100644
--- a/src/modules/wallet/portfolio.vue
+++ b/src/modules/wallet/portfolio.vue
@@ -91,10 +91,10 @@ const tokenList = computed(() => {
 </script>
 <template>
   <div class="overflow-x-auto w-full card ">
-    <div class="lg:flex lg:items-center lg:justify-between bg-base-100 p-5">
+    <div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
       <div class="min-w-0 flex-1">
-        <h2 class="text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">Portfolio</h2>
-        <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
+        <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">Portfolio</h2>
+        <div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
           <div class="mt-2 flex items-center text-sm text-gray-500">
             <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
               aria-hidden="true">
@@ -108,7 +108,7 @@ const tokenList = computed(() => {
           </div>
         </div>
       </div>
-      <div class="mt-5 flex lg:ml-4 lg:mt-0">
+      <div class="mt-5 flex lg:!ml-4 lg:!mt-0">
 
       </div>
     </div>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 57d2cf39..5909275f 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -29,13 +29,13 @@ const chains = computed(() => {
 <template>
   <div class="">
     <div class="flex items-center justify-center mb-6 mt-10">
-      <div class="w-8 md:w-16 rounded-full mr-3">
+      <div class="w-8 md:!w-16 rounded-full mr-3">
         <img src="/logo.svg" />
       </div>
-      <h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
+      <h1 class="text-primary text-3xl md:!text-6xl font-bold mr-2">
         Ping dashboard
       </h1>
-      <div class="badge badge-primary badge-outline mt-1 text-sm md:mt-8">
+      <div class="badge badge-primary badge-outline mt-1 text-sm md:!mt-8">
         Beta
       </div>
     </div>
@@ -65,7 +65,7 @@ const chains = computed(() => {
     </VTextField>
 
     <div
-      class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5"
+      class="grid grid-cols-2 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
     >
       <ChainSummary
         v-for="(chain, index) in chains"
diff --git a/src/style.css b/src/style.css
index 14e9c9ee..7a7389e0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -34,10 +34,3 @@
   position: relative;
   z-index: 2;
 }
-
-
-@media (min-width: 1280px){
-    .force-block{
-      display: block !important;
-  }
-}

From 579acc64b16045eae77d64755d7cae751d791ede Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sat, 20 May 2023 13:42:48 +0800
Subject: [PATCH 2/3] feat: wallet hidden

---
 src/layouts/components/NavBarWallet.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index 9c8a573f..80de659e 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -113,8 +113,8 @@ const addressChange = computed(() => {
 </template>
 
 <style>
-.footer-modal .ping-connect-btn,
-.footer-modal .ping-connect-dropdown {
-  display: none;
+.ping-connect-btn,
+.ping-connect-dropdown {
+  display: none !important;
 }
 </style>
\ No newline at end of file

From 0ce8d81c9f294dbe85bb7b2854b6625168a2c17e Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sat, 20 May 2023 13:49:39 +0800
Subject: [PATCH 3/3] feat: wallet

---
 src/layouts/components/NavBarWallet.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index 80de659e..77681027 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -98,7 +98,7 @@ const addressChange = computed(() => {
   <label
     v-if="!walletStore?.currentAddress"
     for="PingConnectWallet"
-    class="btn btn-sm ml-4 ping-connect-btn"
+    class="btn btn-sm ml-4"
     >Connect Wallet</label
   >
   <div class="footer-modal">