From 2211383258737d54b2ba29bd7525d0f6bcdac26f Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 8 Jan 2023 10:03:23 +0100
Subject: [PATCH] feat(ui): colorize reply and reblog

---
 components/account/AccountTabs.vue      |  2 +-
 components/status/StatusActions.vue     |  2 +-
 components/status/StatusActionsMore.vue |  2 +-
 components/status/StatusCard.vue        | 50 ++++++++++++-------------
 components/status/StatusReplyingTo.vue  | 10 +++--
 5 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/components/account/AccountTabs.vue b/components/account/AccountTabs.vue
index 8f9bad38..75b58196 100644
--- a/components/account/AccountTabs.vue
+++ b/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',
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 8eb66932..693590f5 100644
--- a/components/status/StatusActions.vue
+++ b/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"
       >
diff --git a/components/status/StatusActionsMore.vue b/components/status/StatusActionsMore.vue
index 4b991f8c..697d2c51 100644
--- a/components/status/StatusActionsMore.vue
+++ b/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()"
           />
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index b9747484..5748be67 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -98,35 +98,35 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
     <!-- Upper border -->
     <div :h="showUpperBorder ? '1px' : '0'" w-auto bg-border mb-1 />
 
-    <!-- Line connecting to previous status -->
-    <template v-if="status.inReplyToAccountId">
-      <StatusReplyingTo
-        v-if="showReplyTo"
-        ml-6 pt-1 pl-5
-        :status="status"
-        :is-self-reply="isSelfReply"
-        :class="faded ? 'text-secondary-light' : ''"
-      />
-      <div flex="~ col gap-1" items-center pos="absolute top-0 left-0" w="20.5" z--1>
-        <template v-if="showReplyTo">
-          <div w="1px" h="0.5" border="x base" mt-3 />
-          <div w="1px" h="0.5" border="x base" />
-          <div w="1px" h="0.5" border="x base" />
-        </template>
-        <div w="1px" h-10 border="x base" />
-      </div>
-    </template>
+    <slot name="meta">
+      <!-- Line connecting to previous status -->
+      <template v-if="status.inReplyToAccountId">
+        <StatusReplyingTo
+          v-if="showReplyTo"
+          ml-6 pt-1 pl-5
+          :status="status"
+          :is-self-reply="isSelfReply"
+          :class="faded ? 'text-secondary-light' : ''"
+        />
+        <div flex="~ col gap-1" items-center pos="absolute top-0 left-0" w="20.5" z--1>
+          <template v-if="showReplyTo">
+            <div w="1px" h="0.5" border="x base" mt-3 />
+            <div w="1px" h="0.5" border="x base" />
+            <div w="1px" h="0.5" border="x base" />
+          </template>
+          <div w="1px" h-10 border="x base" />
+        </div>
+      </template>
 
-    <!-- Reblog status & Meta -->
-    <div flex="~ col" justify-between>
-      <slot name="meta">
+      <!-- Reblog status -->
+      <div flex="~ col" justify-between>
         <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>
+      </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>
diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
index 773fc558..7c0bf147 100644
--- a/components/status/StatusReplyingTo.vue
+++ b/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') }}