Skip to content

Commit a3fe40f

Browse files
amitamrutiyaamitamrutiya
committed
fix: some ui theme issue
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 4b41c18 commit a3fe40f

4 files changed

Lines changed: 43 additions & 21 deletions

File tree

‎src/custom/CatalogDesignTable/CatalogDesignTable.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ interface CatalogDesignsTableProps {
2828
rowsPerPageOptions?: number[];
2929
handleBulkDeleteModal: (patterns: Pattern[], modalRef: React.RefObject<PromptRef>) => void;
3030
setSearch?: (search: string) => void;
31+
tableBackgroundColor?: string;
3132
handleBulkpatternsDataUnpublishModal: (
3233
selected: any,
3334
patterns: Pattern[],
@@ -51,6 +52,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
5152
handleBulkDeleteModal,
5253
setSearch,
5354
rowsPerPageOptions = [10, 25, 50, 100],
55+
tableBackgroundColor,
5456
handleBulkpatternsDataUnpublishModal
5557
}) => {
5658
const theme = useTheme();
@@ -203,7 +205,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
203205
tableCols={processedColumns}
204206
columnVisibility={columnVisibility}
205207
backgroundColor={
206-
theme.palette.mode === 'light'
208+
tableBackgroundColor
209+
? tableBackgroundColor
210+
: theme.palette.mode === 'light'
207211
? theme.palette.background.default
208212
: theme.palette.background.secondary
209213
}

‎src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1+
import { Theme } from '@mui/material';
12
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
23
import { PLAYGROUND_MODES } from '../../constants/constants';
34
import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
45
import Download from '../../icons/Download/Download';
5-
import { CHARCOAL } from '../../theme';
6-
import { downloadPattern, slugify } from '../CatalogDetail/helper';
6+
import { slugify } from '../CatalogDetail/helper';
77
import { RESOURCE_TYPES } from '../CatalogDetail/types';
88
import { Pattern } from '../CustomCatalog/CustomCard';
99
import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
1010
import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
1111
import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
12-
import AuthorCell from './AuthorCell';
12+
import { UserTableAvatarInfo } from '../UsersTable';
1313
import { getColumnValue } from './helper';
1414
import { L5DeleteIcon, NameDiv } from './style';
1515

@@ -26,6 +26,7 @@ interface ColumnConfigProps {
2626
handleClone: (name: string, id: string) => void;
2727
handleShowDetails: (designId: string, designName: string) => void;
2828
getDownloadUrl: (id: string) => string;
29+
handleDownload: (design: Pattern) => void;
2930
isDownloadAllowed: boolean;
3031
isCopyLinkAllowed: boolean;
3132
isDeleteAllowed: boolean;
@@ -34,6 +35,7 @@ interface ColumnConfigProps {
3435
// for workspace designs table page only
3536
isFromWorkspaceTable?: boolean;
3637
isRemoveAllowed?: boolean;
38+
theme?: Theme;
3739
}
3840

3941
export const colViews: ColView[] = [
@@ -54,13 +56,15 @@ export const createDesignsColumnsConfig = ({
5456
handleCopyUrl,
5557
handleClone,
5658
handleShowDetails,
57-
getDownloadUrl,
59+
// getDownloadUrl,
60+
handleDownload,
5861
isUnpublishAllowed,
5962
isCopyLinkAllowed,
6063
isDeleteAllowed,
6164
isPublishAllowed,
6265
isDownloadAllowed,
6366
isRemoveAllowed,
67+
theme,
6468
isFromWorkspaceTable = false
6569
}: ColumnConfigProps): MUIDataTableColumn[] => {
6670
return [
@@ -99,13 +103,14 @@ export const createDesignsColumnsConfig = ({
99103
const lastName = getColumnValue(tableMeta as TableMeta, 'last_name');
100104
const avatar_url = getColumnValue(tableMeta as TableMeta, 'avatar_url');
101105
const user_id = getColumnValue(tableMeta as TableMeta, 'user_id');
106+
const userEmail = getColumnValue(tableMeta as TableMeta, 'email');
102107

103108
return (
104-
<AuthorCell
105-
firstName={firstName}
106-
lastName={lastName}
107-
avatarUrl={avatar_url}
109+
<UserTableAvatarInfo
110+
userEmail={userEmail}
108111
userId={user_id}
112+
userName={`${firstName} ${lastName}`}
113+
profileUrl={avatar_url}
109114
/>
110115
);
111116
}
@@ -153,6 +158,17 @@ export const createDesignsColumnsConfig = ({
153158
searchable: false
154159
}
155160
},
161+
162+
{
163+
name: 'email',
164+
label: 'email',
165+
options: {
166+
filter: false,
167+
sort: false,
168+
searchable: false
169+
}
170+
},
171+
156172
{
157173
name: 'actions',
158174
label: 'Actions',
@@ -165,21 +181,21 @@ export const createDesignsColumnsConfig = ({
165181
customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
166182
const rowIndex = (tableMeta as TableMeta).rowIndex;
167183
const rowData = (tableMeta as TableMeta).tableData[rowIndex];
168-
169184
const actionsList = [
170185
{
171186
title: 'Download',
172-
onClick: () => downloadPattern(rowData.id, rowData.name, getDownloadUrl),
187+
// onClick: () => downloadPattern(rowData.id, rowData.name, getDownloadUrl),
188+
onClick: () => handleDownload(rowData),
173189
disabled: !isDownloadAllowed,
174-
icon: <Download width={24} height={24} fill={CHARCOAL} />
190+
icon: <Download width={24} height={24} fill={theme?.palette.icon.secondary} />
175191
},
176192
{
177193
title: 'Copy Link',
178194
disabled: rowData.visibility === 'private' || !isCopyLinkAllowed,
179195
onClick: () => {
180196
handleCopyUrl(RESOURCE_TYPES.DESIGN, rowData?.name, rowData?.id);
181197
},
182-
icon: <ChainIcon width={'24'} height={'24'} fill={CHARCOAL} />
198+
icon: <ChainIcon width={'24'} height={'24'} fill={theme?.palette.icon.secondary} />
183199
},
184200
{
185201
title: 'Open in playground',
@@ -191,7 +207,9 @@ export const createDesignsColumnsConfig = ({
191207
'_blank'
192208
);
193209
},
194-
icon: <KanvasIcon width={24} height={24} primaryFill={CHARCOAL} />
210+
icon: (
211+
<KanvasIcon width={24} height={24} primaryFill={theme?.palette.icon.secondary} />
212+
)
195213
},
196214
{
197215
title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',
@@ -205,20 +223,20 @@ export const createDesignsColumnsConfig = ({
205223
title: 'Publish',
206224
disabled: !isPublishAllowed,
207225
onClick: () => handlePublishModal(rowData),
208-
icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
226+
icon: <PublishIcon width={24} height={24} fill={theme?.palette.icon.secondary} />
209227
};
210228

211229
const unpublishAction = {
212230
title: 'Unpublish',
213231
onClick: () => handleUnpublishModal(rowData)(),
214232
disabled: !isUnpublishAllowed,
215-
icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
233+
icon: <PublishIcon width={24} height={24} fill={theme?.palette.icon.secondary} />
216234
};
217235

218236
const cloneAction = {
219237
title: 'Clone',
220238
onClick: () => handleClone(rowData?.name, rowData?.id),
221-
icon: <CopyIcon width={24} height={24} fill={CHARCOAL} />
239+
icon: <CopyIcon width={24} height={24} fill={theme?.palette.icon.secondary} />
222240
};
223241

224242
if (rowData.visibility === 'published') {
@@ -228,7 +246,7 @@ export const createDesignsColumnsConfig = ({
228246
actionsList.splice(1, 0, publishAction);
229247
}
230248

231-
return <DataTableEllipsisMenu actionsList={actionsList} />;
249+
return <DataTableEllipsisMenu actionsList={actionsList} theme={theme} />;
232250
}
233251
}
234252
}

‎src/custom/CatalogDesignTable/columnConfig.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ export const createDesignColumns = ({
320320
});
321321
}
322322
//@ts-ignore
323-
return <DataTableEllipsisMenu actionsList={actionsList} theme={theme} />;
323+
return <DataTableEllipsisMenu actionsList={actionsList} />;
324324
}
325325
}
326326
}

‎src/custom/ResponsiveDataTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const DataTableEllipsisMenu: React.FC<{
4848
<TooltipIcon
4949
title="View Actions"
5050
onClick={handleClick}
51-
icon={<EllipsisIcon fill={theme?.palette.text.primary ?? 'black'} />}
51+
icon={<EllipsisIcon fill={theme?.palette.icon.default ?? 'black'} />}
5252
arrow
5353
/>
5454
<Menu
@@ -59,7 +59,7 @@ export const DataTableEllipsisMenu: React.FC<{
5959
sx={{
6060
fontFamily: theme?.typography.fontFamily,
6161
'& .MuiPaper-root': {
62-
backgroundColor: theme?.palette.background.default ?? 'white'
62+
backgroundColor: theme?.palette.background.card ?? 'white'
6363
}
6464
}}
6565
>

0 commit comments

Comments
 (0)