style: new buttons added (#470)

apps/app/components/workspace/confirm-workspace-member-remove.tsx

@@ -1,10 +1,10 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { Button } from "components/ui";
+import { DangerButton, SecondaryButton } from "components/ui";
 
 type Props = {
   isOpen: boolean;
@@ -16,8 +16,6 @@ type Props = {
 const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, handleDelete }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const cancelButtonRef = useRef(null);
-
   const handleClose = () => {
     onClose();
     setIsDeleteLoading(false);
@@ -31,12 +29,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-20"
-        initialFocus={cancelButtonRef}
-        onClose={handleClose}
-      >
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -84,25 +77,11 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                     </div>
                   </div>
                 </div>
-                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
-                  <Button
-                    type="button"
-                    onClick={handleDeletion}
-                    theme="danger"
-                    disabled={isDeleteLoading}
-                    className="inline-flex sm:ml-3"
-                  >
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
-                  </Button>
-                  <Button
-                    type="button"
-                    theme="secondary"
-                    className="inline-flex sm:ml-3"
-                    onClick={handleClose}
-                    ref={cancelButtonRef}
-                  >
-                    Cancel
-                  </Button>
+                  </DangerButton>
                 </div>
               </Dialog.Panel>
             </Transition.Child>

apps/app/components/workspace/delete-workspace-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { Button, Input } from "components/ui";
+import { DangerButton, Input, SecondaryButton } from "components/ui";
 // types
 import type { IWorkspace } from "types";
 // fetch-keys
@@ -26,7 +26,6 @@ type Props = {
 };
 
 export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose }) => {
-  const cancelButtonRef = useRef(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [confirmProjectName, setConfirmProjectName] = useState("");
   const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false);
@@ -77,12 +76,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-20"
-        initialFocus={cancelButtonRef}
-        onClose={handleClose}
-      >
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -166,25 +160,11 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
                     </div>
                   </div>
                 </div>
-                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
-                  <Button
-                    type="button"
-                    onClick={handleDeletion}
-                    theme="danger"
-                    disabled={isDeleteLoading || !canDelete}
-                    className="inline-flex sm:ml-3"
-                  >
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading || !canDelete}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </Button>
-                  <Button
-                    type="button"
-                    theme="secondary"
-                    className="inline-flex sm:ml-3"
-                    onClick={handleClose}
-                    ref={cancelButtonRef}
-                  >
-                    Cancel
-                  </Button>
+                  </DangerButton>
                 </div>
               </Dialog.Panel>
             </Transition.Child>

apps/app/components/workspace/send-workspace-invitation-modal.tsx

@@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // services
 import workspaceService from "services/workspace.service";
 // ui
-import { Button, CustomSelect, Input } from "components/ui";
+import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // types
@@ -153,12 +153,10 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button theme="secondary" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button type="submit" disabled={isSubmitting}>
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <PrimaryButton type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
-                    </Button>
+                    </PrimaryButton>
                   </div>
                 </form>
               </Dialog.Panel>