Improve list item image hover state

oasisprotocol · Dec 13, 2023 · c9986e5 · c9986e5
1 parent b484d4c
commit c9986e5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git 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<ImageListItemImageProps> = ({ instance, to }) => {
+  const { t } = useTranslation()
   const { isMobile } = useScreenSize()
 
   return (
-    <Link component={RouterLink} to={to}>
+    <Link component={RouterLink} to={to} sx={{ display: 'flex', position: 'relative' }}>
       {isNftImageUrlValid(instance.image) ? (
         <StyledImage
           src={processNftImageUrl(instance.image)}
@@ -42,6 +70,10 @@ export const ImageListItemImage: FC<ImageListItemImageProps> = ({ instance, to }
       ) : (
         <NoPreview placeholderSize={imageSize} />
       )}
+      <StyledBox gap={3}>
+        <OpenInBrowserIcon sx={{ fontSize: '40px' }} />
+        {t('common.view')}
+      </StyledBox>
     </Link>
   )
 }
diff --git 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,
           },
         },
       },