fix(friend-requests): add color and change mobile friend request add/… (

#5011)

* 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

@@ -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 {