diff --git a/src/app/pages/TokenDashboardPage/ImageListItemImage.tsx b/src/app/pages/TokenDashboardPage/ImageListItemImage.tsx index 5eaa1050a0..82b639aaab 100644 --- a/src/app/pages/TokenDashboardPage/ImageListItemImage.tsx +++ b/src/app/pages/TokenDashboardPage/ImageListItemImage.tsx @@ -1,12 +1,16 @@ import { FC } from 'react' +import { useTranslation } from 'react-i18next' import { Link as RouterLink } from 'react-router-dom' +import Box from '@mui/material/Box' import Link from '@mui/material/Link' +import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser' import { styled } from '@mui/material/styles' import { isNftImageUrlValid, processNftImageUrl } from 'app/utils/nft-images' import { NoPreview } from '../../components/NoPreview' import { getNftInstanceLabel } from '../../utils/nft' import { EvmNft } from '../../../oasis-nexus/api' import { useScreenSize } from 'app/hooks/useScreensize' +import { COLORS } from 'styles/theme/colors' const minMobileSize = '150px' const mobileSize = '100%' @@ -20,6 +24,29 @@ const StyledImage = styled('img', { width: isMobile ? mobileSize : imageSize, height: isMobile ? mobileSize : imageSize, objectFit: 'cover', + transition: 'opacity 250ms ease-in-out', + '&:hover, &:focus-visible': { + opacity: 0.15, + }, +})) + +const StyledBox = styled(Box)(() => ({ + position: 'absolute', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '100%', + fontSize: '14px', + fontWeight: 500, + color: COLORS.white, + transition: 'opacity, background-color 250ms ease-in-out', + opacity: 0, + '&:hover, &:focus-visible': { + opacity: 1, + backgroundColor: 'rgba(0,0,0,0.8)', + }, })) type ImageListItemImageProps = { @@ -28,10 +55,11 @@ type ImageListItemImageProps = { } export const ImageListItemImage: FC = ({ instance, to }) => { + const { t } = useTranslation() const { isMobile } = useScreenSize() return ( - + {isNftImageUrlValid(instance.image) ? ( = ({ instance, to } ) : ( )} + + + {t('common.view')} + ) } diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts index 62f07f9618..e88baef867 100644 --- a/src/styles/theme/defaultTheme.ts +++ b/src/styles/theme/defaultTheme.ts @@ -547,9 +547,10 @@ export const defaultTheme = createTheme({ borderColor: COLORS.brandExtraDark, borderRadius: 8, overflow: 'hidden', - transition: 'box-shadow 250ms ease-in-out', + transition: 'border-color, box-shadow 250ms ease-in-out', '&:hover, &:focus-visible': { boxShadow: '0px 8px 8px 0px rgba(0, 0, 0, 0.15)', + borderColor: COLORS.brandDark, }, }, },