Fix and consolidate modal styles (#74)

Author: imnasnainaec

src/components/CreateProjectModal.tsx

@@ -102,10 +102,10 @@ export function CreateProjectModal({
   if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:fixed tw:inset-0 tw:z-50 tw:flex tw:items-center tw:justify-center tw:bg-black/40">
+    <div className="tw:modal-overlay">
       <dialog
         aria-labelledby="create-project-modal-title"
-        className="tw:bg-background tw:text-foreground tw:rounded tw:border tw:border-border tw:p-6 tw:w-96 tw:shadow-lg"
+        className="tw:modal-dialog tw:rounded tw:w-96"
         open
       >
         <h2

src/components/ProjectMetadataModal.tsx

@@ -148,11 +148,11 @@ export function ProjectMetadataModal({
   if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:fixed tw:inset-0 tw:z-50 tw:flex tw:items-center tw:justify-center tw:bg-black/40">
+    <div className="tw:modal-overlay">
       <dialog
         aria-labelledby="project-metadata-modal-title"
         aria-modal="true"
-        className="tw:bg-background tw:text-foreground tw:rounded-lg tw:border tw:border-border tw:p-6 tw:w-lg tw:shadow-lg"
+        className="tw:modal-dialog tw:rounded-lg tw:w-lg"
         open
       >
         <h2

src/components/SelectInterlinearProjectModal.tsx

@@ -128,10 +128,10 @@ export function SelectInterlinearProjectModal({
   if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:fixed tw:inset-0 tw:z-50 tw:flex tw:items-center tw:justify-center tw:bg-black/40">
+    <div className="tw:modal-overlay">
       <dialog
         aria-labelledby="select-project-modal-title"
-        className="tw:bg-background tw:text-foreground tw:rounded-lg tw:border tw:border-border tw:p-6 tw:w-lg tw:shadow-lg"
+        className="tw:modal-dialog tw:rounded-lg tw:w-lg"
         open
       >
         <h2

src/tailwind.css

@@ -31,6 +31,14 @@
   }
 }
 
+@utility modal-overlay {
+  @apply tw:fixed tw:inset-0 tw:z-50 tw:flex tw:items-center tw:justify-center tw:bg-black/40;
+}
+
+@utility modal-dialog {
+  @apply tw:static tw:bg-background tw:text-foreground tw:border tw:border-border tw:p-6 tw:shadow-lg;
+}
+
 /*
  * CUSTOM: Theme variable policy.
  *