Skip to content

Commit 461b621

Browse files
Merge branch 'master' into feat/icons/people-icon
2 parents c822994 + 3a4b0f5 commit 461b621

File tree

12 files changed

+193
-4
lines changed

12 files changed

+193
-4
lines changed

src/custom/DashboardWidgets/GettingStartedWidget/ActionButtonCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ const ActionButtonCard = ({
147147
<CustomComponentWrapper>{customComponent}</CustomComponentWrapper>
148148
{actionButton && (
149149
<CardActions>
150-
<Button disabled={disabled} variant="contained" href={href} onClick={onClick}>
150+
<Button disabled={disabled} size="large" variant="contained" href={href} onClick={onClick}>
151151
{btnTitle}
152152
</Button>
153153
</CardActions>
@@ -193,7 +193,7 @@ const ActionButtonCard = ({
193193
<CustomComponentWrapper>{customComponent}</CustomComponentWrapper>
194194
{actionButton && (
195195
<CardActions>
196-
<Button disabled={disabled} variant="contained" href={href} onClick={onClick}>
196+
<Button disabled={disabled} size="large" variant="contained" href={href} onClick={onClick}>
197197
{showProgress ? (percentage === 100 ? 'Revisit' : btnTitle) : btnTitle}
198198
</Button>
199199
</CardActions>

src/custom/DashboardWidgets/RecentDesignWidget.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ const DesignCard: React.FC<DesignCardProps> = ({
246246
variant="contained"
247247
href={href || undefined}
248248
onClick={onClick || undefined}
249-
size="small"
249+
size="large"
250250
>
251251
{btnTitle}
252252
</Button>

src/custom/DashboardWidgets/WorkspaceActivityWidget.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ const WorkspaceActivityCard: React.FC<WorkspaceActivityCardProps> = ({
170170
</EmptyStateTypography>
171171
)}
172172
<CardActions>
173-
<Button disabled={false} variant="contained" href={workspacePagePath} size="small">
173+
<Button disabled={false} variant="contained" href={workspacePagePath} size="large">
174174
All Workspaces
175175
</Button>
176176
</CardActions>
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import { SxProps, Theme } from '@mui/material';
3+
import { Box, Button, Card, CardActions, CardContent, Typography } from '../../base';
4+
5+
export interface StyledCardProps {
6+
title: string;
7+
icon?: React.ReactNode;
8+
children: React.ReactNode;
9+
sx?: SxProps<Theme>;
10+
btntitle?: string;
11+
onclick?: () => void;
12+
disabled?: boolean;
13+
}
14+
15+
function StyledCard({
16+
title,
17+
icon,
18+
children,
19+
sx = {},
20+
btntitle,
21+
onclick,
22+
disabled = false
23+
}: StyledCardProps): JSX.Element {
24+
return (
25+
<Card sx={{ height: '100%', ...sx }}>
26+
<CardContent>
27+
<div
28+
style={{
29+
display: 'flex',
30+
justifyContent: 'space-between'
31+
}}
32+
>
33+
<Box
34+
sx={{
35+
display: 'flex',
36+
mb: 1.5
37+
}}
38+
>
39+
{icon}
40+
<Typography variant="h6" fontWeight="700" component="div" sx={{ mx: 1 }}>
41+
{title}
42+
</Typography>
43+
</Box>
44+
{btntitle && (
45+
<CardActions>
46+
<Button variant="contained" size='large' onClick={onclick} disabled={disabled}>
47+
{btntitle}
48+
</Button>
49+
</CardActions>
50+
)}
51+
</div>
52+
53+
{children}
54+
</CardContent>
55+
</Card>
56+
);
57+
}
58+
59+
export default StyledCard;

src/custom/StyledCard/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import StyledCard from './StyledCard';
2+
3+
export { StyledCard };

src/custom/StyledCard/style.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { styled } from '@mui/material';
2+
import { Link, ListItem } from '../../base';
3+
4+
export const backgroundImg = styled('div')<{ backgroundImage?: string }>(
5+
({ backgroundImage }) => ({
6+
backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
7+
backgroundPosition: 'right bottom',
8+
backgroundSize: 'cover',
9+
backgroundRepeat: 'no-repeat'
10+
})
11+
);
12+
13+
export const CustomCode = styled('code')(() => ({
14+
backgroundColor: '#212121',
15+
color: '#fff',
16+
padding: '0.2rem 0.4rem',
17+
borderRadius: '0.2rem'
18+
}));
19+
20+
export const List = styled(ListItem)<{ iconSrc?: string }>(({ iconSrc }) => ({
21+
listStyleImage: iconSrc ? `url(${iconSrc})` : 'none',
22+
display: 'flex',
23+
alignItems: 'flex-start'
24+
}));
25+
26+
export const CustomLink = styled('a')(({ theme }) => ({
27+
color: theme.palette.text.secondary,
28+
textDecoration: 'none',
29+
'&:visited': {
30+
textDecoration: 'none'
31+
},
32+
'&:hover': {
33+
textDecoration: 'underline'
34+
},
35+
fontWeight: 'bold'
36+
}));
37+
38+
export const MUILink = styled(Link)(() => ({
39+
color: '#455a64',
40+
textDecoration: 'none',
41+
'&:visited': {
42+
textDecoration: 'none'
43+
},
44+
'&:hover': {
45+
textDecoration: 'none',
46+
cursor: 'pointer'
47+
},
48+
fontWeight: '600'
49+
}));
50+
51+
export const CustomLinkDiv = styled('div')(() => ({
52+
display: 'block',
53+
width: '10rem',
54+
whiteSpace: 'nowrap',
55+
overflow: 'hidden',
56+
textOverflow: 'ellipsis'
57+
}));
58+
59+
export const CustomDisabledLink = styled('a')(() => ({
60+
textDecoration: 'none',
61+
color: '#455a64',
62+
'&:visited': {
63+
textDecoration: 'none'
64+
},
65+
opacity: '0.5',
66+
cursor: 'not-allowed'
67+
}));

src/custom/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import ResponsiveDataTable, {
4444
ResponsiveDataTableProps
4545
} from './ResponsiveDataTable';
4646
import SearchBar, { SearchBarProps } from './SearchBar';
47+
import { StyledCardProps } from './StyledCard/StyledCard';
4748
import { TeamTable, TeamTableConfiguration } from './TeamTable';
4849
import { TooltipIcon } from './TooltipIconButton';
4950
import { TransferList } from './TransferModal/TransferList';
@@ -66,6 +67,7 @@ export {
6667
PerformersSectionButton
6768
} from './PerformersSection';
6869
export { SetupPreReq } from './SetupPrerequisite';
70+
export { StyledCard } from './StyledCard';
6971
export { StyledChapter } from './StyledChapter';
7072
export { StyledSearchBar } from './StyledSearchBar';
7173
export { CustomTextField } from './StyledTextField';
@@ -155,6 +157,7 @@ export type {
155157
IPopperListener,
156158
ResponsiveDataTableProps,
157159
SearchBarProps,
160+
StyledCardProps,
158161
TransferListProps,
159162
UniversalFilterProps
160163
};
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { DEFAULT_HEIGHT, DEFAULT_WIDTH, KEPPEL_GREEN_FILL } from '../../constants/constants';
2+
import { IconProps } from '../types';
3+
4+
export const GroupAddIcon = ({
5+
width = DEFAULT_WIDTH,
6+
height = DEFAULT_HEIGHT,
7+
fill = KEPPEL_GREEN_FILL,
8+
...props
9+
}: IconProps): JSX.Element => {
10+
return (
11+
<svg
12+
width={width}
13+
height={height}
14+
xmlns="http://www.w3.org/2000/svg"
15+
viewBox="0 0 24 24"
16+
{...props}
17+
>
18+
<path
19+
d="M22 9V7h-2v2h-2v2h2v2h2v-2h2V9zM8 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 1c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4m4.51-8.95C13.43 5.11 14 6.49 14 8s-.57 2.89-1.49 3.95C14.47 11.7 16 10.04 16 8s-1.53-3.7-3.49-3.95m4.02 9.78C17.42 14.66 18 15.7 18 17v3h2v-3c0-1.45-1.59-2.51-3.47-3.17"
20+
fill={fill}
21+
/>
22+
</svg>
23+
);
24+
};
25+
export default GroupAddIcon;

src/icons/GroupAdd/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as GroupAdd } from './GroupAddIcon';

src/icons/Science/ScienceIcon.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
2+
import { IconProps } from '../types';
3+
4+
const KEPPEL_GREEN_FILL = '#00B39F';
5+
6+
export const ScienceIcon = ({
7+
width = DEFAULT_WIDTH,
8+
height = DEFAULT_HEIGHT,
9+
fill = KEPPEL_GREEN_FILL,
10+
...props
11+
}: IconProps): JSX.Element => {
12+
return (
13+
<svg
14+
width={width}
15+
height={height}
16+
xmlns="http://www.w3.org/2000/svg"
17+
viewBox="0 0 24 24"
18+
data-testid="science-icon-svg"
19+
{...props}
20+
>
21+
<path
22+
d="M19.8 18.4L14 10.67V6.5l1.35-1.69c.26-.33.03-.81-.39-.81H9.04c-.42 0-.65.48-.39.81L10 6.5v4.17L4.2 18.4c-.49.66-.02 1.6.8 1.6h14c.82 0 1.29-.94.8-1.6z"
23+
fill={fill}
24+
/>
25+
</svg>
26+
);
27+
};
28+
29+
export default ScienceIcon;

0 commit comments

Comments
 (0)