From c4a209a944cd70158ebcef7b1a23f6f8046c8cf8 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Thu, 8 Feb 2024 14:55:13 +0100
Subject: [PATCH] Display unstoppable grants category in staking v2 (#1173)

* Display unstoppable grants category

* Small styling fix

* Name tag ellipsis
---
 src/components/dapp-staking/StakingTop.vue             |  1 +
 src/components/dapp-staking/my-staking/DappList.vue    | 10 ++++++++--
 .../dapp-staking/my-staking/components/CardList.vue    |  4 +++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/dapp-staking/StakingTop.vue b/src/components/dapp-staking/StakingTop.vue
index cf37f7518..075023e92 100644
--- a/src/components/dapp-staking/StakingTop.vue
+++ b/src/components/dapp-staking/StakingTop.vue
@@ -23,6 +23,7 @@
       <dapp-list category="Tooling" />
       <dapp-list category="Utility" />
       <dapp-list category="Others" />
+      <dapp-list category="unstoppable-grants" />
     </div>
 
     <Teleport to="#staking-top-bg">
diff --git a/src/components/dapp-staking/my-staking/DappList.vue b/src/components/dapp-staking/my-staking/DappList.vue
index 954f6c4b0..b9c7fcf23 100644
--- a/src/components/dapp-staking/my-staking/DappList.vue
+++ b/src/components/dapp-staking/my-staking/DappList.vue
@@ -2,9 +2,9 @@
   <div v-if="dapps && dapps.length > 0" class="wrapper">
     <div class="divider" />
     <div class="wrapper--header">
-      <div class="txt--header">{{ category }}</div>
+      <div class="txt--header">{{ categoryName }}</div>
     </div>
-    <card-list :category="category" :dapps="dapps" />
+    <card-list :category="categoryName" :dapps="dapps" />
   </div>
 </template>
 <script lang="ts">
@@ -27,8 +27,14 @@ export default defineComponent({
       return dappsArray.filter((it: DappCombinedInfo) => it.dapp);
     });
 
+    const categoryName = computed<string>(() => {
+      const name = props.category.replace(/-/g, ' ');
+      return name.charAt(0).toUpperCase() + name.slice(1);
+    });
+
     return {
       dapps,
+      categoryName,
     };
   },
 });
diff --git a/src/components/dapp-staking/my-staking/components/CardList.vue b/src/components/dapp-staking/my-staking/components/CardList.vue
index 511b8eaf7..d1791d353 100644
--- a/src/components/dapp-staking/my-staking/components/CardList.vue
+++ b/src/components/dapp-staking/my-staking/components/CardList.vue
@@ -183,7 +183,7 @@ export default defineComponent({
     }
 
     .badge--tag {
-      width: 54px;
+      width: 64px;
       height: 18px;
       padding: 2px 8px;
       background: $navy-3;
@@ -196,6 +196,8 @@ export default defineComponent({
       color: #fff;
       margin-top: 16px;
       margin-bottom: 16px;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
 
     .divider {