From 47914d59b6c04b4bc4046277ac44e1844cfe9c76 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Nov 2022 15:46:34 +0800
Subject: [PATCH] ui: adjust spacing

---
 components/account/AccountHeader.vue     |  6 +++---
 components/account/AccountInfo.vue       |  6 +++---
 components/account/AccountInlineInfo.vue |  2 +-
 components/status/StatusActions.vue      |  4 ++--
 components/status/StatusCard.vue         | 10 +++++-----
 styles/vars.css                          |  1 +
 unocss.config.ts                         |  1 +
 7 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 7dd99fab..25d76aec 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -16,12 +16,12 @@ const createdAt = $computed(() => {
     <div border="b base">
       <img h-50 w-full object-cover :src="account.header">
     </div>
-    <div p3 style="margin-top:-3.5rem;" flex flex-col gap-6>
+    <div p4 mt--17 flex flex-col gap-6>
       <div flex justify-between>
         <div flex flex-col gap-2>
-          <div p1>
+          <div>
             <NuxtLink :to="`/@${account.acct}`">
-              <AccountAvatar :account="account" w-20 h-20 />
+              <AccountAvatar :account="account" w-30 h-30 />
             </NuxtLink>
           </div>
           <NuxtLink flex flex-col :to="`/@${account.acct}`">
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 96cb242c..f7a32c9f 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -11,10 +11,10 @@ const id = computed(() => fullServer && !account.acct.includes('@') ? `@${accoun
 </script>
 
 <template>
-  <div flex gap-2>
-    <div p1>
+  <div flex gap-3>
+    <div>
       <NuxtLink :to="link ? `/@${account.acct}` : null">
-        <AccountAvatar :account="account" w-10 h-10 />
+        <AccountAvatar :account="account" w-12 h-12 />
       </NuxtLink>
     </div>
     <NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null">
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index bd37117d..72006ce9 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :href="`/@${account.acct}`" flex gap-2 items-center>
+  <NuxtLink :href="`/@${account.acct}`" flex gap-1 items-center>
     <AccountAvatar :account="account" w-5 h-5 />
     <CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index a041e07a..36139470 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -72,10 +72,10 @@ const toggleBookmark = () => toggleStatusAction(
         <div :class="(status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line') + (isLoading.bookmarked ? ' pointer-events-none' : '')" />
       </div>
     </button>
-    <button flex gap-1 items-center w-full rounded op50 hover="op100 text-purple" group>
+    <!-- <button flex gap-1 items-center w-full rounded op50 hover="op100 text-purple" group>
       <div rounded-full p2 group-hover="bg-purple/10">
         <div i-ri:share-circle-line />
       </div>
-    </button>
+    </button> -->
   </div>
 </template>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index fc7d79c1..894f7479 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -72,15 +72,15 @@ const timeago = useTimeAgo(() => status.createdAt, {
       </div>
     </div>
     <AccountInfo :account="status.account">
-      <template>
+      <template #default>
         <div flex-auto />
-        <div text-sm op50>
+        <div text-sm op50 :title="status.createdAt">
           {{ timeago }}
         </div>
       </template>
     </AccountInfo>
-    <StatusReplyingTo :status="status" />
-    <div pl14>
+    <StatusReplyingTo :status="status" ml5 mt--1 />
+    <div pl15>
       <StatusBody :status="status" />
       <StatusMedia
         v-if="status.mediaAttachments?.length"
@@ -92,6 +92,6 @@ const timeago = useTimeAgo(() => status.createdAt, {
         :actions="false"
       />
     </div>
-    <StatusActions v-if="actions !== false" pl12 :status="status" />
+    <StatusActions v-if="actions !== false" pl13 :status="status" />
   </div>
 </template>
diff --git a/styles/vars.css b/styles/vars.css
index 3261ed23..4d5bb14c 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -5,6 +5,7 @@
   --c-bg-base: #fff;
   --c-bg-active: #efefef;
   --c-text-base: #222;
+  --c-text-secondary: #888;
 }
 
 .dark {
diff --git a/unocss.config.ts b/unocss.config.ts
index f346f658..f8ef7c1d 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -16,6 +16,7 @@ export default defineConfig({
       'bg-base': 'bg-$c-bg-base',
       'bg-active': 'bg-$c-bg-active',
       'text-base': 'text-$c-text-base',
+      'text-secondary': 'text-$c-text-secondary',
       'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
       'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active interact-disabled',
       'btn-outline': 'px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white interact-disabled',