[WEB-1959]: Chore/settings member page (#5144)

* chore: implemented table component in ui library

* chore: added export in the UI package

* chore/member-page-revamp

* fix: added custom popover className

* fix: updated ui for projects

* fix: hide pending invites for members

* fix: added ee component

* removed unwanted logging

* fix: seperated components

* fix: used collapsible instead of disclosure

* fix: removed commented code

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

packages/ui/src/dropdowns/custom-select.tsx

@@ -82,11 +82,16 @@ const CustomSelect = (props: ICustomSelectProps) => {
             <button
               ref={setReferenceElement}
               type="button"
-              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
-                input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
-              } ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
+              className={cn(
+                "flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300",
+                {
+                  "px-3 py-2 text-sm": input,
+                  "px-2 py-1 text-xs": !input,
+                  "cursor-not-allowed text-custom-text-200": disabled,
+                  "cursor-pointer hover:bg-custom-background-80": !disabled,
+                },
+                buttonClassName
+              )}
               onClick={toggleDropdown}
             >
               {label}

packages/ui/src/popovers/popover-menu.tsx

@@ -14,6 +14,7 @@ export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
     button,
     panelClassName = "",
     data,
+    popoverClassName = "",
     keyExtractor,
     render,
   } = props;
@@ -28,6 +29,7 @@ export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
         "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2 text-xs shadow-custom-shadow-rg focus:outline-none",
         panelClassName
       )}
+      popoverClassName={popoverClassName}
     >
       <Fragment>
         {data.map((item, index) => (

packages/ui/src/popovers/popover.tsx

@@ -12,6 +12,7 @@ export const Popover = (props: TPopover) => {
     popperPosition = "bottom-end",
     popperPadding = 0,
     buttonClassName = "",
+    popoverClassName = "",
     button,
     panelClassName = "",
     children,
@@ -34,7 +35,7 @@ export const Popover = (props: TPopover) => {
   });
 
   return (
-    <HeadlessReactPopover className="relative flex h-full w-full items-center justify-center">
+    <HeadlessReactPopover className={cn("relative flex h-full w-full items-center justify-center", popoverClassName)}>
       <HeadlessReactPopover.Button ref={setReferenceElement} className="flex justify-center items-center">
         {button ? (
           button

packages/ui/src/popovers/types.ts

@@ -13,6 +13,7 @@ export type TPopoverDefaultOptions = TPopoverButtonDefaultOptions & {
   popperPadding?: number | undefined;
   // panel styling
   panelClassName?: string;
+  popoverClassName?: string;
 };
 
 export type TPopover = TPopoverDefaultOptions & {

packages/ui/src/tables/table.tsx

@@ -29,7 +29,7 @@ export const Table = <T,>(props: TTableData<T>) => {
           ))}
         </tr>
       </thead>
-      <tbody className={cn("divide-y divide-x divide-custom-border-200", tBodyClassName)}>
+      <tbody className={cn("divide-y divide-custom-border-200", tBodyClassName)}>
         {data.map((item) => (
           <tr
             key={keyExtractor(item)}