fix: changed buttons to primary (#602)

apps/app/components/icons/plus-icon.tsx

@@ -13,7 +13,7 @@ export const PlusIcon: React.FC<Props> = ({ width = "24", height = "24", classNa
     >
       <path
         d="M12 19C11.7833 19 11.6042 18.9292 11.4625 18.7875C11.3208 18.6458 11.25 18.4667 11.25 18.25V12.75H5.75C5.53333 12.75 5.35417 12.6792 5.2125 12.5375C5.07083 12.3958 5 12.2167 5 12C5 11.7833 5.07083 11.6042 5.2125 11.4625C5.35417 11.3208 5.53333 11.25 5.75 11.25H11.25V5.75C11.25 5.53333 11.3208 5.35417 11.4625 5.2125C11.6042 5.07083 11.7833 5 12 5C12.2167 5 12.3958 5.07083 12.5375 5.2125C12.6792 5.35417 12.75 5.53333 12.75 5.75V11.25H18.25C18.4667 11.25 18.6458 11.3208 18.7875 11.4625C18.9292 11.6042 19 11.7833 19 12C19 12.2167 18.9292 12.3958 18.7875 12.5375C18.6458 12.6792 18.4667 12.75 18.25 12.75H12.75V18.25C12.75 18.4667 12.6792 18.6458 12.5375 18.7875C12.3958 18.9292 12.2167 19 12 19Z"
-        fill="#212529"
+        fill="#FFFFFF"
       />
     </svg>
   );

apps/app/components/ui/header-button.tsx

@@ -1,33 +0,0 @@
-import * as React from "react";
-
-type HeaderButtonProps = {
-  Icon: any;
-  label: string;
-  disabled?: boolean;
-  onClick: () => void;
-  className?: string;
-  position?: "normal" | "reverse";
-};
-
-export const HeaderButton = ({
-  Icon,
-  label,
-  disabled = false,
-  onClick,
-  className = "",
-  position = "normal",
-}: HeaderButtonProps) => (
-  <>
-    <button
-      type="button"
-      className={`whitespace-nowraps flex w-min items-center gap-x-1 whitespace-nowrap rounded-md border p-2 text-xs font-medium text-gray-600 outline-none hover:bg-gray-100 hover:text-gray-900 ${
-        position === "reverse" && "flex-row-reverse"
-      } ${className}`}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      <Icon className="h-4 w-4" />
-      {label}
-    </button>
-  </>
-);

apps/app/components/ui/index.ts

@@ -8,7 +8,6 @@ export * from "./custom-search-select";
 export * from "./custom-select";
 export * from "./datepicker";
 export * from "./empty-space";
-export * from "./header-button";
 export * from "./loader";
 export * from "./multi-input";
 export * from "./multi-level-select";

apps/app/pages/[workspaceSlug]/me/my-issues.tsx

@@ -10,7 +10,7 @@ import AppLayout from "layouts/app-layout";
 // hooks
 import useIssues from "hooks/use-issues";
 // ui
-import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
+import { Spinner, EmptySpace, EmptySpaceItem, PrimaryButton } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
@@ -95,17 +95,16 @@ const MyIssuesPage: NextPage = () => {
                 )}
               </Popover>
             )}
-            <HeaderButton
+            <PrimaryButton
-              Icon={PlusIcon}
+              className="flex items-center gap-2"
-              label="Add Issue"
               onClick={() => {
-                const e = new KeyboardEvent("keydown", {
+                const e = new KeyboardEvent("keydown", { key: "c" });
-                  key: "c",
-                });
-
                 document.dispatchEvent(e);
               }}
-            />
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add Issue
+            </PrimaryButton>
           </div>
         }
       >

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -19,7 +19,7 @@ import AppLayout from "layouts/app-layout";
 // components
 import { CompletedCyclesListProps, CreateUpdateCycleModal, CyclesList } from "components/cycles";
 // ui
