style: create project modal

apps/app/components/analytics/custom-analytics/sidebar.tsx

@@ -360,11 +360,8 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                     <div className="flex items-center gap-2 text-xs">
                       <h6 className="text-custom-text-200">Network</h6>
                       <span>
-                        {
-                          NETWORK_CHOICES[
-                            `${projectDetails?.network}` as keyof typeof NETWORK_CHOICES
-                          ]
-                        }
+                        {NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ??
+                          ""}
                       </span>
                     </div>
                   </div>

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

@@ -62,7 +62,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded-md border border-custom-border-200 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200"
+        className="rounded-md border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -77,7 +77,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
         leaveTo="transform opacity-0 scale-95"
       >
         <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
-          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-200 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
+          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
             <Tab.Group>
               <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
                 {tabOptions.map((tab) => (

apps/app/components/emoji-icon-picker/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 // headless ui
 import { Tab, Transition, Popover } from "@headlessui/react";
 // react colors
@@ -11,8 +11,6 @@ import icons from "./icons.json";
 // helpers
 import { getRecentEmojis, saveRecentEmoji } from "./helpers";
 import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
-// hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
 const tabOptions = [
   {
@@ -26,8 +24,6 @@ const tabOptions = [
 ];
 
 const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorChange }) => {
-  const ref = useRef<HTMLDivElement>(null);
-
   const [isOpen, setIsOpen] = useState(false);
   const [openColorPicker, setOpenColorPicker] = useState(false);
   const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
@@ -38,20 +34,13 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
     setRecentEmojis(getRecentEmojis());
   }, []);
 
-  useOutsideClickDetector(ref, () => {
-    setIsOpen(false);
-  });
-
   useEffect(() => {
     if (!value || value?.length === 0) onChange(getRandomEmoji());
   }, [value, onChange]);
 
   return (
-    <Popover className="relative z-[1]" ref={ref}>
-      <Popover.Button
-        className="rounded-full bg-custom-background-90 p-2 outline-none sm:text-sm"
-        onClick={() => setIsOpen((prev) => !prev)}
-      >
+    <Popover className="relative z-[1]">
+      <Popover.Button onClick={() => setIsOpen((prev) => !prev)} className="outline-none">
         {label}
       </Popover.Button>
       <Transition

apps/app/components/emoji-icon-picker/types.d.ts

@@ -1,5 +1,5 @@
 export type Props = {
-  label: string | React.ReactNode;
+  label: React.ReactNode;
   value: any;
   onChange: (
     data:

apps/app/components/integration/jira/import-users.tsx

@@ -30,7 +30,7 @@ export const JiraImportUsers: FC = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { workspaceMembers: members } = useWorkspaceMembers(workspaceSlug?.toString());
+  const { workspaceMembers: members } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
 
   const options = members?.map((member) => ({
     value: member.member.email,

apps/app/components/issues/select/assignee.tsx

@@ -21,7 +21,6 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  // fetching project members
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId

apps/app/components/modules/sidebar-select/select-members.tsx

@@ -55,7 +55,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
       </div>
       <div className="sm:basis-1/2">
         <CustomSearchSelect
-          value={value}
+          value={value ?? []}
           label={
             <div className="flex items-center gap-2 text-custom-text-200">
               {value && value.length > 0 && Array.isArray(value) ? (