Replace Modal components implementation with Radix modal

apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css

@@ -119,16 +119,10 @@
     margin-right: 3.5rem;
     padding: 5rem 0 0 5rem;
 
-    > h2 {
-      z-index: 1;
-    }
-
     &::before {
       position: absolute;
       right: 0;
       bottom: 0;
-
-      /* z-index: -1; */
       height: 100%;
       background-image: linear-gradient(
         165deg,
@@ -143,7 +137,6 @@
   }
 
   .manager-ad__description {
-    z-index: 1;
     flex-shrink: 0;
     max-width: 475px;
     padding-bottom: var(--space-16);
@@ -171,10 +164,6 @@
     min-height: 0;
   }
 
-  .manager-ad__get-manager-button {
-    z-index: 1;
-  }
-
   .footnote {
     display: flex;
     align-items: center;

apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.tsx

@@ -231,7 +231,7 @@ export function DesktopLoginPopover() {
 
   return (
     <Modal
-      popoverId={"navAccount"}
+      disableBody
       trigger={
         <NewButton
           csVariant="accent"

apps/cyberstorm-remix/app/p/packageListing.tsx

@@ -695,9 +695,23 @@ function ReviewPackageForm(props: {
   });
 
   return (
-    <div className="modal-content">
-      <div className="modal-content__header">Review Package</div>
-      <div className="modal-content__body review-package__body">
+    <Modal
+      csSize="small"
+      trigger={
+        <NewButton
+          csSize="small"
+          popoverTarget="reviewPackage"
+          popoverTargetAction="show"
+        >
+          <NewIcon csMode="inline" noWrapper>
+            <FontAwesomeIcon icon={faScaleBalanced} />
+          </NewIcon>
+          Review Package
+        </NewButton>
+      }
+      titleContent="Review Package"
+    >
+      <Modal.Body className="review-package__body">
         <NewAlert csVariant="info">
           Changes might take several minutes to show publicly! Info shown below
           is always up to date.
@@ -730,8 +744,8 @@ function ReviewPackageForm(props: {
             rootClasses="review-package__textarea"
           />
         </div>
-      </div>
-      <div className="modal-content__footer review-package__footer">
+      </Modal.Body>
+      <Modal.Footer className="modal-content__footer review-package__footer">
         <NewButton
           csVariant="danger"
           onClick={() =>
@@ -771,8 +785,8 @@ function ReviewPackageForm(props: {
         >
           Approve
         </NewButton>
-      </div>
-    </div>
+      </Modal.Footer>
+    </Modal>
   );
 }
 
@@ -1003,32 +1017,15 @@ function managementTools(
       {packagePermissions.permissions.can_moderate ? (
         <div className="package-listing-management-tools__island">
           {packagePermissions.permissions.can_moderate ? (
-            <Modal
-              popoverId={"reviewPackage"}
-              csSize="small"
-              trigger={
-                <NewButton
-                  csSize="small"
-                  popoverTarget="reviewPackage"
-                  popoverTargetAction="show"
-                >
-                  <NewIcon csMode="inline" noWrapper>
-                    <FontAwesomeIcon icon={faScaleBalanced} />
-                  </NewIcon>
-                  Review Package
-                </NewButton>
-              }
-            >
-              <ReviewPackageForm
-                communityId={listing.community_identifier}
-                namespaceId={listing.namespace}
-                packageId={listing.name}
-                toast={toast}
-                reviewStatusColor={"orange"}
-                reviewStatus={"Skibidied"}
-                config={requestConfig}
-              />
-            </Modal>
+            <ReviewPackageForm
+              communityId={listing.community_identifier}
+              namespaceId={listing.namespace}
+              packageId={listing.name}
+              toast={toast}
+              reviewStatusColor={"orange"}
+              reviewStatus={"Skibidied"}
+              config={requestConfig}
+            />
           ) : null}
           {/* {packagePermissions.permissions.can_view_listing_admin_page ? (
               <NewButton

apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPageEdit.tsx

@@ -209,29 +209,15 @@ export default function WikiEdit() {
           <Heading csLevel="3">Editing page</Heading>
         </div>
         <div className="package-wiki-content__actions">
-          <Modal
-            popoverId={"deletePackageWikiPage"}
-            csSize="small"
-            trigger={
-              <NewButton
-                popoverTarget="deletePackageWikiPage"
-                popoverTargetAction="show"
-                csVariant="danger"
-              >
-                Delete page
-              </NewButton>
-            }
-          >
-            <DeletePackageWikiPageForm
-              page={page}
-              communityId={communityId}
-              namespaceId={namespaceId}
-              packageId={packageId}
-              toast={toast}
-              updateTrigger={moveToWiki}
-              config={outletContext.requestConfig}
-            />
-          </Modal>
+          <DeletePackageWikiPageForm
+            page={page}
+            communityId={communityId}
+            namespaceId={namespaceId}
+            packageId={packageId}
+            toast={toast}
+            updateTrigger={moveToWiki}
+            config={outletContext.requestConfig}
+          />
         </div>
       </div>
       <div className="package-wiki-content__body">
@@ -359,9 +345,12 @@ function DeletePackageWikiPageForm(props: {
   });
 
   return (
-    <div className="modal-content">
-      <div className="modal-content__header">Delete wiki page</div>
-      <div className="modal-content__body">
+    <Modal
+      csSize="small"
+      trigger={<NewButton csVariant="danger">Delete page</NewButton>}
+      titleContent="Delete wiki page"
+    >
+      <Modal.Body>
         <div>
           You are about to delete wiki page{" "}
           <NewLink
@@ -376,8 +365,8 @@ function DeletePackageWikiPageForm(props: {
             {page.title}
           </NewLink>
         </div>
-      </div>
-      <div className="modal-content__footer">
+      </Modal.Body>
+      <Modal.Footer>
         <NewButton
           csVariant="danger"
           onClick={() =>
@@ -391,8 +380,8 @@ function DeletePackageWikiPageForm(props: {
         >
           Delete
         </NewButton>
-      </div>
-    </div>
+      </Modal.Footer>
+    </Modal>
   );
 }
 

apps/cyberstorm-remix/app/settings/teams/Teams.css

@@ -21,7 +21,6 @@
   .create-team-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }

apps/cyberstorm-remix/app/settings/teams/Teams.tsx

@@ -12,7 +12,7 @@ import {
 } from "@thunderstore/cyberstorm";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useReducer } from "react";
+import { useReducer, useState } from "react";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
 import { useToast } from "@thunderstore/cyberstorm/src/newComponents/Toast/Provider";
 import {
@@ -72,23 +72,7 @@ export default function Teams() {
           <div className="settings-items__meta">
             <p className="settings-items__title">Teams</p>
             <p className="settings-items__description">Manage your teams</p>
-            <Modal
-              popoverId={"teamsCreateTeam"}
-              csSize="small"
-              trigger={
-                <NewButton
-                  popoverTarget="teamsCreateTeam"
-                  popoverTargetAction="show"
-                >
-                  Create Team
-                  <NewIcon csMode="inline" noWrapper>
-                    <FontAwesomeIcon icon={faPlus} />
-                  </NewIcon>
-                </NewButton>
-              }
-            >
-              <CreateTeamForm config={outletContext.dapper.config} />
-            </Modal>
+            <CreateTeamForm config={outletContext.dapper.config} />
           </div>
           <div className="settings-items__content">
             {currentUser?.teams_full && currentUser.teams_full.length !== 0 ? (
@@ -198,11 +182,26 @@ function CreateTeamForm(props: { config: () => RequestConfig }) {
     },
   });
 
+  const [open, setOpen] = useState(false);
+
   return (
-    <div className="modal-content">
-      <div className="modal-content__header">Create team</div>
-      <div className="modal-content__body create-team-form__body">
-        <div>
+    <Modal
+      open={open}
+      onOpenChange={setOpen}
+      csSize="small"
+      contentClasses="create-team-form__body"
+      trigger={
+        <NewButton popoverTarget="teamsCreateTeam" popoverTargetAction="show">
+          Create Team
+          <NewIcon csMode="inline" noWrapper>
+            <FontAwesomeIcon icon={faPlus} />
+          </NewIcon>
+        </NewButton>
+      }
+    >
+      <Modal.Title>Create Team</Modal.Title>
+      <Modal.Body>
+        <div className="create-team-form__description">
           Enter the name of the team you wish to create. Team names can contain
           the characters a-z A-Z 0-9 _ and must not start or end with an _.
         </div>
@@ -221,12 +220,17 @@ function CreateTeamForm(props: { config: () => RequestConfig }) {
             id="teamName"
           />
         </div>
-      </div>
-      <div className="modal-content__footer">
-        <NewButton onClick={strongForm.submit} csVariant="accent">
+      </Modal.Body>
+      <Modal.Footer>
+        <NewButton
+          onClick={() => {
+            strongForm.submit().then(() => setOpen(false));
+          }}
+          csVariant="accent"
+        >
           Create
         </NewButton>
-      </div>
-    </div>
+      </Modal.Footer>
+    </Modal>
   );
 }