use modal classes directly

Author: sravfeyn

commcare_connect/templates/components/organization_home_page/add_org_member_modal.html

@@ -4,10 +4,10 @@
 <div x-show="showAddMemberModal"
      x-cloak
      x-transition.opacity
-     class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+     class="modal-backdrop"
      @keydown.escape.window="showAddMemberModal = false">
   <div @click.outside="showAddMemberModal = false"
-       class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+       class="modal">
 
     <div class="flex justify-between items-center pb-2 mb-4">
       <h2 class="text-lg font-semibold text-brand-deep-purple">

commcare_connect/templates/components/organization_home_page/remove_org_member_confirm_modal.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 
 <div x-show="showConfirmRemoveMembershipModal" x-cloak x-transition.opacity
-    class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+    class="modal-backdrop"
     @keydown.escape.window="showConfirmRemoveMembershipModal = false">
-    <div @click.outside="showConfirmRemoveMembershipModal = false" class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+    <div @click.outside="showConfirmRemoveMembershipModal = false" class="modal">
 
         <div class="flex justify-between items-center pb-2 mb-4">
             <h2 class="text-lg font-medium text-brand-deep-purple">

commcare_connect/templates/components/worker_page/delete_invites_confirm_modal.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 
 <div x-show="{{ modal_name }}" x-cloak x-transition.opacity
-    class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+    class="modal-backdrop"
     @keydown.escape.window="{{ modal_name }} = false">
-    <div @click.outside="{{ modal_name }} = false" class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+    <div @click.outside="{{ modal_name }} = false" class="modal">
 
         <div class="flex justify-between items-center pb-2 mb-4">
             <h2 class="text-lg font-medium text-brand-deep-purple">

commcare_connect/templates/components/worker_page/export_modal.html

@@ -3,10 +3,10 @@
 <div x-show="{{ modal_name }}"
      x-cloak
      x-transition.opacity
-     class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+     class="modal-backdrop"
      @keydown.escape.window="{{ modal_name }} = false">
   <div @click.outside="{{ modal_name }} = false"
-       class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+       class="modal">
 
     <div class="flex justify-between items-center pb-2 mb-4">
       <h2 class="text-lg font-medium text-brand-deep-purple">

commcare_connect/templates/components/worker_page/import_modal.html

@@ -3,10 +3,10 @@
 <div x-show="{{ modal_name }}"
      x-cloak
      x-transition.opacity
-     class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop"
+     class="modal-backdrop"
      @keydown.escape.window="{{ modal_name }} = false">
   <div @click.outside="{{ modal_name }} = false"
-       class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
+       class="modal">
 
     <div class="flex justify-between items-center pb-2 mb-4">
       <h2 class="text-lg font-medium text-brand-deep-purple">