fix: consistent dropdowns, refactor: ui components (#286)

2024-06-14 14:31:34 +00:00 · 2023-02-16 12:03:52 +05:30 · 2023-02-16 12:03:52 +05:30 · 667dafbda4
commit 667dafbda4
parent ec37bb9d23
25 changed files with 154 additions and 335 deletions
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@ -1,18 +1,17 @@
 import { useState, FC, Fragment } from "react";

-import Image from "next/image";
 import { useRouter } from "next/router";

 import useSWR from "swr";

 // headless ui
 import { Transition, Combobox } from "@headlessui/react";
+// services
+import projectServices from "services/project.service";
+// ui
+import { Avatar } from "components/ui";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
-// service
-import projectServices from "services/project.service";
-// types
-import type { IProjectMember } from "types";
 // fetch keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";

@ -22,35 +21,6 @@ export type IssueAssigneeSelectProps = {
  onChange: (value: string[]) => void;
 };

-type AssigneeAvatarProps = {
-  user: IProjectMember | undefined;
-};
-
-export const AssigneeAvatar: FC<AssigneeAvatarProps> = ({ user }) => {
-  if (!user) return <></>;
-
-  if (user.member.avatar && user.member.avatar !== "") {
-    return (
-      <div className="relative h-4 w-4">
-        <Image
-          src={user.member.avatar}
-          alt="avatar"
-          className="rounded-full"
-          layout="fill"
-          objectFit="cover"
-        />
-      </div>
-    );
-  } else
-    return (
-      <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-        {user.member.first_name && user.member.first_name !== ""
-          ? user.member.first_name.charAt(0)
-          : user.member.email.charAt(0)}
-      </div>
-    );
-};
-
 export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
  projectId,
  value = [],
@ -136,14 +106,14 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
                        className={({ active, selected }) =>
                          `${active ? "bg-indigo-50" : ""} ${
                            selected ? "bg-indigo-50 font-medium" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                          } flex cursor-pointer select-none items-center gap-2 truncate px-2 py-1 text-gray-900`
                        }
                        value={option.value}
                      >
                        {people && (
                          <>
-                            <AssigneeAvatar
-                              user={people?.find((p) => p.member.id === option.value)}
+                            <Avatar
+                              user={people?.find((p) => p.member.id === option.value)?.member}
                            />
                            {option.display}
                          </>
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@ -97,8 +97,8 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges,
                              <Listbox.Option
                                key={option.member.id}
                                className={({ active, selected }) =>
-                                  `${
-                                    active || selected ? "bg-indigo-50" : ""
+                                  `${active || selected ? "bg-indigo-50" : ""} ${
+                                    selected ? "font-medium" : ""
                                  } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
                                }
                                value={option.member.id}
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/apps/app/components/issues/view-select/priority.tsx
@ -1,7 +1,7 @@
 import React from "react";

 // ui
-import { Listbox, Transition } from "@headlessui/react";
+import { CustomSelect } from "components/ui";
 // icons
 import { getPriorityIcon } from "components/icons/priority-icon";
 // types
@ -22,67 +22,43 @@ export const ViewPrioritySelect: React.FC<Props> = ({
  position = "right",
  isNotAllowed,
 }) => (
-  <Listbox
-    as="div"
-    value={issue.priority}
+  <CustomSelect
+    label={
+      <span>
+        {getPriorityIcon(
+          issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
+          "text-sm"
+        )}
+      </span>
+    }
+    value={issue.state}
    onChange={(data: string) => {
      partialUpdateIssue({ priority: data });
    }}
-    className="group relative flex-shrink-0"
+    maxHeight="md"
+    buttonClassName={`flex ${
+      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+    } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+      issue.priority === "urgent"
+        ? "bg-red-100 text-red-600 hover:bg-red-100"
+        : issue.priority === "high"
+        ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
+        : issue.priority === "medium"
+        ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
+        : issue.priority === "low"
+        ? "bg-green-100 text-green-500 hover:bg-green-100"
+        : "bg-gray-100"
+    } border-none`}
+    noChevron
    disabled={isNotAllowed}
  >
-    {({ open }) => (
-      <div>
-        <Listbox.Button
-          className={`flex ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-          } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-            issue.priority === "urgent"
-              ? "bg-red-100 text-red-600"
-              : issue.priority === "high"
-              ? "bg-orange-100 text-orange-500"
-              : issue.priority === "medium"
-              ? "bg-yellow-100 text-yellow-500"
-              : issue.priority === "low"
-              ? "bg-green-100 text-green-500"
-              : "bg-gray-100"
-          }`}
-        >
-          {getPriorityIcon(
-            issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-            "text-sm"
-          )}
-        </Listbox.Button>
-
-        <Transition
-          show={open}
-          as={React.Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <Listbox.Options
-            className={`absolute z-10 mt-1 max-h-48 w-36 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
-              position === "left" ? "left-0" : "right-0"
-            }`}
-          >
-            {PRIORITIES?.map((priority) => (
-              <Listbox.Option
-                key={priority}
-                className={({ active, selected }) =>
-                  `${active || selected ? "bg-indigo-50" : ""} ${
-                    selected ? "font-medium" : ""
-                  } flex cursor-pointer select-none items-center gap-x-2 px-3 py-2 capitalize`
-                }
-                value={priority}
-              >
-                {getPriorityIcon(priority, "text-sm")}
-                {priority ?? "None"}
-              </Listbox.Option>
-            ))}
-          </Listbox.Options>
-        </Transition>
-      </div>
-    )}
-  </Listbox>
+    {PRIORITIES?.map((priority) => (
+      <CustomSelect.Option key={priority} value={priority} className="capitalize">
+        <>
+          {getPriorityIcon(priority, "text-sm")}
+          {priority ?? "None"}
+        </>
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
 );
--- a/apps/app/components/issues/view-select/state.tsx
+++ b/apps/app/components/issues/view-select/state.tsx
@ -24,7 +24,7 @@ type Props = {
 export const ViewStateSelect: React.FC<Props> = ({
  issue,
  partialUpdateIssue,
-  position,
+  position = "right",
  isNotAllowed,
 }) => {
  const router = useRouter();
--- a/apps/app/components/onboarding/invite-members.tsx
+++ b/apps/app/components/onboarding/invite-members.tsx
@ -4,8 +4,7 @@ import useToast from "hooks/use-toast";
 import workspaceService from "services/workspace.service";
 import { IUser } from "types";
 // ui components
-import MultiInput from "components/ui/multi-input";
-import OutlineButton from "components/ui/outline-button";
+import { MultiInput, OutlineButton } from "components/ui";

 type Props = {
  setStep: React.Dispatch<React.SetStateAction<number>>;
--- a/apps/app/components/ui/button/index.tsx
+++ b/apps/app/components/ui/button/index.tsx
--- a/apps/app/components/ui/custom-listbox/index.tsx
+++ b/apps/app/components/ui/custom-listbox/index.tsx
@ -2,8 +2,19 @@ import React from "react";

 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
-// types
-import { Props } from "./types";
+
+type Props = {
+  title?: string;
+  label?: string;
+  options?: Array<{ display: string; value: any; color?: string; icon?: JSX.Element }>;
+  icon?: JSX.Element;
+  value: any;
+  onChange: (value: any) => void;
+  multiple?: boolean;
+  optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
+  className?: string;
+  footerOption?: JSX.Element;
+};

 export const CustomListbox: React.FC<Props> = ({
  title = "",
--- a/apps/app/components/ui/custom-listbox/types.d.ts
+++ b/apps/app/components/ui/custom-listbox/types.d.ts
@ -1,12 +0,0 @@
-export type Props = {
-  title?: string;
-  label?: string;
-  options?: Array<{ display: string; value: any; color?: string; icon?: JSX.Element }>;
-  icon?: JSX.Element;
-  value: any;
-  onChange: (value: any) => void;
-  multiple?: boolean;
-  optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
-  className?: string;
-  footerOption?: JSX.Element;
-};
--- a/apps/app/components/ui/custom-menu/index.tsx
+++ b/apps/app/components/ui/custom-menu/index.tsx
@ -5,9 +5,25 @@ import Link from "next/link";
 import { Menu, Transition } from "@headlessui/react";
 // icons
 import { ChevronDownIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
-// types
-import { MenuItemProps, Props } from "./types";
-// constants
+
+type Props = {
+  children: React.ReactNode;
+  label?: string | JSX.Element;
+  className?: string;
+  ellipsis?: boolean;
+  width?: "sm" | "md" | "lg" | "xl" | "auto";
+  textAlignment?: "left" | "center" | "right";
+  noBorder?: boolean;
+  optionsPosition?: "left" | "right";
+};
+
+type MenuItemProps = {
+  children: JSX.Element | string;
+  renderAs?: "button" | "a";
+  href?: string;
+  onClick?: () => void;
+  className?: string;
+};

 const CustomMenu = ({
  children,
--- a/apps/app/components/ui/custom-menu/types.d.ts
+++ b/apps/app/components/ui/custom-menu/types.d.ts
@ -1,18 +0,0 @@
-export type Props = {
-  children: React.ReactNode;
-  label?: string | JSX.Element;
-  className?: string;
-  ellipsis?: boolean;
-  width?: "sm" | "md" | "lg" | "xl" | "auto";
-  textAlignment?: "left" | "center" | "right";
-  noBorder?: boolean;
-  optionsPosition?: "left" | "right";
-};
-
-export type MenuItemProps = {
-  children: JSX.Element | string;
-  renderAs?: "button" | "a";
-  href?: string;
-  onClick?: () => void;
-  className?: string;
-};
--- a/apps/app/components/ui/custom-select/index.tsx
+++ b/apps/app/components/ui/custom-select/index.tsx
@ -14,6 +14,7 @@ type CustomSelectProps = {
  width?: "auto" | string;
  input?: boolean;
  noChevron?: boolean;
+  buttonClassName?: string;
  disabled?: boolean;
 };

@ -27,6 +28,7 @@ const CustomSelect = ({
  width = "auto",
  input = false,
  noChevron = false,
+  buttonClassName = "",
  disabled = false,
 }: CustomSelectProps) => (
  <Listbox
@ -38,7 +40,7 @@ const CustomSelect = ({
  >
    <div>
      <Listbox.Button
-        className={`flex w-full ${
+        className={`${buttonClassName} flex w-full ${
          disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
        } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
          input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs"
@ -95,8 +97,8 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
  <Listbox.Option
    value={value}
    className={({ active, selected }) =>
-      `${selected ? "bg-indigo-50 font-medium" : ""} ${
-        active ? "bg-indigo-50" : ""
+      `${active || selected ? "bg-indigo-50" : ""} ${
+        selected ? "font-medium" : ""
      } relative flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900 ${className}`
    }
  >
--- a/apps/app/components/ui/empty-space/index.tsx
+++ b/apps/app/components/ui/empty-space/index.tsx
--- a/apps/app/components/ui/header-button/index.tsx
+++ b/apps/app/components/ui/header-button/index.tsx
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@ -1,15 +1,17 @@
+export * from "./input";
+export * from "./text-area";
+export * from "./avatar";
 export * from "./button";
 export * from "./custom-listbox";
 export * from "./custom-menu";
 export * from "./custom-select";
+export * from "./datepicker";
 export * from "./empty-space";
 export * from "./header-button";
-export * from "./input";
 export * from "./loader";
+export * from "./multi-input";
 export * from "./outline-button";
+export * from "./progress-bar";
 export * from "./select";
 export * from "./spinner";
-export * from "./text-area";
-export * from "./avatar";
-export * from "./datepicker";
 export * from "./tooltip";
--- a/apps/app/components/ui/loader/index.tsx
+++ b/apps/app/components/ui/loader/index.tsx
--- a/apps/app/components/ui/modal/index.tsx
+++ b/apps/app/components/ui/modal/index.tsx
@ -1,116 +0,0 @@
-import { Fragment, ReactNode } from "react";
-// Headless ui imports
-import { Dialog, Transition } from "@headlessui/react";
-// Design components
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { Button } from "components/ui";
-// Icons
-
-type ModalProps = {
-  isModal: boolean;
-  setModal: Function;
-  size?: "xs" | "rg" | "lg" | "xl";
-  position?: "top" | "center" | "bottom";
-  title: string;
-  children: ReactNode;
-  buttons?: ReactNode;
-  onClose?: Function;
-  closeButton?: string;
-  continueButton?: string;
-};
-
-const Modal = (props: ModalProps) => {
-  const closeModal = () => {
-    props.setModal(false);
-    props.onClose ? props.onClose() : () => ({});
-  };
-
-  const width: string =
-    props.size === "xs"
-      ? "w-4/12"
-      : props.size === "rg"
-      ? "w-6/12"
-      : props.size === "lg"
-      ? "w-9/12"
-      : props.size === "xl"
-      ? "w-full"
-      : "w-auto";
-
-  const position: string =
-    props.position === "top"
-      ? "content-start justify-items-center"
-      : props.position === "center"
-      ? "place-items-center"
-      : props.position === "bottom"
-      ? "content-end justify-items-center"
-      : "place-items-center";
-
-  return (
-    <>
-      <Transition appear show={props.isModal} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-25" />
-          </Transition.Child>
-
-          <div className="fixed inset-0">
-            <div className={`grid h-full ${position} p-4 text-center`}>
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel
-                  className={`transform rounded-2xl ${width} max-h-full bg-white p-8 text-left shadow-xl transition-all`}
-                >
-                  <Dialog.Title
-                    as="h3"
-                    className="relative text-lg font-medium leading-6 text-gray-900"
-                  >
-                    <div
-                      className="absolute top-[-1rem] right-[-1rem] cursor-pointer"
-                      onClick={closeModal}
-                    >
-                      <XMarkIcon className="h-4 w-4" />
-                    </div>
-                    <div>{props.title}</div>
-                  </Dialog.Title>
-                  <div className="mt-2">{props.children}</div>
-                  <div className="mt-4">
-                    <div className={`flex justify-end gap-2`}>
-                      <Button theme="secondary" onClick={closeModal}>
-                        {props.closeButton}
-                      </Button>
-                      <Button onClick={closeModal}>{props.continueButton}</Button>
-                    </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </>
-  );
-};
-
-Modal.defaultProps = {
-  size: "rg",
-  position: "center",
-  closeButton: "Close",
-  continueButton: "Continue",
-};
-
-export default Modal;
--- a/apps/app/components/ui/multi-input/index.tsx
+++ b/apps/app/components/ui/multi-input/index.tsx
@ -8,7 +8,7 @@ const isEmailValid = (email: string) =>
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    );

-const MultiInput = ({ label, name, placeholder, setValue, watch }: any) => {
+export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) => {
  const handleKeyDown = (e: any) => {
    if (e.key !== "Enter") return;
    const value = e.target.value;
@ -72,5 +72,3 @@ const MultiInput = ({ label, name, placeholder, setValue, watch }: any) => {
    </>
  );
 };
-
-export default MultiInput;
--- a/apps/app/components/ui/outline-button/index.tsx
+++ b/apps/app/components/ui/outline-button/index.tsx
@ -10,7 +10,7 @@ type Props = {
  disabled?: boolean;
 };

-const OutlineButton = React.forwardRef<HTMLButtonElement, Props>(
+export const OutlineButton = React.forwardRef<HTMLButtonElement, Props>(
  (
    {
      children,
@ -58,5 +58,3 @@ const OutlineButton = React.forwardRef<HTMLButtonElement, Props>(
 );

 OutlineButton.displayName = "Button";
-
-export default OutlineButton;
--- a/apps/app/components/ui/progress-bar/index.tsx
+++ b/apps/app/components/ui/progress-bar/index.tsx
@ -9,7 +9,7 @@ type Props = {
  inactiveStrokeColor?: string;
 };

-const ProgressBar: React.FC<Props> = ({
+export const ProgressBar: React.FC<Props> = ({
  maxValue = 0,
  value = 0,
  radius = 8,
@ -67,4 +67,3 @@ const ProgressBar: React.FC<Props> = ({
    </svg>
  );
 };
-export default ProgressBar;
--- a/apps/app/components/ui/select.tsx
+++ b/apps/app/components/ui/select.tsx
@ -0,0 +1,60 @@
+import React from "react";
+
+// react-hook-form
+import { RegisterOptions, UseFormRegister } from "react-hook-form";
+
+type Props = {
+  label?: string;
+  id: string;
+  name: string;
+  value?: string | number | readonly string[];
+  className?: string;
+  register?: UseFormRegister<any>;
+  disabled?: boolean;
+  validations?: RegisterOptions;
+  error?: any;
+  autoComplete?: "on" | "off";
+  options: { label: string; value: any }[];
+  size?: "rg" | "lg";
+  fullWidth?: boolean;
+};
+
+export const Select: React.FC<Props> = ({
+  id,
+  label,
+  value,
+  className = "",
+  name,
+  register,
+  disabled,
+  validations,
+  error,
+  options,
+  size = "rg",
+  fullWidth = true,
+}) => (
+  <>
+    {label && (
+      <label htmlFor={id} className="text-gray-500 mb-2">
+        {label}
+      </label>
+    )}
+    <select
+      id={id}
+      name={name}
+      value={value}
+      {...(register && register(name, validations))}
+      disabled={disabled}
+      className={`mt-1 block text-base border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md bg-transparent ${
+        fullWidth ? "w-full" : ""
+      } ${size === "rg" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`}
+    >
+      {options.map((option, index) => (
+        <option value={option.value} key={index}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+    {error?.message && <div className="text-red-500 text-sm">{error.message}</div>}
+  </>
+);
--- a/apps/app/components/ui/select/index.tsx
+++ b/apps/app/components/ui/select/index.tsx
@ -1,47 +0,0 @@
-import React from "react";
-// types
-import { Props } from "./types";
-
-export const Select: React.FC<Props> = ({
-  id,
-  label,
-  value,
-  className = "",
-  name,
-  register,
-  disabled,
-  validations,
-  error,
-  options,
-  size = "rg",
-  fullWidth = true,
-}) => (
-    <>
-      {label && (
-        <label htmlFor={id} className="text-gray-500 mb-2">
-          {label}
-        </label>
-      )}
-      <select
-        id={id}
-        name={name}
-        value={value}
-        {...(register && register(name, validations))}
-        disabled={disabled}
-        className={`mt-1 block text-base border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md bg-transparent ${
-          fullWidth ? "w-full" : ""
-        } ${
-          size === "rg" ? "px-3 py-2" : size === "lg" ? "p-3" : ""
-        } ${className}`}
-      >
-        {options.map((option, index) => (
-          <option value={option.value} key={index}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-      {error?.message && (
-        <div className="text-red-500 text-sm">{error.message}</div>
-      )}
-    </>
-  );
--- a/apps/app/components/ui/select/types.d.ts
+++ b/apps/app/components/ui/select/types.d.ts
@ -1,17 +0,0 @@
-import type { UseFormRegister, RegisterOptions } from "react-hook-form";
-
-export type Props = {
-  label?: string;
-  id: string;
-  name: string;
-  value?: string | number | readonly string[];
-  className?: string;
-  register?: UseFormRegister<any>;
-  disabled?: boolean;
-  validations?: RegisterOptions;
-  error?: any;
-  autoComplete?: "on" | "off";
-  options: { label: string; value: any }[];
-  size?: "rg" | "lg";
-  fullWidth?: boolean;
-};
--- a/apps/app/components/ui/spinner/index.tsx
+++ b/apps/app/components/ui/spinner/index.tsx
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@ -20,9 +20,8 @@ import EmojiIconPicker from "components/emoji-icon-picker";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, Input, TextArea, Loader, CustomSelect } from "components/ui";
+import { Button, Input, TextArea, Loader, CustomSelect, OutlineButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import OutlineButton from "components/ui/outline-button";
 // helpers
 import { debounce } from "helpers/common.helper";
 // types
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@ -24,9 +24,8 @@ import useToast from "hooks/use-toast";
 import { ImageUploadModal } from "components/core";
 import ConfirmWorkspaceDeletion from "components/workspace/confirm-workspace-deletion";
 // ui
-import { Spinner, Button, Input, CustomSelect } from "components/ui";
+import { Spinner, Button, Input, CustomSelect, OutlineButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import OutlineButton from "components/ui/outline-button";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types