-import { HeaderButton, Loader } from "components/ui";
+import { Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 // types
@@ -94,16 +94,16 @@ const ProjectCycles: NextPage<UserAuth> = (props) => {
         </Breadcrumbs>
       }
       right={
-        <HeaderButton
+        <PrimaryButton
-          Icon={PlusIcon}
+          className="flex items-center gap-2"
-          label="Add Cycle"
           onClick={() => {
-            const e = new KeyboardEvent("keydown", {
+            const e = new KeyboardEvent("keydown", { key: "q" });
-              key: "q",
-            });
             document.dispatchEvent(e);
           }}
-        />
+        >
+          <PlusIcon className="w-4 h-4" />
+          Add Cycle
+        </PrimaryButton>
       }
     >
       <CreateUpdateCycleModal

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx

@@ -13,7 +13,7 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { HeaderButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -47,16 +47,16 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
         right={
           <div className="flex items-center gap-2">
             <IssuesFilterView />
-            <HeaderButton
+            <PrimaryButton
-              Icon={PlusIcon}
+              className="flex items-center gap-2"
-              label="Add Issue"
               onClick={() => {
-                const e = new KeyboardEvent("keydown", {
+                const e = new KeyboardEvent("keydown", { key: "c" });
-                  key: "c",
-                });
                 document.dispatchEvent(e);
               }}
-            />
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add Issue
+            </PrimaryButton>
           </div>
         }
       >

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx

@@ -16,7 +16,7 @@ import modulesService from "services/modules.service";
 // components
 import { CreateUpdateModuleModal, SingleModuleCard } from "components/modules";
 // ui
-import { EmptyState, HeaderButton, Loader } from "components/ui";
+import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 // types
@@ -72,16 +72,16 @@ const ProjectModules: NextPage<UserAuth> = (props) => {
         </Breadcrumbs>
       }
       right={
-        <HeaderButton
+        <PrimaryButton
-          Icon={PlusIcon}
+          className="flex items-center gap-2"
-          label="Add Module"
           onClick={() => {
-            const e = new KeyboardEvent("keydown", {
+            const e = new KeyboardEvent("keydown", { key: "m" });
-              key: "m",
-            });
             document.dispatchEvent(e);
           }}
-        />
+        >
+          <PlusIcon className="w-4 h-4" />
+          Add Module
+        </PrimaryButton>
       }
     >
       <CreateUpdateModuleModal

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -24,7 +24,7 @@ import AppLayout from "layouts/app-layout";
 // components
 import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
 // ui
-import { HeaderButton, Input, PrimaryButton } from "components/ui";
+import { Input, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ListBulletIcon, RectangleGroupIcon } from "@heroicons/react/20/solid";
@@ -164,11 +164,13 @@ const ProjectPages: NextPage<UserAuth> = (props) => {
           </Breadcrumbs>
         }
         right={
-          <HeaderButton
+          <PrimaryButton
-            Icon={PlusIcon}
+            className="flex items-center gap-2"
-            label="Create Page"
             onClick={() => setCreateUpdatePageModal(true)}
-          />
+          >
+            <PlusIcon className="w-4 h-4" />
+            Create Page
+          </PrimaryButton>
         }
       >
         <div className="space-y-4">

apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx

@@ -13,13 +13,13 @@ import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // ui
+import { CustomMenu, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import { UserAuth } from "types";
 // fetch-keys
 import { PROJECT_DETAILS, VIEWS_LIST, VIEW_DETAILS } from "constants/fetch-keys";
 import { IssuesFilterView, IssuesView } from "components/core";
-import { CustomMenu, HeaderButton } from "components/ui";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { truncateText } from "helpers/string.helper";
 import { StackedLayersIcon } from "components/icons";
@@ -91,16 +91,16 @@ const SingleView: React.FC<UserAuth> = (props) => {
         right={
           <div className="flex items-center gap-2">
             <IssuesFilterView />
-            <HeaderButton
+            <PrimaryButton
-              Icon={PlusIcon}
+              className="flex items-center gap-2"
-              label="Add Issue"
               onClick={() => {
-                const e = new KeyboardEvent("keydown", {
+                const e = new KeyboardEvent("keydown", { key: "c" });
-                  key: "c",
-                });
                 document.dispatchEvent(e);
               }}
-            />
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add Issue
+            </PrimaryButton>
           </div>
         }
       >

apps/app/pages/[workspaceSlug]/projects/index.tsx

@@ -14,7 +14,7 @@ import AppLayout from "layouts/app-layout";
 import { JoinProjectModal } from "components/project/join-project-modal";
 import { DeleteProjectModal, SingleProjectCard } from "components/project";
 // ui
-import { HeaderButton, Loader, EmptyState } from "components/ui";
+import { Loader, EmptyState, PrimaryButton } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -44,14 +44,16 @@ const ProjectsPage: NextPage = () => {
         </Breadcrumbs>
       }
       right={
-        <HeaderButton
+        <PrimaryButton
-          Icon={PlusIcon}
+          className="flex items-center gap-2"
-          label="Add Project"
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "p" });
             document.dispatchEvent(e);
           }}
-        />
+        >
+          <PlusIcon className="w-4 h-4" />
+          Add Project
+        </PrimaryButton>
       }
     >
       <JoinProjectModal