From 42eb07e2e8e7b43c7681ad3f80a857b1e7677d3e Mon Sep 17 00:00:00 2001
From: Nathan Power <Nathan.c.power@icloud.com>
Date: Mon, 26 Sep 2022 14:23:39 +1000
Subject: [PATCH] =?UTF-8?q?fix(friend-requests):=20add=20color=20and=20cha?=
 =?UTF-8?q?nge=20mobile=20friend=20request=20add/=E2=80=A6=20(#5011)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(friend-requests): add color and change mobile friend request add/decline buttons

* fix(friend-requests): swap accept/decline buttons for mobile
---
 components/views/friends/mobile/ListItem.vue | 28 ++++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/components/views/friends/mobile/ListItem.vue b/components/views/friends/mobile/ListItem.vue
index 2546cbc32b..417239067e 100644
--- a/components/views/friends/mobile/ListItem.vue
+++ b/components/views/friends/mobile/ListItem.vue
@@ -16,15 +16,17 @@
         </button> -->
       </template>
       <template v-else>
+        <button :disabled="loading" class="reject" @click="cancelRequest">
+          <x-icon />
+        </button>
+
         <button
           v-if="type === 'incoming'"
           :disabled="loading"
+          class="accept"
           @click="acceptFriendRequest"
         >
-          <user-plus-icon />
-        </button>
-        <button :disabled="loading" @click="cancelRequest">
-          <trash-icon />
+          <check-icon />
         </button>
       </template>
     </div>
@@ -33,19 +35,15 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import {
-  MessageCircleIcon,
-  TrashIcon,
-  UserPlusIcon,
-} from 'satellite-lucide-icons'
+import { MessageCircleIcon, XIcon, CheckIcon } from 'satellite-lucide-icons'
 import { User } from '~/libraries/Iridium/users/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
   components: {
     MessageCircleIcon,
-    TrashIcon,
-    UserPlusIcon,
+    XIcon,
+    CheckIcon,
   },
   props: {
     user: {
@@ -112,6 +110,14 @@ export default Vue.extend({
     display: flex;
     flex-shrink: 0;
     gap: 1rem;
+
+    .accept {
+      color: @green;
+    }
+
+    .reject {
+      color: @red;
+    }
   }
 
   button:disabled {