Skip to content

Commit

Permalink
feat(webapp): styling and refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@fvives99
fvives99 committed Nov 29, 2022
1 parent d5f3b89 commit d6ae9b4
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 84 deletions.
13 changes: 9 additions & 4 deletions webapp/src/components/InformationCard/Nodes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,9 @@ const Nodes = ({ nodes, producer, t, classes }) => {
<>
{nodes.map((node, index) => (
<div
key={`node-${producer?.owner}-${node?.node_type?.toString()}-${index}`}
key={`node-${
producer?.owner
}-${node?.node_type?.toString()}-${index}`}
>
<Tooltip
anchorEl={anchorEl}
Expand All @@ -47,12 +49,15 @@ const Nodes = ({ nodes, producer, t, classes }) => {
>
<NodeCard node={node} producer={producer} />
</Tooltip>
<div className={classes.rowWrapper}>
<Typography variant="body1">
<div className={classes.flex}>
<Typography
variant="body1"
className={classes.textEllipsisNodes}
>
{node.name || node?.node_type?.toString() || 'node'}{' '}
</Typography>
<InfoOutlinedIcon
className={classes.infoIcon}
className={classes.clickableIcon}
onClick={(event) => {
handlePopoverOpen(event.target, node)
}}
Expand Down
161 changes: 89 additions & 72 deletions webapp/src/components/InformationCard/ProducerInformation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import LaunchIcon from '@mui/icons-material/Launch'
import CopyToClipboard from '../CopyToClipboard'

const ProducerInformation = ({ info, classes, t }) => {

const [anchorEl, setAnchorEl] = useState(null)
const [OtherRes, SetOtherRes] = useState(null)
const [data, setData] = useState([])
Expand All @@ -27,40 +26,43 @@ const ProducerInformation = ({ info, classes, t }) => {
const handleOther = (target) => {
SetOtherRes(target)
}

const open = Boolean(anchorEl)
const openRes = Boolean(OtherRes)

const id = open ? 'simple-popover' : undefined

return (
<>
<div className={classes.borderLine}>
<div className={classes.rowWrapper}>
<div className={classes.flex}>
{info?.location && info?.location !== 'N/A' && (
<Typography variant="body1">
{`${t('location')}: `}
{`${t('location')}: ${info?.location} `}
<CountryFlag code={info?.country} />
</Typography>
)}
</div>

<div className={classes.flex}>
{!!info?.website ? (
<>
<>
<Typography variant="body1" className={classes.textEllipsis}>
{t('website')}
{t('website')}:
</Typography>
<LaunchIcon
onClick={() => window.open(info?.website, '_blank')}
className={classes.clickableIcon}
/>
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleClick(e.target, info?.website)
}}
/>
<Tooltip title={t('openLink')} arrow placement="left">
<LaunchIcon
onClick={() => window.open(info?.website, '_blank')}
className={classes.clickableIcon}
/>
</Tooltip>
<Tooltip title={t('moreInfo')} arrow placement="right">
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleClick(e.target, info?.website)
}}
/>
</Tooltip>
</>
<Popover
className={classes.shadow}
Expand All @@ -75,7 +77,7 @@ const ProducerInformation = ({ info, classes, t }) => {
>
<div className={classes.flex}>
<div className={classes.popoverStyle}>
<Link target="_blank" rel="noopener noreferrer">
<Link href={data} target="_blank" rel="noopener noreferrer">
{data}
</Link>
</div>
Expand All @@ -89,24 +91,28 @@ const ProducerInformation = ({ info, classes, t }) => {
</Typography>
)}
</div>

<div className={classes.flex}>
{!!info?.email ? (
<>
<>
<Typography variant="body1" className={classes.textEllipsis}>
{t('email')}
{t('email')}:
</Typography>
<LaunchIcon
onClick={() => (window.location = `mailto:${info.email}`)}
className={classes.clickableIcon}
/>
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleClick(e.target, info?.email)
}}
/>
<Tooltip title={t('openLink')} arrow placement="left">
<LaunchIcon
onClick={() => (window.location = `mailto:${info.email}`)}
className={classes.clickableIcon}
/>
</Tooltip>

<Tooltip title={t('moreInfo')} arrow placement="right">
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleClick(e.target, info?.email)
}}
/>
</Tooltip>
</>
<Popover
className={classes.shadow}
Expand All @@ -121,7 +127,7 @@ const ProducerInformation = ({ info, classes, t }) => {
>
<div className={classes.flex}>
<div className={classes.popoverStyle}>
<Link target="_blank" rel="noopener noreferrer">
<Link href={data} target="_blank" rel="noopener noreferrer">
{data}
</Link>
</div>
Expand All @@ -135,24 +141,27 @@ const ProducerInformation = ({ info, classes, t }) => {
</Typography>
)}
</div>

<div className={classes.flex}>
{!!info?.ownership ? (
<>
<>
<Typography variant="body1" className={classes.textEllipsis}>
{t('ownershipDisclosure')}
{t('ownershipDisclosure')}:
</Typography>
<LaunchIcon
onClick={() => window.open(info?.ownership, '_blank')}
className={classes.clickableIcon}
/>
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleClick(e.target, info?.ownership)
}}
/>
<Tooltip title={t('openLink')} arrow placement="left">
<LaunchIcon
onClick={() => window.open(info?.ownership, '_blank')}
className={classes.clickableIcon}
/>
</Tooltip>
<Tooltip title={t('moreInfo')} arrow placement="right">
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleClick(e.target, info?.ownership)
}}
/>
</Tooltip>
</>
<Popover
className={classes.shadow}
Expand All @@ -167,7 +176,7 @@ const ProducerInformation = ({ info, classes, t }) => {
>
<div className={classes.flex}>
<div className={classes.popoverStyle}>
<Link target="_blank" rel="noopener noreferrer">
<Link href={data} target="_blank" rel="noopener noreferrer">
{data}
</Link>
</div>
Expand All @@ -177,24 +186,27 @@ const ProducerInformation = ({ info, classes, t }) => {
</>
) : null}
</div>

<div className={classes.flex}>
{!!info?.code_of_conduct ? (
<>
<>
<Typography variant="body1" className={classes.textEllipsis}>
{t('codeofconduct')}
{t('codeofconduct')}:
</Typography>
<LaunchIcon
onClick={() => window.open(info?.code_of_conduct, '_blank')}
className={classes.clickableIcon}
/>
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleClick(e.target, info?.code_of_conduct)
}}
/>
<Tooltip title={t('openLink')} arrow placement="left">
<LaunchIcon
onClick={() => window.open(info?.code_of_conduct, '_blank')}
className={classes.clickableIcon}
/>
</Tooltip>
<Tooltip title={t('moreInfo')} arrow placement="right">
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleClick(e.target, info?.code_of_conduct)
}}
/>
</Tooltip>
</>
<Popover
className={classes.shadow}
Expand All @@ -209,7 +221,7 @@ const ProducerInformation = ({ info, classes, t }) => {
>
<div className={classes.flex}>
<div className={classes.popoverStyle}>
<Link target="_blank" rel="noopener noreferrer">
<Link href={data} target="_blank" rel="noopener noreferrer">
{data}
</Link>
</div>
Expand All @@ -219,19 +231,21 @@ const ProducerInformation = ({ info, classes, t }) => {
</>
) : null}
</div>

