fix: update dashboard

src/assets/images/svg/delegate.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path
+        d="M3.33341 1.66663V16.6666H18.3334V18.3333H1.66675V1.66663H3.33341ZM13.3334 4.99996H18.3334V9.99996H16.6667V7.85246L15.3509 9.16496C14.5967 9.91688 13.8428 10.6691 13.0892 11.4216L12.5001 12.0108L9.16675 8.67746L5.00008 12.8441L3.82175 11.6666L9.16675 6.32079L12.5001 9.65413L14.1742 7.98496L15.4951 6.66663H13.3334V4.99996Z"
+        fill="white" />
+</svg>

src/assets/images/svg/send.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
+    <g clip-path="url(#clip0_13671_1774)">
+        <path
+            d="M0.57666 1.38745L20.335 9.99995L0.577494 18.6133L3.61666 9.99995L0.57666 1.38745ZM5.08999 10.8333L3.42333 15.5541L16.1658 9.99995L3.42333 4.44662L5.08999 9.16662H9.49999V10.8333H5.08999Z"
+            fill="white" />
+    </g>
+    <defs>
+        <clipPath id="clip0_13671_1774">
+            <rect width="20" height="20" fill="white" transform="translate(0.333252)" />
+        </clipPath>
+    </defs>
+</svg>

src/layouts/components/ChainProfile.vue

@@ -17,7 +17,10 @@ let rpcModel = ref('');
   <div class="dropdown">
     <label tabindex="0" class="flex items-center">
       <div class="p-1 relative mr-3 cursor-pointer">
-        <img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" />
+        <img
+          v-lazy="chainStore.logo"
+          class="w-9 h-9 rounded-full bg-white border border-white"
+        />
         <div
           class="w-2 h-2 rounded-full absolute right-0 bottom-0 shadow"
           :class="{

src/layouts/components/DefaultLayout.vue

