feat(ui): colorize reply and reblog

components/account/AccountTabs.vue

@@ -22,7 +22,7 @@ const tabs = $computed(() => [
       params: { server, account },
     },
     display: t('tab.posts_with_replies'),
-    icon: 'i-ri:chat-3-line',
+    icon: 'i-ri:chat-1-line',
   },
   {
     name: 'account-media',

components/status/StatusActions.vue

@@ -38,7 +38,7 @@ const reply = () => {
         :content="$t('action.reply')"
         :text="status.repliesCount || ''"
         color="text-blue" hover="text-blue" group-hover="bg-blue/10"
-        icon="i-ri:chat-3-line"
+        icon="i-ri:chat-1-line"
         :command="command"
         @click="reply"
       >

components/status/StatusActionsMore.vue

@@ -129,7 +129,7 @@ async function editStatus() {
         <template v-if="userSettings.zenMode">
           <CommonDropdownItem
             :text="$t('action.reply')"
-            icon="i-ri:chat-3-line"
+            icon="i-ri:chat-1-line"
             :command="command"
             @click="reply()"
           />

components/status/StatusCard.vue

@@ -98,6 +98,7 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
     <!-- Upper border -->
     <div :h="showUpperBorder ? '1px' : '0'" w-auto bg-border mb-1 />
 
+    <slot name="meta">
       <!-- Line connecting to previous status -->
       <template v-if="status.inReplyToAccountId">
         <StatusReplyingTo
@@ -117,16 +118,15 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
         </div>
       </template>
 
-    <!-- Reblog status & Meta -->
+      <!-- Reblog status -->
       <div flex="~ col" justify-between>
-      <slot name="meta">
         <div
           v-if="rebloggedBy && !collapseRebloggedBy"
           flex="~" items-center
           p="t-1 b-0.5 x-1px"
           relative text-secondary ws-nowrap
         >
-          <div i-ri:repeat-fill me-46px text-primary w-16px h-16px />
+          <div i-ri:repeat-fill me-46px text-green w-16px h-16px />
           <div absolute top-1 ms-24px w-32px h-32px rounded-full>
             <AccountHoverWrapper :account="rebloggedBy">
               <NuxtLink :to="getAccountRoute(rebloggedBy)">
@@ -136,14 +136,14 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
           </div>
           <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
         </div>
-      </slot>
       </div>
+    </slot>
 
     <div flex gap-3 :class="{ 'text-secondary': faded }">
       <!-- Avatar -->
       <div relative>
         <div v-if="collapseRebloggedBy" absolute flex items-center justify-center top--6px px-2px py-3px rounded-full bg-base>
-          <div i-ri:repeat-fill text-primary w-16px h-16px />
+          <div i-ri:repeat-fill text-green w-16px h-16px />
         </div>
         <AccountHoverWrapper :account="status.account">
           <NuxtLink :to="getAccountRoute(status.account)" rounded-full>

components/status/StatusReplyingTo.vue

@@ -18,16 +18,18 @@ const account = isSelf ? computed(() => status.account) : useAccountById(status.
     v-if="status.inReplyToId"
     flex="~ gap2" items-center h-auto text-sm text-secondary
     :to="getStatusInReplyToRoute(status)"
-    :title=" $t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
+    :title="$t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
+    text-blue saturate-50 hover:saturate-100
   >
     <template v-if="isSelfReply">
-      <span btn-text p0 mb-1>{{ $t('status.show_full_thread') }}</span>
+      <div i-ri-discuss-line text-blue />
+      <span>{{ $t('status.show_full_thread') }}</span>
     </template>
     <template v-else>
-      <div i-ri-chat-1-line />
+      <div i-ri-chat-1-line text-blue />
       <i18n-t keypath="status.replying_to">
         <template v-if="account">
-          <AccountInlineInfo :account="account" :link="false" mx1 />
+          <AccountInlineInfo :account="account" :link="false" />
         </template>
         <template v-else>
           {{ $t('status.someone') }}