<div className={classes.flex}>
{!!info?.chain ? (
<>
<>
<Typography variant="body1" className={classes.textEllipsis}>
{t('chainResources')}
{t('chainResources')}:
</Typography>
<LaunchIcon
onClick={() => window.open(info?.chain, '_blank')}
className={classes.clickableIcon}
/>
<Tooltip title="test" arrow placement='right'>
<Tooltip title={t('openLink')} arrow placement="left">
<LaunchIcon
onClick={() => window.open(info?.chain, '_blank')}
className={classes.clickableIcon}
/>
</Tooltip>

<Tooltip title={t('moreInfo')} arrow placement="right">
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
Expand All @@ -253,7 +267,7 @@ const ProducerInformation = ({ info, classes, t }) => {
>
<div className={classes.flex}>
<div className={classes.popoverStyle}>
<Link target="_blank" rel="noopener noreferrer">
<Link href={data} target="_blank" rel="noopener noreferrer">
{data}
</Link>
</div>
Expand All @@ -263,18 +277,21 @@ const ProducerInformation = ({ info, classes, t }) => {
</>
) : null}
</div>
<div className={classes.flex}>
<div className={classes.rowWrapper}>
{!!info?.otherResources.length && (
<>
<Typography variant="body1" className={classes.textEllipsis}>
{t('otherResources')}
{t('otherResources')}:
</Typography>
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleOther(e.target)
}}
/>
<Tooltip title={t('moreInfo')} arrow placement="right">
<InfoOutlinedIcon
className={classes.clickableIcon}
onClick={(e) => {
handleOther(e.target)
}}
/>
</Tooltip>

<Popover
className={classes.shadow}
id={id}
Expand Down
25 changes: 18 additions & 7 deletions webapp/src/components/InformationCard/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,6 @@ export default (theme) => ({
},
'& .MuiSvgIcon-root': {
marginLeft: theme.spacing(1),
fontSize: 15,
},
[theme.breakpoints.up('lg')]: {
width: 140,
Expand Down Expand Up @@ -261,9 +260,10 @@ export default (theme) => ({
},
infoIcon: {
cursor: 'pointer',
flexDirection: 'flex-end',
},
dt: {
maxWidth: 100
maxWidth: 100,
},
shadow: {
'& .MuiPaper-root': {
Expand All @@ -273,7 +273,7 @@ export default (theme) => ({
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
borderRadius: '5px'
borderRadius: '5px',
},
},
infoItems: {
Expand All @@ -298,18 +298,29 @@ export default (theme) => ({
},
flex: {
display: 'flex',
alignItems: 'center'
alignItems: 'center',
justifyContent: 'space-between',
},
clickableIcon: {
cursor: 'pointer',
'&:hover': {
color: '#1565c0',
color: '#1565c0',
},
},
popoverStyle: {
paddingRight: theme.spacing(2),
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
}

},
textEllipsisNodes: {
margin: theme.spacing(1, 0),
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
width: '100%',
'& a': {
marginLeft: theme.spacing(1),
},
},
})
Loading

0 comments on commit d6ae9b4

Please sign in to comment.