Merge branch 'master' into master

Author: amitamrutiya

CONTRIBUTING.md

@@ -117,6 +117,8 @@ To build a Docker image of the project, please ensure you have `Docker` installe
 make docker
 ```
 
+You can also refer to this "<a href="https://www.youtube.com/live/lsw9KA__iu4?si=o8gpZdSHcqO2OKxE">Training: contributing to Sistent</a>" and this <a href="https://www.youtube.com/live/yiXkxbibLUU?si=Dybj5qr0VLhLWEpl">Websites call</a> where experienced contributors have taught how to use sistent in your project or Meshery
+
 ### UI Lint Rules
 
 Layer5 uses ES-Lint to maintain code quality & consistency in our UI Code.

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -1,5 +1,6 @@
 import { Theme } from '@mui/material';
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
+import { Typography } from '../../base';
 import { PLAYGROUND_MODES } from '../../constants/constants';
 import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
@@ -9,7 +10,7 @@ import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
-import { UserTableAvatarInfo } from '../UsersTable';
+import AuthorCell from './AuthorCell';
 import { getColumnValue } from './helper';
 import { L5DeleteIcon, NameDiv } from './style';
 
@@ -103,14 +104,13 @@ export const createDesignsColumnsConfig = ({
           const lastName = getColumnValue(tableMeta as TableMeta, 'last_name');
           const avatar_url = getColumnValue(tableMeta as TableMeta, 'avatar_url');
           const user_id = getColumnValue(tableMeta as TableMeta, 'user_id');
-          const userEmail = getColumnValue(tableMeta as TableMeta, 'email');
 
           return (
-            <UserTableAvatarInfo
-              userEmail={userEmail}
+            <AuthorCell
               userId={user_id}
-              userName={`${firstName} ${lastName}`}
-              profileUrl={avatar_url}
+              avatarUrl={avatar_url}
+              firstName={firstName}
+              lastName={lastName}
             />
           );
         }
@@ -165,7 +165,11 @@ export const createDesignsColumnsConfig = ({
       options: {
         filter: false,
         sort: false,
-        searchable: false
+        searchable: false,
+        customBodyRender: (_, tableMeta: MUIDataTableMeta) => {
+          const userEmail = getColumnValue(tableMeta as TableMeta, 'email');
+          return <Typography variant="body2">{userEmail}</Typography>;
+        }
       }
     },
 

src/custom/UsersTable/UserTableAvatarInfo.tsx

@@ -38,7 +38,7 @@ const UserTableAvatarInfo: React.FC<UserTableAvatarInfoProps> = ({
       </Grid>
       <Grid item xs>
         {userName}
-        <Typography variant="body2" color={theme.palette.background.brand?.disabled}>
+        <Typography variant="body2" color={theme.palette.text.disabled}>
           {userEmail}
         </Typography>
       </Grid>