chore: convert workspace card into sistent card

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx

@@ -36,8 +36,13 @@ export function CustomColumnVisibilityControl({
   const theme = useTheme();
 
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setOpen((prev) => !prev);
+    if (anchorEl) {
+      setAnchorEl(null);
+      return;
+    }
     setAnchorEl(event.currentTarget);
-    setOpen(true);
   };
 
   const handleClose = () => {

src/custom/TeamTable/TeamTable.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Grid, TableCell } from '@mui/material';
 import { MUIDataTableColumn } from 'mui-datatables';
+import { useTheme } from '../../theme';
 import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.js';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.js';
 import ResponsiveDataTable from '../ResponsiveDataTable.js';
@@ -35,6 +36,7 @@ const TeamTable: React.FC<TeamTableProps> = ({
   useNotificationHandlers,
   useRemoveUserFromTeamMutation
 }) => {
+  const theme = useTheme();
   return (
     <ErrorBoundary>
       <ResponsiveDataTable
@@ -48,8 +50,8 @@ const TeamTable: React.FC<TeamTableProps> = ({
               <TableCell
                 colSpan={6}
                 sx={{
-                  padding: '0.5rem',
-                  backgroundColor: 'rgba(0, 0, 0, 0.05)'
+                  padding: '0.5rem'
+                  // backgroundColor: 'rgba(0, 0, 0, 0.05)'
                 }}
               >
                 <Grid
@@ -58,7 +60,7 @@ const TeamTable: React.FC<TeamTableProps> = ({
                   spacing={1}
                   sx={{
                     margin: 'auto',
-                    backgroundColor: '#f3f1f1',
+                    // backgroundColor: '#f3f1f1',
                     paddingLeft: '0.5rem',
                     borderRadius: '0.25rem',
                     width: 'inherit'
@@ -71,6 +73,7 @@ const TeamTable: React.FC<TeamTableProps> = ({
                     useGetUsersForOrgQuery={useGetUsersForOrgQuery}
                     useNotificationHandlers={useNotificationHandlers}
                     useRemoveUserFromTeamMutation={useRemoveUserFromTeamMutation}
+                    theme={theme}
                   />
                 </Grid>
               </TableCell>

src/custom/TeamTable/TeamTableConfiguration.tsx

@@ -256,7 +256,7 @@ export default function TeamTableConfiguration({
                     }}
                     iconType="delete"
                   >
-                    <DeleteIcon height={28} width={28} fill={CHARCOAL} />
+                    <DeleteIcon height={28} width={28} fill={theme.palette.icon.default} />
                   </TooltipIcon>
                 </IconWrapper>
               ) : (
@@ -296,12 +296,6 @@ export default function TeamTableConfiguration({
     download: false,
     elevation: 0,
     serverSide: true,
-    tableBody: {
-      style: {
-        backgroundColor: '#f3f1f1'
-      }
-    },
-
     viewColumns: false,
     search: false,
     rowsExpanded: [ExpandedRowIdx],
@@ -392,7 +386,7 @@ export default function TeamTableConfiguration({
 
       return {
         style: {
-          backgroundColor: theme.palette.background.paper
+          backgroundColor: theme.palette.background.constant?.table
         }
       };
     }

src/custom/UsersTable/index.ts

@@ -1,3 +1,3 @@
 import UsersTable from './UsersTable';
-
-export { UsersTable };
+import UserTableAvatarInfo from './UserTableAvatarInfo';
+export { UsersTable, UserTableAvatarInfo };