fixing button colours and placement

codersforcauses · Jan 13, 2025 · 613b746 · 613b746
1 parent 8082b34
commit 613b746
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 15 deletions.
diff --git a/client/src/components/FriendComponent.vue b/client/src/components/FriendComponent.vue
@@ -24,21 +24,19 @@ const emit = defineEmits(['accept', 'reject', 'dismiss', 'delete', 'addFriend'])
     ></v-img>
     <v-text class="me-auto font-weight-bold truncate-name">{{ name }}</v-text>
 
-    <!-- Default slot for custom content -->
+    <!-- Default slot-->
     <slot name="default"></slot>
 
     <!-- Accept/Reject variant -->
     <div v-if="variant === 'acceptReject'" class="acceptreject">
       <slot name="acceptreject">
         <v-icon 
           icon="mdi-check" 
-          color="success" 
           @click="emit('accept')"
           class="cursor-pointer"
         />
         <v-icon 
           icon="mdi-close" 
-          color="error" 
           @click="emit('reject')"
           class="cursor-pointer"
         />
@@ -51,7 +49,6 @@ const emit = defineEmits(['accept', 'reject', 'dismiss', 'delete', 'addFriend'])
         <v-btn
           color="primaryBlue"
           variant="flat"
-          density="comfortable"
           @click="emit('dismiss')"
           class="dismiss-btn"
         >
@@ -66,7 +63,6 @@ const emit = defineEmits(['accept', 'reject', 'dismiss', 'delete', 'addFriend'])
         <v-btn
           color="primaryPink"
           variant="flat"
-          density="comfortable"
           @click="showDialog = true"
         >
           Delete
@@ -80,10 +76,10 @@ const emit = defineEmits(['accept', 'reject', 'dismiss', 'delete', 'addFriend'])
           <v-card-text>Are you sure you want to delete this friend?</v-card-text>
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn color="grey-darken-1" variant="text" @click="showDialog = false">
+            <v-btn color="primaryBlue" variant="flat" @click="showDialog = false">
               Cancel
             </v-btn>
-            <v-btn color="error" variant="text" @click="emit('delete'); showDialog = false">
+            <v-btn color="primaryPink" variant="flat"  @click="emit('delete'); showDialog = false">
               Confirm
             </v-btn>
           </v-card-actions>
@@ -97,7 +93,6 @@ const emit = defineEmits(['accept', 'reject', 'dismiss', 'delete', 'addFriend'])
         <v-btn
           color="primaryPink"
           variant="flat"
-          density="comfortable"
           @click="emit('addFriend')"
         >
           Add Friend
@@ -141,13 +136,6 @@ const emit = defineEmits(['accept', 'reject', 'dismiss', 'delete', 'addFriend'])
   margin-left: 8px;
 }
 
-.dismiss-btn {
-  background-color: #1B2B4B !important;
-  color: white !important;
-  text-transform: none;
-  border-radius: 8px;
-}
-
 .cursor-pointer {
   cursor: pointer;
 }

diff --git a/client/src/views/FriendView.vue b/client/src/views/FriendView.vue
@@ -89,6 +89,14 @@ const handleAddFriend = (index: number) => {
           @addFriend="handleAddFriend(index)"
         />
       </v-col>
+      <v-col v-for="(friend, index) in currentFriends" :key="index" cols="12">
+        <FriendComponent
+          :avatar-index="friend.avatarIndex"
+          :name="friend.name"
+          variant="accept"
+          @addFriend="handleAccept(index)"
+        />
+      </v-col>
     </v-row>
   </v-container>
 </template>