refactor: centre permissions modal

apps/web/src/components/modal.tsx

@@ -9,6 +9,7 @@ interface Props {
   positionFromTop?: "sm" | "md" | "lg";
   isVisible?: boolean;
   closeOnClickOutside?: boolean;
+  centered?: boolean;
 }
 
 const Modal: React.FC<Props> = ({
@@ -17,6 +18,7 @@ const Modal: React.FC<Props> = ({
   positionFromTop = "md",
   isVisible,
   closeOnClickOutside,
+  centered = false,
 }) => {
   const {
     isOpen,
@@ -60,7 +62,7 @@ const Modal: React.FC<Props> = ({
         </Transition.Child>
 
         <div className="fixed inset-0 z-50 w-screen overflow-y-auto">
-          <div className="flex min-h-full items-start justify-center p-4 text-center sm:items-start sm:p-0">
+          <div className={`flex min-h-full justify-center p-4 text-center sm:p-0 ${centered ? "items-center" : "items-start sm:items-start"}`}>
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -71,7 +73,7 @@ const Modal: React.FC<Props> = ({
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel
-                className={`relative ${positionFromTopMap[positionFromTop]} w-full transform rounded-lg border border-light-600 bg-white/90 text-left shadow-3xl-light backdrop-blur-[6px] transition-all dark:border-dark-600 dark:bg-dark-100/90 dark:shadow-3xl-dark ${modalSizeMap[modalSize]}`}
+                className={`relative ${centered ? "" : positionFromTopMap[positionFromTop]} w-full transform rounded-lg border border-light-600 bg-white/90 text-left shadow-3xl-light backdrop-blur-[6px] transition-all dark:border-dark-600 dark:bg-dark-100/90 dark:shadow-3xl-dark ${modalSizeMap[modalSize]}`}
               >
                 {children}
               </Dialog.Panel>

apps/web/src/views/members/components/EditMemberPermissionsModal.tsx

@@ -4,6 +4,7 @@ import { HiXMark } from "react-icons/hi2";
 import type { Permission } from "@kan/shared";
 import { permissionCategories } from "@kan/shared";
 
+import Button from "~/components/Button";
 import Toggle from "~/components/Toggle";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -153,33 +154,33 @@ export function EditMemberPermissionsModal() {
   };
 
   return (
-    <div className="w-full rounded-md bg-light-50 p-6 text-light-1000 dark:bg-dark-100 dark:text-dark-1000">
+    <div className="w-full rounded-md bg-light-50 text-light-1000 dark:bg-dark-100 dark:text-dark-1000">
-      <div className="mb-3 flex items-start justify-between gap-3">
+      <div className="px-5 pt-5">
-        <div>
+        <div className="mb-3 flex items-start justify-between gap-3">
-          <h2 className="mb-1 text-sm font-semibold">
+          <div>
-            {t`Edit permissions`}
+            <h2 className="mb-1 text-sm font-semibold">
-          </h2>
+              {t`Edit permissions`}
-          <p className="min-h-[16px] text-xs text-light-900 dark:text-dark-900">
+            </h2>
-            {entityLabel || "\u00A0"}
+            <p className="min-h-[16px] text-xs text-light-900 dark:text-dark-900">
-          </p>
+              {entityLabel}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={closeModal}
+            className="ml-2 inline-flex h-6 w-6 items-center justify-center rounded-md text-light-900 hover:bg-light-200 focus:outline-none dark:text-dark-900 dark:hover:bg-dark-200"
+            aria-label={t`Close`}
+          >
+            <HiXMark className="h-3.5 w-3.5" />
+          </button>
         </div>
-        <button
-          type="button"
-          onClick={closeModal}
-          className="ml-2 inline-flex h-6 w-6 items-center justify-center rounded-md text-light-900 hover:bg-light-200 focus:outline-none dark:text-dark-900 dark:hover:bg-dark-200"
-          aria-label={t`Close`}
-        >
-          <HiXMark className="h-3.5 w-3.5" />
-        </button>
-      </div>
 
-      {isLoading ? (
+        {isLoading ? (
-        <p className="text-xs text-light-900 dark:text-dark-900">
+          <p className="text-xs text-light-900 dark:text-dark-900">
-          {t`Loading permissions...`}
+            {t`Loading permissions...`}
-        </p>
+          </p>
-      ) : (
+        ) : (
-        <>
+          <div className="max-h-80 pb-4 space-y-3 overflow-y-auto pr-1">
-          <div className="max-h-80 space-y-3 overflow-y-auto pr-1">
             {Object.values(permissionCategories).map((category, index) => (
               <div
                 key={category.label}
@@ -224,25 +225,27 @@ export function EditMemberPermissionsModal() {
               </div>
             ))}
           </div>
-          <div className="mt-4 flex justify-end">
+        )}
-            <button
+      </div>
-              type="button"
+      <div className="flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-              onClick={() => {
+        <div>
-                if (!workspace.publicId || !entityId || isBusy) return;
+          <Button
-                resetMutation.mutate({
+            variant="secondary"
-                  workspacePublicId: workspace.publicId,
+            size="sm"
-                  memberPublicId: entityId,
+            onClick={() => {
-                });
+              if (!workspace.publicId || !entityId || isBusy) return;
-              }}
+              resetMutation.mutate({
-              disabled={isBusy || !hasOverrides}
+                workspacePublicId: workspace.publicId,
-              className="rounded-md border border-light-400 px-3 py-1.5 text-xs text-light-900 hover:bg-light-200 disabled:opacity-60 dark:border-dark-400 dark:text-dark-900 dark:hover:bg-dark-200"
+                memberPublicId: entityId,
-            >
+              });
-              {t`Reset to role defaults`}
+            }}
-            </button>
+            disabled={isBusy || !hasOverrides}
-          </div>
+            isLoading={resetMutation.isPending}
-        </>
+          >
-      )}
+            {t`Reset to role defaults`}
-
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }

apps/web/src/views/members/index.tsx

@@ -400,6 +400,7 @@ export default function MembersPage() {
           <Modal
             modalSize="sm"
             isVisible={isOpen && modalContentType === "EDIT_MEMBER_PERMISSIONS"}
+            centered
           >
             <EditMemberPermissionsModal />
           </Modal>