From 074da4768edb9717f935280e1c589986fbc26bb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Wed, 23 Nov 2022 16:37:31 +0800
Subject: [PATCH] refactor: improve status card UI (#28)

---
 components/account/AccountHeader.vue | 8 ++++----
 components/status/StatusCard.vue     | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 25d76aec..b33a8834 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -46,19 +46,19 @@ const createdAt = $computed(() => {
         </div>
       </div>
       <div>
-        <div text-4 text-gray-3 v-html="account.note" />
+        <div text-4 text-gray v-html="account.note" />
       </div>
       <div flex flex-col gap-1>
         <div flex flex-col rounded p3 class="bg-purple/10">
-          <p text-gray text-3 uppercase>
+          <p text="gray/70" text-3 uppercase>
             Joined
           </p>
-          <p text-3 text-gray-3>
+          <p text-3 text-gray>
             {{ createdAt }}
           </p>
         </div>
         <div v-for="field in account.fields" :key="field.name" flex flex-col rounded p3 class="bg-purple/10">
-          <p text-gray text-3 uppercase>
+          <p text="gray/70" text-3 uppercase>
             {{ field.name }}
           </p>
           <p text-3 text-purple-3 v-html="field.value" />
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 894f7479..6686c25c 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -24,8 +24,8 @@ const router = useRouter()
 
 function go(e: MouseEvent) {
   const path = e.composedPath() as HTMLElement[]
-  const el = path.find(el => ['A', 'BUTTON', 'P', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
-  if (!el || el.tagName.toUpperCase() === 'P')
+  const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
+  if (!el)
     router.push(`/@${status.account.acct}/${status.id}`)
 }
 
@@ -63,7 +63,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
 </script>
 
 <template>
-  <div ref="el" flex flex-col gap-2 my-2 px-4 @click="go">
+  <div ref="el" flex flex-col gap-2 px-4 hover:bg="gray/10" transition="duration-100" cursor-pointer @click="go">
     <div v-if="rebloggedBy" pl8>
       <div flex gap-1 items-center text-gray:75 text-sm>
         <div i-ri:repeat-fill mr-1 />