From 2fb5412a08493abcd4c5323de73165fd875e8bb3 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 11:54:46 +0800
Subject: [PATCH] feat: improve account links feedback

---
 components/account/AccountHoverCard.vue    | 2 +-
 components/account/AccountHoverWrapper.vue | 2 +-
 components/account/AccountInfo.vue         | 2 +-
 components/account/AccountInlineInfo.vue   | 8 ++++++--
 components/status/StatusAccountDetails.vue | 3 ++-
 components/status/StatusCard.vue           | 2 +-
 components/status/StatusReplyingTo.vue     | 1 -
 unocss.config.ts                           | 5 ++++-
 8 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index ab373ccb..d1099948 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card">
+  <div rounded w-80 z-900 overflow-hidden p-4>
     <AccountInfo :account="account" />
     <div text-sm flex flex-row text-secondary mt-4>
       <NuxtLink :to="`/${getFullHandle(account)}/`">
diff --git a/components/account/AccountHoverWrapper.vue b/components/account/AccountHoverWrapper.vue
index 06561a94..3999a174 100644
--- a/components/account/AccountHoverWrapper.vue
+++ b/components/account/AccountHoverWrapper.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <VMenu placement="bottom-start">
+  <VMenu placement="bottom-start" :delay="{ show: 500, hide: 100 }">
     <slot />
     <template #popper>
       <AccountHoverCard :account="account" />
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 6e423fa3..c1fb4c00 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -12,7 +12,7 @@ const { account } = defineProps<{
   <div flex gap-3>
     <AccountAvatar :account="account" w-12 h-12 />
     <div flex="~ col">
-      <ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+      <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
       <AccountHandle :account="account" text-sm />
     </div>
   </div>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 37406e3b..d9bfa9fc 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -8,8 +8,12 @@ const { link = true } = defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
+  <NuxtLink
+    :to="link ? getAccountPath(account) : undefined"
+    :class="link ? 'text-link-rounded' : ''"
+    min-w-0 flex gap-1 items-center
+  >
     <AccountAvatar :account="account" w-5 h-5 />
-    <ContentRich hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+    <ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
   </NuxtLink>
 </template>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index a79f01af..3763a20e 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -12,8 +12,9 @@ const { account, link = true } = defineProps<{
     <NuxtLink
       :to="link ? getAccountPath(account) : undefined"
       flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
+      text-link-rounded
     >
-      <ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+      <ContentRich font-bold break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
       <AccountHandle :account="account" />
     </NuxtLink>
   </AccountHoverWrapper>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index a3275fda..1c4317c2 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -48,7 +48,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
     </div>
     <div flex gap-4>
       <div>
-        <NuxtLink :to="getAccountPath(status.account)">
+        <NuxtLink :to="getAccountPath(status.account)" rounded-full>
           <AccountAvatar w-12 h-12 :account="status.account" />
         </NuxtLink>
       </div>
diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
index d636b8f2..ae5fa301 100644
--- a/components/status/StatusReplyingTo.vue
+++ b/components/status/StatusReplyingTo.vue
@@ -18,6 +18,5 @@ const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
     <div i-ri:reply-fill rotate-180 text-secondary-light class="mr-1.5" />
     <AccountInlineInfo v-if="account" :account="account" :link="false" />
     <span v-else>Someone</span>
-    's post
   </NuxtLink>
 </template>
diff --git a/unocss.config.ts b/unocss.config.ts
index f34c8c56..a3743521 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -19,7 +19,7 @@ export default defineConfig({
       'bg-active': 'bg-$c-bg-active',
       'bg-code': 'bg-$c-bg-code',
 
-      // text
+      // text colors
       'text-base': 'text-$c-text-base',
       'text-secondary': 'text-$c-text-secondary',
       'text-secondary-light': 'text-$c-text-secondary-light',
@@ -31,6 +31,9 @@ export default defineConfig({
       'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
       'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',
 
+      // link
+      'text-link-rounded': 'focus:outline-none focus:ring-(2 primary inset) hover:bg-active rounded md:rounded-full px2 mx--2',
+
       // utils
       'flex-center': 'items-center justify-center',
       'flex-v-center': 'items-center',