chore: remove outline button component (#937)

apps/app/components/ui/index.ts

@@ -9,15 +9,14 @@ export * from "./custom-select";
 export * from "./date";
 export * from "./datepicker";
 export * from "./empty-space";
+export * from "./empty-state";
+export * from "./labels-list";
+export * from "./linear-progress-indicator";
 export * from "./loader";
 export * from "./multi-input";
+export * from "./multi-level-dropdown";
 export * from "./multi-level-select";
-export * from "./outline-button";
 export * from "./progress-bar";
 export * from "./spinner";
 export * from "./tooltip";
-export * from "./labels-list";
-export * from "./linear-progress-indicator";
-export * from "./empty-state";
-export * from "./multi-level-dropdown";
 export * from "./toggle-switch";

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

@@ -1,60 +0,0 @@
-import React from "react";
-
-type Props = {
-  onClick?: () => void;
-  children: React.ReactNode;
-  type?: "button" | "submit" | "reset";
-  className?: string;
-  theme?: "primary" | "secondary" | "success" | "danger";
-  size?: "sm" | "rg" | "md" | "lg";
-  disabled?: boolean;
-};
-
-export const OutlineButton = React.forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      children,
-      onClick,
-      type = "button",
-      size = "sm",
-      className = "",
-      theme = "primary",
-      disabled = false,
-    },
-    ref
-  ) => (
-    <button
-      type={type}
-      ref={ref}
-      onClick={onClick}
-      disabled={disabled}
-      className={`inline-flex items-center justify-center rounded font-medium duration-300 ${
-        theme === "primary"
-          ? `${
-              disabled ? "opacity-70" : ""
-            } border border-brand-accent text-white shadow-sm hover:bg-brand-accent focus:outline-none`
-          : theme === "secondary"
-          ? "border bg-transparent hover:bg-brand-surface-1"
-          : theme === "success"
-          ? `${
-              disabled ? "opacity-70" : ""
-            } border border-transparent bg-green-500 text-white shadow-sm hover:bg-green-600 focus:outline-none  focus:ring-2 focus:ring-green-500`
-          : `${
-              disabled ? "opacity-70" : ""
-            } border border-red-500 text-red-500 shadow-sm hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-500`
-      } ${
-        size === "sm"
-          ? "p-2 text-xs"
-          : size === "md"
-          ? "text-md px-3 py-2"
-          : size === "lg"
-          ? "text-md px-4 py-2"
-          : "px-2.5 py-2 text-sm"
-      } ${className}`}
-    >
-      {children}
-    </button>
-  )
-);
-
-OutlineButton.displayName = "Button";

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

@@ -23,8 +23,8 @@ import {
   TextArea,
   Loader,
   CustomSelect,
-  OutlineButton,
   SecondaryButton,
+  DangerButton,
 } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
@@ -346,12 +346,12 @@ const GeneralSettings: NextPage = () => {
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
                 <div>
-                  <OutlineButton
+                  <DangerButton
-                    theme="danger"
                     onClick={() => setSelectedProject(projectDetails.id ?? null)}
+                    outline
                   >
                     Delete Project
-                  </OutlineButton>
+                  </DangerButton>
                 </div>
               ) : (
                 <Loader className="mt-2 w-full">

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

@@ -18,14 +18,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { ImageUploadModal } from "components/core";
 import { DeleteWorkspaceModal } from "components/workspace";
 // ui
-import {
+import { Spinner, Input, CustomSelect, SecondaryButton, DangerButton } from "components/ui";
-  Spinner,
-  Input,
-  CustomSelect,
-  OutlineButton,
-  SecondaryButton,
-  DangerButton,
-} from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { LinkIcon } from "@heroicons/react/24/outline";
@@ -325,9 +318,9 @@ const WorkspaceSettings: NextPage = () => {
               </p>
             </div>
             <div className="col-span-12 sm:col-span-6">
-              <OutlineButton theme="danger" onClick={() => setIsOpen(true)}>
+              <DangerButton onClick={() => setIsOpen(true)} outline>
                 Delete the workspace
-              </OutlineButton>
+              </DangerButton>
             </div>
           </div>
         </div>