editing div component

codersforcauses · Jan 14, 2025 · c98dc1a · c98dc1a
1 parent 92a22c5
commit c98dc1a
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/client/src/components/FriendComponent.vue b/client/src/components/FriendComponent.vue
@@ -13,7 +13,7 @@ const emit = defineEmits(['accept', 'reject', 'dismiss', 'delete', 'addFriend'])
 </script>
 
 <template>
-  <div class="rounded-lg d-flex ga-3 px-5 outline align-center bg-creamWhite text-primaryGrey">
+  <div class="friend-row">
     <v-img
       class="rounded-circle"
       max-height="32"
@@ -70,6 +70,19 @@ const emit = defineEmits(['accept', 'reject', 'dismiss', 'delete', 'addFriend'])
 </template>
 
 <style scoped>
+.friend-row {
+  display: flex;
+  gap: 1rem;  
+  padding-left: 1.25rem;  
+  padding-right: 1.25rem;
+  border: 1px solid;  
+  align-items: center;
+  border-radius: 0.5rem;  
+  background-color: primaryBlue;  
+  border-color: primaryBrown;
+  color: primaryGrey;  
+}
+
 .truncate-name {
   white-space: nowrap;
   overflow: hidden;