Merge pull request #809 from amitamrutiya/fix-catalog-table

Fix some issue in the catalog design table

Author: amitamrutiya

src/custom/CatalogDesignTable/columnConfig.tsx

@@ -3,6 +3,7 @@
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
 import { Avatar, Box, Grid, Typography } from '../../base';
+import { CLOUD_URL } from '../../constants/constants';
 import { iconMedium } from '../../constants/iconsSizes';
 import {
   ChainIcon,
@@ -165,7 +166,7 @@ export const createDesignColumns = ({
                           alt={displayName}
                           src={avatar_url}
                           onClick={() => {
-                            window.location.href = `/user/${user_id}`;
+                            window.open(`${CLOUD_URL}/user/${user_id}`, '_blank');
                           }}
                         >
                           {!avatar_url && <PersonIcon />}

src/custom/ResponsiveDataTable.tsx

@@ -122,11 +122,12 @@ export const DataTableEllipsisMenu: React.FC<{
 const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
   createTheme({
     components: {
-      MUIDataTable: {
+      MuiPaper: {
         styleOverrides: {
-          paper: {
+          root: {
             background: backgroundColor || theme.palette.background.default,
-            maxWidth: '-moz-available'
+            maxWidth: '-moz-available',
+            width: '-moz-available'
           }
         }
       },
@@ -386,7 +387,7 @@ const ResponsiveDataTable = ({
     });
     updateCols && updateCols([...columns]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columnVisibility, updateCols]);
+  }, [columnVisibility, updateCols, data]);
 
   React.useEffect(() => {
     updateColumnsEffect();

src/custom/TooltipIcon.tsx

@@ -20,21 +20,23 @@ export function TooltipIcon({
 }: TooltipIconProps): JSX.Element {
   return (
     <CustomTooltip title={title} arrow={arrow}>
-      <IconButton
-        onClick={onClick}
-        sx={{
-          '&:hover': {
-            '& svg': {
-              fill: '#00d3a9'
+      <div>
+        <IconButton
+          onClick={onClick}
+          sx={{
+            '&:hover': {
+              '& svg': {
+                fill: '#00d3a9'
+              },
+              borderRadius: '4px'
             },
-            borderRadius: '4px'
-          },
-          ...(style as SxProps)
-        }}
-        disableRipple
-      >
-        {icon}
-      </IconButton>
+            ...(style as SxProps)
+          }}
+          disableRipple
+        >
+          {icon}
+        </IconButton>
+      </div>
     </CustomTooltip>
   );
 }