changed styling of modal

BeatBuzzer · Dec 13, 2024 · 8ff3496 · 8ff3496
1 parent 6ab6fc6
commit 8ff3496
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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;
 }