From cf225e200570d4f067393788c46f245cc21d8060 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 29 Nov 2022 21:04:23 +0100
Subject: [PATCH] feat: improve follow buttons (#238)

---
 components/account/AccountFollowButton.vue | 35 +++++++++++-----------
 components/account/AccountHeader.vue       |  2 +-
 unocss.config.ts                           |  3 +-
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 97f311a4..4584c804 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -38,25 +38,24 @@ useCommand({
 <template>
   <button
     v-if="enable"
-    flex gap-1 items-center h-fit rounded hover="op100 text-white b-orange" group btn-base
+    gap-1 items-center group
     :disabled="relationship?.requested"
-    @click="toggleFollow"
+    border-1
+    rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1 :class="relationship?.following ? 'text-base border-text-base' : 'text-inverted bg-primary border-primary'" :hover="relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" @click="toggleFollow"
   >
-    <div rounded w-28 p2 :group-hover="relationship?.following ? 'bg-red/75' : 'bg-orange/40'" :class="!relationship?.following ? relationship?.followedBy ? 'bg-orange/20' : 'bg-white/10' : relationship?.followedBy ? ' bg-orange/70' : 'bg-orange/50'">
-      <template v-if="relationship?.following">
-        <span group-hover="hidden">{{ relationship?.followedBy ? 'Mutuals' : 'Following' }}</span>
-        <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
-      </template>
-      <template v-else-if="relationship?.requested">
-        <span>{{ $t('account.follow_requested') }}</span>
-      </template>
-      <template v-else-if="relationship?.followedBy">
-        <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
-        <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
-      </template>
-      <template v-else>
-        <span>{{ $t('account.follow') }}</span>
-      </template>
-    </div>
+    <template v-if="relationship?.following">
+      <span group-hover="hidden">{{ relationship?.followedBy ? 'Mutuals' : 'Following' }}</span>
+      <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
+    </template>
+    <template v-else-if="relationship?.requested">
+      <span>{{ $t('account.follow_requested') }}</span>
+    </template>
+    <template v-else-if="relationship?.followedBy">
+      <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
+      <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
+    </template>
+    <template v-else>
+      <span>{{ $t('account.follow') }}</span>
+    </template>
   </button>
 </template>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 1dc75a26..cc9a93f8 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -78,7 +78,7 @@ watchEffect(() => {
     <button border="b base" z-1>
       <img h-50 w-full object-cover :src="account.header" @click="previewHeader">
     </button>
-    <div p4 mt--17 flex flex-col gap-4>
+    <div p4 mt--18 flex flex-col gap-4>
       <div relative>
         <div flex="~ col gap-2 1">
           <button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar">
diff --git a/unocss.config.ts b/unocss.config.ts
index 142d96fd..77155147 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -22,13 +22,14 @@ export default defineConfig({
 
       // text colors
       'text-base': 'text-$c-text-base',
+      'text-inverted': 'text-$c-bg-base',
       'text-secondary': 'text-$c-text-secondary',
       'text-secondary-light': 'text-$c-text-secondary-light',
 
       // buttons
       'btn-base': 'cursor-pointer disabled:pointer-events-none disabled:bg-$c-bg-btn-disabled disabled:text-$c-text-btn-disabled',
       'btn-solid': 'btn-base px-4 py-2 rounded text-$c-text-btn bg-$c-primary hover:bg-$c-primary-active',
-      'btn-outline': 'btn-base px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white',
+      'btn-outline': 'btn-base px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-inverted',
       'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
       'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',