From 8ff3496f5a74d06de2806778848ab8b1c66fba82 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 13 Dec 2024 16:25:20 +0100
Subject: [PATCH] changed styling of modal

---
 components/profile/FriendRequestModal.vue | 2 +-
 components/profile/Friendlist.vue         | 2 +-
 components/profile/UserModal.vue          | 9 ++++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
index ec79a2a..1e6a8c0 100644
--- a/components/profile/FriendRequestModal.vue
+++ b/components/profile/FriendRequestModal.vue
@@ -58,7 +58,7 @@ const addFriend = async () => {
     text-align: center;
     background-color: white;
     height: 500px;
-    width: 500px;
+    width: 40vb;
     margin-top: 10%;
     border-radius: 20px;
 }
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 3273810..5c13584 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -31,7 +31,7 @@ async function getFriendships() {
   <div class="flex flex-col">
     <!-- Buttons Section -->
     <div class="flex justify-center mb-3">
-      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new Friends</button>
+      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
       <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
     </div>
 
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index cb96b0b..ef919cf 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -86,13 +86,13 @@ async function getFriendInformation() {
                     <Icon name="mdi:check" class="text-5xl text-red-600" />
                 </div>
             </div>
-            <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-5 gap-10">
+            <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-16 gap-10">
                 <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.REMOVE)">Remove Friend</button>
             </div>
-            <div v-else-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-5 gap-10">
+            <div v-else-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-16 gap-10">
                 <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.DECLINE)">Cancel Request</button>
             </div>
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-3 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>
 </template>
@@ -117,9 +117,8 @@ async function getFriendInformation() {
     text-align: center;
     background-color: white;
     height: 500px;
-    width: 500px;
+    width: 40vb;
     margin-top: 10%;
-    padding: 60px 0;
     border-radius: 20px;
 }