Skip to content

Commit fb42a65

Browse files
amitamrutiyaamitamrutiya
committed
style: update stying based on catalog modal
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 88cf288 commit fb42a65

5 files changed

Lines changed: 107 additions & 70 deletions

File tree

‎src/custom/CatalogDetail/SocialSharePopper.tsx‎

Lines changed: 94 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
import { Fade } from '@mui/material';
2-
import React from 'react';
1+
import { Box, IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
2+
import React, { useState } from 'react';
33
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
4-
import { ClickAwayListener, IconButton, Paper, Popper, Tooltip } from '../../base';
54
import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';
65
import { useTheme } from '../../theme';
76
import { Pattern } from '../CustomCatalog/CustomCard';
7+
import { ErrorBoundary } from '../ErrorBoundary';
88
import { CopyShareIconWrapper, VisibilityChip } from './style';
99

1010
interface SocialSharePopperProps {
1111
details: Pattern;
1212
type: string;
1313
cardId: string;
14-
handleClick: (event: React.MouseEvent) => void;
1514
title: string;
16-
id: string;
17-
anchorEl: HTMLElement | null;
18-
handleClose: () => void;
1915
getUrl: (type: string, id: string) => string;
2016
handleCopyUrl: (type: string, name: string, id: string) => void;
2117
}
@@ -24,71 +20,105 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
2420
details,
2521
type,
2622
cardId,
27-
handleClick,
2823
title,
29-
id,
30-
anchorEl,
31-
handleClose,
3224
getUrl,
3325
handleCopyUrl
3426
}) => {
35-
const cleanedType = type.replace('my-', '').replace(/s$/, '');
3627
const theme = useTheme();
28+
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
29+
const open = Boolean(anchorEl);
30+
31+
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
32+
setAnchorEl(event.currentTarget);
33+
};
34+
35+
const handleClose = () => {
36+
setAnchorEl(null);
37+
};
38+
39+
const cleanedType = type.replace('my-', '').replace(/s$/, '');
40+
3741
return (
38-
<CopyShareIconWrapper style={{ marginBottom: '2rem' }}>
39-
<VisibilityChip
40-
style={{
41-
color: theme.palette.text.default
42-
}}
43-
>
44-
{details?.visibility}
45-
</VisibilityChip>
46-
{details?.visibility !== 'private' && (
47-
<Tooltip title="Copy Link" placement="top" arrow>
48-
<IconButton
49-
sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
50-
onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
51-
>
52-
<ChainIcon height={'24'} width={'24'} />
53-
</IconButton>
54-
</Tooltip>
55-
)}
56-
{(details?.visibility === 'published' || details?.visibility === 'public') && (
57-
<>
58-
<Tooltip title={title} placement="top" arrow>
59-
<IconButton sx={{ borderRadius: '0.1rem', padding: '0.5rem' }} onClick={handleClick}>
60-
<ShareIcon height={24} width={22} />
42+
<ErrorBoundary>
43+
<CopyShareIconWrapper style={{ marginBottom: '2rem' }}>
44+
<VisibilityChip
45+
style={{
46+
color: theme.palette.text.default
47+
}}
48+
>
49+
{details?.visibility}
50+
</VisibilityChip>
51+
52+
{details?.visibility !== 'private' && (
53+
<Tooltip title="Copy Link" placement="top" arrow>
54+
<IconButton
55+
sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
56+
onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
57+
>
58+
<ChainIcon height={'24'} width={'24'} />
6159
</IconButton>
6260
</Tooltip>
63-
<Popper id={id} open={Boolean(anchorEl)} anchorEl={anchorEl} transition>
64-
{({ TransitionProps }) => (
65-
<ClickAwayListener onClickAway={handleClose}>
66-
<Fade {...TransitionProps} timeout={350}>
67-
<Paper>
68-
<TwitterShareButton
69-
url={getUrl(cleanedType, cardId)}
70-
title="Checkout this awesome design"
71-
hashtags={['opensource']}
72-
>
73-
<TwitterIcon />
74-
</TwitterShareButton>
75-
<LinkedinShareButton
76-
url={getUrl(cleanedType, cardId)}
77-
summary="Checkout this awesome design"
78-
>
79-
<LinkedinIcon />
80-
</LinkedinShareButton>
81-
<FacebookShareButton url={getUrl(cleanedType, cardId)} hashtag="#opensource">
82-
<FacebookIcon />
83-
</FacebookShareButton>
84-
</Paper>
85-
</Fade>
86-
</ClickAwayListener>
87-
)}
88-
</Popper>
89-
</>
90-
)}
91-
</CopyShareIconWrapper>
61+
)}
62+
63+
{(details?.visibility === 'published' || details?.visibility === 'public') && (
64+
<>
65+
<Tooltip title={title} placement="top" arrow>
66+
<IconButton sx={{ borderRadius: '0.1rem', padding: '0.5rem' }} onClick={handleClick}>
67+
<ShareIcon height={24} width={22} />
68+
</IconButton>
69+
</Tooltip>
70+
71+
<Menu
72+
anchorEl={anchorEl}
73+
open={open}
74+
onClose={handleClose}
75+
onClick={handleClose}
76+
PaperProps={{
77+
sx: {
78+
p: 0,
79+
width: 'auto'
80+
}
81+
}}
82+
sx={{
83+
'& .MuiList-root': {
84+
paddingBottom: 0
85+
}
86+
}}
87+
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
88+
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
89+
>
90+
<MenuItem
91+
sx={{
92+
backgroundColor: 'transparent',
93+
'&:hover': { backgroundColor: 'transparent' },
94+
padding: '0px',
95+
cursor: 'default'
96+
}}
97+
>
98+
<Box sx={{ display: 'flex', gap: 1 }}>
99+
<TwitterShareButton
100+
url={getUrl(cleanedType, cardId)}
101+
title="Checkout this awesome design"
102+
hashtags={['opensource']}
103+
>
104+
<TwitterIcon />
105+
</TwitterShareButton>
106+
<LinkedinShareButton
107+
url={getUrl(cleanedType, cardId)}
108+
summary="Checkout this awesome design"
109+
>
110+
<LinkedinIcon />
111+
</LinkedinShareButton>
112+
<FacebookShareButton url={getUrl(cleanedType, cardId)} hashtag="#opensource">
113+
<FacebookIcon />
114+
</FacebookShareButton>
115+
</Box>
116+
</MenuItem>
117+
</Menu>
118+
</>
119+
)}
120+
</CopyShareIconWrapper>
121+
</ErrorBoundary>
92122
);
93123
};
94124