@@ -360,7 +360,7 @@ function confirm() {
         <div class="flex-1 w-0"></div>
 
         <!-- <NavSearchBar />-->
-        <div class="lg:block hidden w-full max-w-[334px]">
+        <div class="lg:block hidden w-full max-w-[334px] mx-2">
           <input
             class="input flex-1 w-full !input-bordered bg-[#2E2E33] text-[14px] font-normal h-[44px]"
             v-model="searchQuery"
@@ -374,7 +374,7 @@ function confirm() {
               {{ errorMessage }}
             </div> -->
         </div>
-        <NavBarI18n class="hidden md:!inline-block" />
+        <!-- <NavBarI18n class="hidden md:!inline-block" /> -->
         <NavbarThemeSwitcher class="!inline-block" />
         <NavbarSearch class="!inline-block" />
         <NavBarWallet />

src/layouts/components/NavbarThemeSwitcher.vue

@@ -4,45 +4,48 @@ import { onMounted, computed } from 'vue';
 import { useBaseStore } from '@/stores';
 
 const themeMap: Record<string, string> = {
-    system: 'mdi-laptop',
-    light: 'mdi-weather-sunny',
-    dark: 'mdi-weather-night',
+  system: 'mdi-laptop',
+  light: 'mdi-weather-sunny',
+  dark: 'mdi-weather-night',
 };
 const baseStore = useBaseStore();
 const theme = computed(() => {
-    return baseStore.theme;
+  return baseStore.theme;
 });
 
 const changeMode = (val?: 'dark' | 'light') => {
-    let value: 'dark' | 'light' = 'dark';
-    const currentValue: 'dark' | 'light' = val || theme.value;
-    if (currentValue === 'dark') {
-        value = 'light';
-    }
-    if (value === 'light') {
-        document.documentElement.classList.add('light');
-        document.documentElement.classList.remove('dark');
-    } else {
-        document.documentElement.classList.add('dark');
-        document.documentElement.classList.remove('light');
-    }
-    document.documentElement.setAttribute('data-theme', value);
-    window.localStorage.setItem('theme', value);
-    baseStore.theme = value;
+  let value: 'dark' | 'light' = 'dark';
+  const currentValue: 'dark' | 'light' = val || theme.value;
+  if (currentValue === 'dark') {
+    value = 'light';
+  }
+  if (value === 'light') {
+    document.documentElement.classList.add('light');
+    document.documentElement.classList.remove('dark');
+  } else {
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
+  }
+  document.documentElement.setAttribute('data-theme', value);
+  window.localStorage.setItem('theme', value);
+  baseStore.theme = value;
 };
 
 onMounted(() => {
-    changeMode(theme.value === 'light' ? 'dark' : 'light');
+  changeMode(theme.value === 'light' ? 'dark' : 'light');
 });
 </script>
 
 <template>
-    <div class="tooltip tooltip-bottom delay-1000">
-        <button
-            class="btn btn-ghost btn-circle btn-sm mx-2 rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]"
-            @click="changeMode()"
-        >
-            <Icon :icon="themeMap?.[theme]" class="text-2xl text-gray-500 dark:text-gray-400" />
-        </button>
-    </div>
+  <!-- <div class="tooltip tooltip-bottom delay-1000">
+    <button
+      class="btn btn-ghost btn-circle btn-sm mx-2 rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]"
+      @click="changeMode()"
+    >
+      <Icon
+        :icon="themeMap?.[theme]"
+        class="text-2xl text-gray-500 dark:text-gray-400"
+      />
+    </button>
+  </div> -->
 </template>

src/modules/[chain]/index.vue

@@ -19,6 +19,9 @@ import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
 import ProposalListItem from '@/components/ProposalListItem.vue';
 import ArrayObjectElement from '@/components/dynamic/ArrayObjectElement.vue';
 
+import sendImg from '../../assets/images/svg/send.svg';
+import delegateImg from '../../assets/images/svg/delegate.svg';
+
 const props = defineProps(['chain']);
 
 const blockchain = useBlockchain();
@@ -87,12 +90,14 @@ const change = computed(() => {
 });
 const color = computed(() => {
   switch (true) {
-    case change.value > 0:
-      return 'text-green-600';
-    case change.value === 0:
-      return 'text-grey-500';
-    case change.value < 0:
-      return 'text-red-600';
+    // case change.value > 0:
+    //   return 'text-green-600';
+    // case change.value === 0:
+    //   return 'text-grey-500';
+    // case change.value < 0:
+    //   return 'text-red-600';
+    default:
+      return 'text-[#83838A]';
   }
 });
 
@@ -127,7 +132,7 @@ const amount = computed({
   <div>
     <div
       v-if="coinInfo && coinInfo.name"
-      class="rounded shadow mb-4 border-b border-base-300"
+      class="rounded shadow border-b border-base-300"
     >
       <div class="grid grid-cols-2 md:grid-cols-3 p-4">
         <div class="col-span-2 md:col-span-1">
@@ -205,7 +210,7 @@ const amount = computed({
                   </div>
                 </div>
               </label>
-              <div class="dropdown-content pt-1">
+              <div class="dropdown-content pt-1 z-20">
                 <div class="h-64 overflow-auto w-full shadow rounded">
                   <ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
                     <li
@@ -217,10 +222,8 @@ const amount = computed({
                         class="flex items-center justify-between hover:bg-base-100"
                       >
                         <div class="flex-1">
-                          <div
-                            class="text-main text-sm"
-                            :class="trustColor(item.trust_score)"
-                          >
+                          <div class="text-main text-sm text-[#B999F3]">
+                            <!-- :class="trustColor(item.trust_score)" -->
                             {{ item?.market?.name }}
                           </div>
                           <div class="text-sm text-gray-500 dark:text-gray-400">
@@ -353,7 +356,7 @@ const amount = computed({
         <div class="mx-4 flex flex-wrap items-center">
           <div
             v-for="tag in coinInfo.categories"
-            class="mr-2 mb-4 text-xs bg-gray-100 dark:bg-[#384059] px-3 rounded-full py-1"
+            class="mr-2 mb-2 text-xs bg-gray-100 dark:bg-[rgba(180,183,187,0.10)] px-3 rounded py-1"
           >
             {{ tag }}
           </div>
@@ -365,7 +368,7 @@ const amount = computed({
           ></MdEditor>
         </div>
         <div v-if="!coinInfo.description?.en" class="text-center">
-          No information
+          No informations
         </div>
       </div>
       <div class="border-none lg:border-solid lg:border-l border-base-300">
@@ -406,22 +409,30 @@ const amount = computed({
 
     <div class="rounded mt-4 border-t border-base-300">
       <div
-        class="flex justify-between px-4 pt-4 pb-2 text-lg font-semibold text-main"
+        class="flex flex-wrap justify-between items-center px-4 pt-4 pb-2 text-lg font-semibold text-main"
       >
-        <span class="truncate">{{
-          walletStore.currentAddress || 'Not Connected'
-        }}</span>
+        <div class="flex-1">
+          <p class="text-[18px] text-[#f7f7f7] font-semibold">My Wallet</p>
+
+          <p
+            class="truncate max-w-[calc(100%-10px)] sm:w-[unset] mt-1 text-[#B999F3] text-[14px] font-normal"
+          >
+            {{ walletStore.currentAddress || 'Not Connected' }}
+          </p>
+        </div>
         <RouterLink
           v-if="walletStore.currentAddress"
-          class="float-right text-sm cursor-pointert link link-primary no-underline font-medium"
+          class="float-right inline-flex text-sm cursor-pointer link link-primary no-underline font-medium text-[#B999F3]"
           :to="`/${chain}/account/${walletStore.currentAddress}`"
-          >{{ $t('index.more') }}</RouterLink
         >
+          {{ $t('index.more') }}
+          <Icon icon="mdi:arrow-right" width="20" height="20" />
+        </RouterLink>
       </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-3 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="boxWithBg rounded-lg px-4 py-3 border border-base-300">
           <div class="text-sm mb-1">{{ $t('account.balance') }}</div>
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.balanceOfStakingToken) }}
@@ -429,17 +440,25 @@ const amount = computed({
           <div class="text-sm" :class="color">
             ${{ format.tokenValue(walletStore.balanceOfStakingToken) }}
           </div>
-        </div>
-        <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
-          <div class="text-sm mb-1">{{ $t('module.staking') }}</div>
-          <div class="text-lg font-semibold text-main">
-            {{ format.formatToken(walletStore.stakingAmount) }}
-          </div>
-          <div class="text-sm" :class="color">
-            ${{ format.tokenValue(walletStore.stakingAmount) }}
+
+          <div>
+            <label for="PingTokenConvert" class="btn btn-secondary mr-4">
+              <Icon icon="mdi:swap-vertical" width="20" height="20" />
+              {{ $t('index.btn_swap') }}
+            </label>
+            <label
+              for="send"
+              class="btn btn-secondary"
+              @click="dialog.open('send', {}, updateState)"
+            >
+              <img :src="sendImg" alt="sendIcon" width="20" height="20" />
+              {{ $t('account.btn_send') }}
+            </label>
           </div>
         </div>
-        <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
+        <div
+          class="boxWithBg boxRewardWithImg rounded-lg px-4 py-3 border border-base-300"
+        >
           <div class="text-sm mb-1">{{ $t('index.reward') }}</div>
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.rewardAmount) }}
@@ -447,14 +466,38 @@ const amount = computed({
           <div class="text-sm" :class="color">
             ${{ format.tokenValue(walletStore.rewardAmount) }}
           </div>
+
+          <label
+            for="delegate"
+            class="btn btn-secondary"
+            @click="dialog.open('delegate', {}, updateState)"
+          >
+            <img :src="delegateImg" alt="delegate" width="20" height="20" />
+            {{ $t('account.btn_delegate') }}</label
+          >
         </div>
-        <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
-          <div class="text-sm mb-1">{{ $t('index.unbonding') }}</div>
-          <div class="text-lg font-semibold text-main">
-            {{ format.formatToken(walletStore.unbondingAmount) }}
+        <div>
+          <div
+            class="bg-gray-100 dark:bg-transparent rounded-lg px-4 py-3 border border-base-300 flex flex-col justify-center items-center"
+          >
+            <div class="text-sm mb-1">{{ $t('module.staking') }}</div>
+            <div class="text-lg font-semibold text-main">
+              {{ format.formatToken(walletStore.stakingAmount) }}
+            </div>
+            <div class="text-sm" :class="color">
+              ${{ format.tokenValue(walletStore.stakingAmount) }}
+            </div>
           </div>
-          <div class="text-sm" :class="color">
-            ${{ format.tokenValue(walletStore.unbondingAmount) }}
+          <div
+            class="bg-gray-100 dark:bg-transparent rounded-lg px-4 py-3 mt-4 border border-base-300 flex flex-col justify-center items-center"
+          >
+            <div class="text-sm mb-1">{{ $t('index.unbonding') }}</div>
+            <div class="text-lg font-semibold text-main">
+              {{ format.formatToken(walletStore.unbondingAmount) }}
+            </div>
+            <div class="text-sm" :class="color">
+              ${{ format.tokenValue(walletStore.unbondingAmount) }}
+            </div>
           </div>
         </div>
       </div>
@@ -476,7 +519,7 @@ const amount = computed({
             <tr v-for="(item, index) in walletStore.delegations" :key="index">
               <td>
                 <RouterLink
-                  class="link link-primary no-underline"
+                  class="link link-primary no-underline text-[#B999F3]"
                   :to="`/${chain}/staking/${item?.delegation?.validatorAddress}`"
                 >
                   {{
@@ -499,10 +542,10 @@ const amount = computed({
                 }}
               </td>
               <td>
-                <div>
+                <div class="flex">
                   <label
                     for="delegate"
-                    class="btn !btn-xs !btn-primary btn-ghost rounded-sm mr-2"
+                    class="btn !btn-xs !btn-primary btn-ghost rounded mr-2 filter hover:brightness-150 capitalize"
                     @click="
                       dialog.open(
                         'delegate',
@@ -515,7 +558,7 @@ const amount = computed({
                   </label>
                   <label
                     for="withdraw"
-                    class="btn !btn-xs !btn-primary btn-ghost rounded-sm"
+                    class="btn whitespace-nowrap !btn-xs !btn-primary btn-ghost mr-2 rounded filter hover:brightness-150 capitalize"
                     @click="
                       dialog.open(
                         'withdraw',
@@ -533,28 +576,34 @@ const amount = computed({
         </table>
       </div>
 
-      <div class="grid grid-cols-3 gap-4 px-4 pb-6 mt-4">
-        <label for="PingTokenConvert" class="btn btn-primary text-white">{{
+      <!-- <div class="grid grid-cols-3 gap-4 px-4 pb-6 mt-4">
+        <label for="PingTokenConvert" class="btn btn-primary text-white">
+          <Icon icon='mdi:swap-vertical'/>
+          {{
           $t('index.btn_swap')
         }}</label>
         <label
           for="send"
           class="btn !bg-yes !border-yes text-white"
           @click="dialog.open('send', {}, updateState)"
-          >{{ $t('account.btn_send') }}</label
+          >
+          <Icon icon='mdi:send-variant-outline'/>
+          {{ $t('account.btn_send') }}</label
         >
         <label
           for="delegate"
           class="btn !bg-info !border-info text-white"
           @click="dialog.open('delegate', {}, updateState)"
-          >{{ $t('account.btn_delegate') }}</label
+          >
+
+          {{ $t('account.btn_delegate') }}</label
         >
         <RouterLink
           to="/wallet/receive"
           class="btn !bg-info !border-info text-white hidden"
           >{{ $t('index.receive') }}</RouterLink
         >
-      </div>
+      </div> -->
       <Teleport to="body">
         <ping-token-convert
           :chain-name="blockchain?.current?.prettyName"

src/plugins/i18n/locales/en.json

@@ -286,7 +286,7 @@
     "active_proposals": "Active Proposals",
     "metric": "Metrics",
     "no_active_proposals": "No active proposals",
-    "more": "More",
+    "more": "More details",
     "reward": "Reward",
     "unbonding": "Unbonding",
     "btn_withdraw_reward": "Withdraw Rewards",

src/style.css

@@ -117,3 +117,37 @@ table td {
   border: 1px solid #242627;
   border-image: url(./assets/images/svg/border.svg) 22 / 35px;
 }
+
+.boxWithBg {
+  display: flex;
+  height: 216px;
+  border-radius: 8px;
+  padding: 14px 0px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 4px;
+
+  border: 1px solid var(--Colors-Neutral-Border-default, #383b40);
+  background: var(--Colors-Neutral-Surface-card, #18181a);
+
+  background-image: url(./assets/images/pages/bg_stake_gpu.png);
+  background-repeat: no-repeat;
+  background-size: 105% 105%;
+  background-position: center center;
+  transition: all ease-in-out 0.2s;
+}
+
+.boxRewardWithImg {
+  background-image: url(./assets/images/pages/bg_apy_gpu.png);
+}
+
+.boxWithBg:hover {
+  background-size: 112% 112%;
+}
+
+.btn-secondary {
+  @apply bg-[#2E2E33] rounded-lg border border-[#383B40] px-6 py-[14px] h-[48px] text-[14px] font-medium text-white hover:brightness-150 hover:bg-[#2E2E33] hover:border-[#383B40];
+}