💄 Adjust some minor UI issues

src/assets/css/index.scss

@@ -79,3 +79,7 @@
     @apply fill-current;
   }
 }
+
+.tooltip-inner {
+  padding: 5px 10px 4px;
+}

src/components/NFTMessage/Identity.vue

@@ -20,7 +20,10 @@
       :is-avatar-outlined="isUserCivicLiker"
     />
     <div>
-      <div class="text-[12px] text-medium-gray">{{ userLabel }}</div>
+      <div
+        v-if="isShowTypeLabel"
+        class="text-[12px] text-medium-gray"
+      >{{ userLabel }}</div>
       <Label class="text-like-green" preset="h5">{{ userDisplayName }}</Label>
     </div>
   </NuxtLink>
@@ -49,6 +52,10 @@ export default {
       type: [String, Array],
       default: undefined,
     },
+    isShowTypeLabel: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     toRoute() {

src/components/NFTMessage/index.vue

@@ -31,6 +31,7 @@
       <NFTMessageIdentity
         v-if="fromWallet"
         :type="fromType"
+        :is-show-type-label="isShowIdentityTypeLabel"
         :wallet-address="fromWallet"
       />
       <IconArrowLeft
@@ -40,6 +41,7 @@
       <NFTMessageIdentity
         v-if="toWallet"
         :type="toType"
+        :is-show-type-label="isShowIdentityTypeLabel"
         :wallet-address="toWallet"
       />
     </div>
@@ -101,6 +103,9 @@ export default {
           return this.$t('nft_message_type_generic');
       }
     },
+    isShowIdentityTypeLabel() {
+      return this.type === 'mint_nft';
+    },
   },
 };
 </script>

src/components/NFTPage/EventList/Table.vue

@@ -18,7 +18,6 @@
         <td>
           <Label
             v-if="event.event === 'purchase'"
-            class="break-all"
             :text="$t('nft_details_page_activity_list_event_collect')"
           >
             <template #prepend>
@@ -27,7 +26,6 @@
           </Label>
           <Label
             v-else-if="event.event === 'transfer'"
-            class="break-all"
             :text="$t('nft_details_page_activity_list_event_transfer')"
           >
             <template #prepend>
@@ -36,18 +34,28 @@
           </Label>
           <Label
             v-else-if="event.event === 'mint_nft'"
-            class="break-all"
             :text="$t('nft_details_page_activity_list_event_mint_nft')"
-          />
+          >
+            <template #prepend>
+              <IconFlare />
+            </template>
+          </Label>
           <Label
             v-else-if="event.event === 'new_class'"
-            class="break-all"
             :text="$t('nft_details_page_activity_list_event_create_class')"
           >
             <template #prepend>
               <IconFlare />
             </template>
           </Label>
+          <Label
+            v-else
+            :text="event.event"
+          >
+            <template #prepend>
+              <IconCircle />
+            </template>
+          </Label>
         </td>
         <td>
           <Label v-if="event.price" class="break-all" :text="event.price | formatNumber" />
@@ -72,6 +80,7 @@
         <td>
           <LinkV2 class="text-left" :href="getChainExplorerTx(event.txHash)">
             <TimeAgo
+              class="px-[2px]"
               long
               tooltip
               :datetime="event.timestamp"

src/mixins/portfolio.js

@@ -4,7 +4,7 @@ import throat from 'throat';
 import {
   NFT_CLASS_LIST_SORTING,
   NFT_CLASS_LIST_SORTING_ORDER,
-  isWritingNFT,
+  checkIsWritingNFT,
 } from '~/util/nft';
 import clipboardMixin from '~/mixins/clipboard';
 import userInfoMixin from '~/mixins/user-info';
@@ -79,7 +79,7 @@ export default {
 
       const nftClassMapOfOther = new Map();
       allNFTClassMap.forEach(nft => {
-        if (!isWritingNFT(this.getNFTClassMetadataById(nft.classId))) {
+        if (!checkIsWritingNFT(this.getNFTClassMetadataById(nft.classId))) {
           nftClassMapOfOther.set(nft.classId, nft);
         }
       });
@@ -335,7 +335,7 @@ export default {
       });
 
       // wait for metadata to determine if it is writing NFT
-      if (isWritingNFT(metadata)) {
+      if (checkIsWritingNFT(metadata)) {
         try {
           await this.fetchNFTPurchaseInfo(classId);
         } catch (error) {

src/store/modules/nft.js

@@ -5,7 +5,7 @@ import * as api from '@/util/api';
 import {
   NFT_CLASS_LIST_SORTING,
   NFT_CLASS_LIST_SORTING_ORDER,
-  isWritingNFT,
+  checkIsWritingNFT,
   isValidHttpUrl,
   formatOwnerInfoFromChain,
   getNFTsRespectDualPrefix,
@@ -48,10 +48,10 @@ function compareIsWritingNFT(getters, classIdA, classIdB) {
   const aPurchaseData = getters.getNFTClassPurchaseInfoById(classIdA);
   const bPurchaseData = getters.getNFTClassPurchaseInfoById(classIdB);
   const aIsWritingNFT =
-    isWritingNFT(aMetadata) &&
+    checkIsWritingNFT(aMetadata) &&
     (aPurchaseData?.price || aPurchaseData?.lastSoldPrice) !== undefined;
   const bIsWritingNFT =
-    isWritingNFT(bMetadata) &&
+    checkIsWritingNFT(bMetadata) &&
     (bPurchaseData?.price || bPurchaseData?.lastSoldPrice) !== undefined;
   if (aIsWritingNFT && !bIsWritingNFT) return -1;
   if (!aIsWritingNFT && bIsWritingNFT) return 1;

src/util/nft.js

@@ -166,7 +166,7 @@ export function getNFTClassCollectionType(classMetadata) {
   }
 }
 
-export function isWritingNFT(classMetadata) {
+export function checkIsWritingNFT(classMetadata) {
   return (
     getNFTClassCollectionType(classMetadata) ===
     nftClassCollectionType.WritingNFT