style: new buttons added (#470)

apps/app/components/views/delete-view-modal.tsx

@@ -11,7 +11,7 @@ import viewsService from "services/views.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button } from "components/ui";
+import { DangerButton, SecondaryButton } from "components/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
@@ -34,8 +34,6 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, onClose, onSucc
 
   const { setToastAlert } = useToast();
 
-  const cancelButtonRef = useRef(null);
-
   const handleClose = () => {
     setIsDeleteLoading(false);
     onClose();
@@ -74,12 +72,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, onClose, onSucc
 
   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"
@@ -127,25 +120,11 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, onClose, onSucc
                     </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 ? "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/views/form.tsx

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 // react-hook-form
 import { useForm } from "react-hook-form";
 // ui
-import { Button, Input, TextArea } from "components/ui";
+import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
 import { IView } from "types";
 
@@ -97,10 +97,8 @@ export const ViewForm: 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}>
           {status
             ? isSubmitting
               ? "Updating View..."
@@ -108,7 +106,7 @@ export const ViewForm: React.FC<Props> = ({
             : isSubmitting
             ? "Creating View..."
             : "Create View"}
-        </Button>
+        </PrimaryButton>
       </div>
     </form>
   );