ui: adjust spacing

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}`">

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">

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>

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>

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>

styles/vars.css

@@ -5,6 +5,7 @@
   --c-bg-base: #fff;
   --c-bg-active: #efefef;
   --c-text-base: #222;
+  --c-text-secondary: #888;
 }
 
 .dark {

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',