[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/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 & {