‎src/custom/CatalogDetail/UserInfo.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,27 @@ import { Pattern } from '../CustomCatalog/CustomCard';
22
import { getVersion } from '../CustomCatalog/Helper';
33
import { formatDate } from './helper';
44
import { ContentDetailsPoints, ContentDetailsText, ContentRow, RedirectLink } from './style';
5+
import { UserProfile } from './types';
56

67
interface UserInfoProps {
78
details: Pattern;
89
showVersion?: boolean;
10+
userProfile?: UserProfile;
911
}
1012

11-
const UserInfo: React.FC<UserInfoProps> = ({ details, showVersion = true }) => {
13+
const UserInfo: React.FC<UserInfoProps> = ({ details, showVersion = true, userProfile }) => {
1214
return (
1315
<>
1416
<ContentRow>
1517
<ContentDetailsPoints>CREATED BY</ContentDetailsPoints>
1618
<ContentDetailsText>
17-
<RedirectLink href={`/user/${details?.user_id}`} rel="noreferrer">
19+
<RedirectLink
20+
href={`https://meshery.layer5.io/user/${details?.user_id}`}
21+
target="_blank"
22+
rel="noopener noreferrer"
23+
>
1824
<span style={{ fontWeight: 'normal' }}>
19-
{details.user.first_name} {details?.user?.last_name}
25+
{userProfile?.first_name} {userProfile?.last_name}
2026
</span>
2127
</RedirectLink>
2228
</ContentDetailsText>

‎src/custom/CustomCatalog/CatalogCardDesignLogo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const CatalogCardDesignLogo: React.FC<CatalogCardDesignLogoProps> = ({
4343
return (
4444
<>
4545
{imgURL && imgURL.length > 0 ? (
46-
<div style={{ width: '100%', height: '7.5rem', position: 'relative' }}>
46+
<div style={{ width: '100%', height: '100%', position: 'relative' }}>
4747
{!imgError ? (
4848
<>
4949
<img

‎src/custom/CustomCatalog/CustomCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
272272
</DesignDetailsDiv>
273273

274274
{isDetailed && (
275-
<DesignDetailsDiv style={{ marginTop: '50px' }}>
275+
<DesignDetailsDiv style={{ marginTop: '40px' }}>
276276
<Grid container style={{ justifyContent: 'space-between', alignItems: 'center' }}>
277277
<Grid
278278
item

‎src/custom/Markdown/style.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ export const BasicAnchorMarkdown = styled('a')(() => ({
2222
export const StyledMarkdownP = styled('p')(({ theme }) => ({
2323
color: theme.palette.text.default,
2424
marginBlock: '0px',
25-
...theme.typography.textB1Regular
25+
...theme.typography.textB1Regular,
26+
fontFamily: 'inherit'
2627
}));
2728

2829
export const StyledMarkdownTooltipP = styled('p')(({ theme }) => ({

0 commit comments

Comments
 (0)