Final: Enhance app functionalities (#196)

Author: hoangsonww

MovieVerse-Frontend/html/favorites.html

@@ -391,8 +391,8 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
       <button id="delete-watchlist-btn">Delete Watch Lists</button>
     </div>
 
-    <div id="create-watchlist-modal" class="modal" style="z-index: 1000000000">
-      <div class="modal-content">
+    <div id="create-watchlist-modal" class="modal" style="z-index: 1000000000; margin-top: 0; padding-top: 0">
+      <div class="modal-content" style="margin-top: 10px">
         <span class="close-button" title="Close this modal" onclick="closeModal('create-watchlist-modal')">&times;</span>
         <h2>Create a Watch List</h2>
         <form id="create-watchlist-form">
@@ -410,8 +410,8 @@ <h2>Create a Watch List</h2>
       <div class="spinner"></div>
     </div>
 
-    <div id="edit-watchlist-modal" class="modal" style="z-index: 1000000000">
-      <div class="modal-content">
+    <div id="edit-watchlist-modal" class="modal" style="z-index: 1000000000; margin-top: 0; padding-top: 0">
+      <div class="modal-content" style="margin-top: 10px">
         <span class="close-button" title="Close this modal" onclick="closeModal('edit-watchlist-modal')">&times;</span>
         <h2>Edit a Watch List</h2>
         <form id="edit-watchlist-form">
@@ -420,8 +420,8 @@ <h2>Edit a Watch List</h2>
       </div>
     </div>
 
-    <div id="delete-watchlist-modal" class="modal" style="z-index: 1000000000">
-      <div class="modal-content">
+    <div id="delete-watchlist-modal" class="modal" style="z-index: 1000000000; margin-top: 0; padding-top: 0">
+      <div class="modal-content" style="margin-top: 40px">
         <span class="close-button" title="Close this modal" onclick="closeModal('delete-watchlist-modal')">&times;</span>
         <h2>Delete Watch Lists</h2>
         <label>Select watch lists to delete:</label>

MovieVerse-Frontend/html/user-profile.html

@@ -554,8 +554,8 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
       <div class="spinner"></div>
     </div>
     <p id="signInPrompt" style="text-align: center; font-size: 24px; margin-top: 100px"></p>
-    <div id="editProfileModal" class="modal">
-      <div class="modal-content">
+    <div id="editProfileModal" class="modal" style="margin-top: 0; padding-top: 0">
+      <div class="modal-content" style="margin-top: 10px">
         <div class="modal-header" style="margin-bottom: 20px">
           <h2>Edit Profile Details</h2>
           <span class="close" onclick="closeModal()">&times;</span>