style: new buttons added (#470)

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

@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { Button } from "components/ui";
+import { SecondaryButton, DangerButton } from "components/ui";
 
 type Props = {
   isOpen: boolean;
@@ -16,8 +16,6 @@ type Props = {
 const ConfirmProjectMemberRemove: 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 ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
 
   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 ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                     </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/project/create-project-modal.tsx

@@ -15,8 +15,7 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { PrimaryButton } from "components/ui/button/primary-button";
-import { Button, Input, TextArea, CustomSelect } from "components/ui";
+import { Input, TextArea, CustomSelect, PrimaryButton, SecondaryButton } from "components/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 // components
@@ -311,9 +310,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                   </div>
 
                   <div className="mt-5 flex justify-end gap-2 border-t-2 px-4 py-3">
-                    <Button theme="secondary" onClick={handleClose}>
-                      Cancel
-                    </Button>
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                     <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
                       {isSubmitting ? "Adding project..." : "Add Project"}
                     </PrimaryButton>

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

@@ -11,7 +11,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 { IProject, IWorkspace } from "types";
 // fetch-keys
@@ -24,10 +24,12 @@ type TConfirmProjectDeletionProps = {
   data: IProject | null;
 };
 
-export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props) => {
-  const { isOpen, data, onClose, onSuccess } = props;
-
-  const cancelButtonRef = useRef(null);
+export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
+  isOpen,
+  data,
+  onClose,
+  onSuccess,
+}) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [confirmProjectName, setConfirmProjectName] = useState("");
   const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false);
@@ -84,12 +86,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props
 
   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"
@@ -168,25 +165,11 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props
                       name="typeDelete"
                     />
                   </div>
-                  <div className="flex flex-row-reverse items-center gap-3">
-                    <Button
-                      type="button"
-                      onClick={handleDeletion}
-                      theme="danger"
-                      disabled={isDeleteLoading || !canDelete}
-                      className="rounded-lg border-none px-5 py-2"
-                    >
+                  <div className="flex justify-end gap-2">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <DangerButton onClick={handleDeletion} loading={isDeleteLoading || !canDelete}>
                       {isDeleteLoading ? "Deleting..." : "Delete Project"}
-                    </Button>
-                    <Button
-                      type="button"
-                      theme="secondary"
-                      className="rounded-lg border-none px-5 py-2"
-                      onClick={handleClose}
-                      ref={cancelButtonRef}
-                    >
-                      Cancel
-                    </Button>
+                    </DangerButton>
                   </div>
                 </div>
               </Dialog.Panel>

apps/app/components/project/join-project-modal.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 
+// headless ui
 import { Transition, Dialog } from "@headlessui/react";
-
 // ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// types
 import type { IProject } from "types";
-import { Button } from "components/ui";
 
 // type
 type TJoinProjectModalProps = {
@@ -70,12 +71,10 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
                   <div className="space-y-3" />
                 </div>
                 <div className="mt-5 flex justify-end gap-2">
-                  <Button type="button" theme="secondary" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button type="submit" onClick={handleJoin} disabled={isJoiningLoading}>
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <PrimaryButton type="submit" onClick={handleJoin} loading={isJoiningLoading}>
                     {isJoiningLoading ? "Joining..." : "Join Project"}
-                  </Button>
+                  </PrimaryButton>
                 </div>
               </Dialog.Panel>
             </Transition.Child>

apps/app/components/project/join-project.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
+
 // ui
-import { Button } from "components/ui";
+import { SecondaryButton } from "components/ui";
 
 export interface JoinProjectProps {
   isJoiningProject: boolean;
@@ -16,9 +17,9 @@ export const JoinProject: FC<JoinProjectProps> = ({ isJoiningProject, handleJoin
         below.
       </p>
       <div>
-        <Button type="button" disabled={isJoiningProject} onClick={handleJoin}>
+        <SecondaryButton loading={isJoiningProject} onClick={handleJoin}>
           {isJoiningProject ? "Joining..." : "Click to join"}
-        </Button>
+        </SecondaryButton>
       </div>
     </div>
   </div>

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

@@ -8,7 +8,7 @@ import { useForm, Controller } from "react-hook-form";
 
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button, CustomSelect, TextArea } from "components/ui";
+import { CustomSelect, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -218,12 +218,10 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                     </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>

apps/app/components/project/settings/single-label.tsx

@@ -1,14 +1,15 @@
-// react
 import React, { useState } from "react";
+
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
-import { TwitterPicker } from "react-color";
-import { Button, CustomMenu, Input } from "components/ui";
+import { CustomMenu, Input, PrimaryButton, SecondaryButton } from "components/ui";
 // icons
+import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssueLabels } from "types";
 
@@ -110,19 +111,15 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
                 id="labelName"
                 name="name"
                 register={register}
-                placeholder="Lable title"
+                placeholder="Label title"
                 validations={{
                   required: "Label title is required",
                 }}
                 error={errors.name}
               />
             </div>
-            <Button type="button" theme="secondary" onClick={() => setNewLabelForm(false)}>
-              Cancel
-            </Button>
-            <Button type="button" disabled={isSubmitting}>
-              {isSubmitting ? "Adding" : "Add"}
-            </Button>
+            <SecondaryButton onClick={() => setNewLabelForm(false)}>Cancel</SecondaryButton>
+            <PrimaryButton loading={isSubmitting}>{isSubmitting ? "Adding" : "Add"}</PrimaryButton>
           </div>
         </div>
       ) : (