style: new buttons added (#470)

apps/app/components/core/bulk-delete-issues-modal.tsx

@@ -13,7 +13,7 @@ import issuesServices from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button } from "components/ui";
+import { DangerButton, SecondaryButton } from "components/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
@@ -211,17 +211,10 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
 
                 {filteredIssues.length > 0 && (
                   <div className="flex items-center justify-end gap-2 p-3">
-                    <Button type="button" theme="secondary" size="sm" onClick={handleClose}>
-                      Close
-                    </Button>
-                    <Button
-                      onClick={handleSubmit(handleDelete)}
-                      theme="danger"
-                      size="sm"
-                      disabled={isSubmitting}
-                    >
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <DangerButton onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
                       {isSubmitting ? "Deleting..." : "Delete selected issues"}
-                    </Button>
+                    </DangerButton>
                   </div>
                 )}
               </form>

apps/app/components/core/existing-issues-list-modal.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from "react";
 
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
 // react-hook-form
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // hooks
-import { Combobox, Dialog, Transition } from "@headlessui/react";
-import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 import useToast from "hooks/use-toast";
-// headless ui
 // ui
-import { Button } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue } from "types";
@@ -180,17 +181,10 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                   />
                   {filteredIssues.length > 0 && (
                     <div className="flex items-center justify-end gap-2 p-3">
-                      <Button type="button" theme="secondary" size="sm" onClick={handleClose}>
-                        Cancel
-                      </Button>
-                      <Button
-                        type="button"
-                        size="sm"
-                        onClick={handleSubmit(onSubmit)}
-                        disabled={isSubmitting}
-                      >
+                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                      <PrimaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
                         {isSubmitting ? "Adding..." : "Add selected issues"}
-                      </Button>
+                      </PrimaryButton>
                     </div>
                   )}
                 </form>

apps/app/components/core/image-picker-popover.tsx

@@ -13,8 +13,7 @@ import { Tab, Transition, Popover } from "@headlessui/react";
 import fileService from "services/file.service";
 
 // components
-import { Input, Spinner } from "components/ui";
-import { PrimaryButton } from "components/ui/button/primary-button";
+import { Input, Spinner, PrimaryButton } from "components/ui";
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 

apps/app/components/core/image-upload-modal.tsx

@@ -3,16 +3,16 @@ import React, { useCallback, useState } from "react";
 import NextImage from "next/image";
 import { useRouter } from "next/router";
 
+// react-dropzone
 import { useDropzone } from "react-dropzone";
-
+// headless ui
 import { Transition, Dialog } from "@headlessui/react";
-
 // services
 import fileServices from "services/file.service";
-// icon
-import { UserCircleIcon } from "components/icons";
 // ui
-import { Button } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { UserCircleIcon } from "components/icons";
 
 type TImageUploadModalProps = {
   value?: string | null;
@@ -39,12 +39,7 @@ export const ImageUploadModal: React.FC<TImageUploadModalProps> = ({
     setImage(acceptedFiles[0]);
   }, []);
 
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    open: openFileDialog,
-  } = useDropzone({
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
   });
 
@@ -158,16 +153,10 @@ export const ImageUploadModal: React.FC<TImageUploadModalProps> = ({
                   </div>
                 </div>
                 <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                  <Button theme="secondary" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button
-                    type="submit"
-                    onClick={handleSubmit}
-                    disabled={isImageUploading || image === null}
-                  >
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <PrimaryButton onClick={handleSubmit} loading={isImageUploading || !image}>
                     {isImageUploading ? "Uploading..." : "Upload & Save"}
-                  </Button>
+                  </PrimaryButton>
                 </div>
               </Dialog.Panel>
             </Transition.Child>

apps/app/components/core/issues-view.tsx

@@ -18,6 +18,8 @@ import { AllLists, AllBoards } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { CreateUpdateViewModal } from "components/views";
+// ui
+import { EmptySpace, EmptySpaceItem, PrimaryButton } from "components/ui";
 // icons
 import { PlusIcon, RectangleStackIcon, TrashIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -27,7 +29,6 @@ import {
   CycleIssueResponse,
   IIssue,
   IIssueFilterOptions,
-  IView,
   ModuleIssueResponse,
   UserAuth,
 } from "types";
@@ -41,8 +42,6 @@ import {
   PROJECT_MEMBERS,
   STATE_LIST,
 } from "constants/fetch-keys";
-import { EmptySpace, EmptySpaceItem } from "components/ui";
-import { PrimaryButton } from "components/ui/button/primary-button";
 
 type Props = {
   type?: "issue" | "cycle" | "module";
@@ -501,14 +500,12 @@ export const IssuesView: React.FC<Props> = ({ type = "issue", openIssuesListModa
 
         {Object.keys(filters).length > 0 && (
           <PrimaryButton
-            type="button"
             onClick={() =>
               setCreateViewModal({
                 query: filters,
               })
             }
-            className="flex items-center gap-4 text-sm"
-            size="sm"
+            className="flex items-center gap-2 text-sm"
           >
             <PlusIcon className="h-4 w-4" />
             Save view

apps/app/components/core/link-modal.tsx

@@ -1,15 +1,11 @@
 import React from "react";
 
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
 // react-hook-form
 import { useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button, Input } from "components/ui";
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
 // types
 import type { IIssueLink, ModuleLink } from "types";
 
@@ -116,12 +112,10 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button theme="secondary" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button type="submit" disabled={isSubmitting}>
+                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                    <PrimaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
                       {isSubmitting ? "Adding Link..." : "Add Link"}
-                    </Button>
+                    </PrimaryButton>
                   </div>
                 </form>
               </Dialog.Panel>