From 89e93132cbadaa6e10354374f3963a8afe0e6af4 Mon Sep 17 00:00:00 2001 From: Tom Jeatt Date: Thu, 27 Jun 2024 15:46:35 +0100 Subject: [PATCH] feature: position icons and add tooltip --- .../PartnersSection/PartnerCard.style.tsx | 8 ++- .../PartnersSection/PartnerCard.tsx | 31 +++++++++- .../PartnersSection/PartnerSection.tsx | 16 ++--- packages/ui/src/icons/MedalBronze.tsx | 58 ++++++++++++++----- packages/ui/src/icons/MedalGold.tsx | 57 +++++++++++++----- packages/ui/src/icons/MedalSilver.tsx | 57 +++++++++++++----- 6 files changed, 177 insertions(+), 50 deletions(-) diff --git a/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.style.tsx b/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.style.tsx index 99abee5c..f136b9dd 100644 --- a/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.style.tsx +++ b/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.style.tsx @@ -48,4 +48,10 @@ const StyledLiveTag = styled(Card)` top: ${({ theme }) => theme.spacing('s')}; `; -export { StyledCategoryTag, StyledGrid, StyledCard, StyledPartnerCard, StyledLiveTag }; +const StyledIconWrapper = styled('div')` + position: absolute; + top: 4px; + left: 4px; +`; + +export { StyledCategoryTag, StyledGrid, StyledCard, StyledPartnerCard, StyledLiveTag, StyledIconWrapper }; diff --git a/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx b/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx index f4d10616..cb43ef81 100644 --- a/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx +++ b/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx @@ -7,6 +7,9 @@ import { Dt, Flex, H3, + MedalBronze, + MedalGold, + MedalSilver, P, Popover, PopoverBody, @@ -19,7 +22,7 @@ import { import { ReactNode } from 'react'; import { useTheme } from 'styled-components'; -import { StyledCategoryTag, StyledLiveTag, StyledPartnerCard } from './PartnerCard.style'; +import { StyledCategoryTag, StyledIconWrapper, StyledLiveTag, StyledPartnerCard } from './PartnerCard.style'; type Props = { category: string; @@ -52,6 +55,30 @@ const PartnerCard = ({ const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('md')); + const getMedalIcon = () => { + const medalIcon = medal === 'gold' ? : medal === 'silver' ? : ; + const capitalisedMedalName = medal.charAt(0).toUpperCase() + medal.slice(1); + + return isMobile ? ( + + + + + + +

{capitalisedMedalName} harvester.

+ + + + ) : ( + {capitalisedMedalName} harvester.

}> + {medalIcon} + + ); + }; + return ( - {medal &&

{medal}

} + {medal && {getMedalIcon()}} {typeof logoSrc === 'string' ? ( {name} { {t('fusion.partners.title')}

{t('fusion.partners.content')}

- - -

- {t('fusion.partners.alert')} -

- {isLoading ? ( @@ -86,7 +80,7 @@ const PartnersSection = () => { ) : ( <>

- Top Harvesters by Hour + Top Harvesters

{topHarvesters?.map((item, idx) => ( @@ -110,7 +104,7 @@ const PartnersSection = () => { ))}

- Other Projects + Other Harvesters

{otherProjects?.map((item, idx) => ( @@ -134,6 +128,12 @@ const PartnersSection = () => { )} + + +

+ {t('fusion.partners.alert')} +

+ ); }; diff --git a/packages/ui/src/icons/MedalBronze.tsx b/packages/ui/src/icons/MedalBronze.tsx index e6bc7fc3..cb3fc062 100644 --- a/packages/ui/src/icons/MedalBronze.tsx +++ b/packages/ui/src/icons/MedalBronze.tsx @@ -5,22 +5,54 @@ import { Icon, IconProps } from '../components'; const MedalBronze = forwardRef((props, ref) => ( - + + + + + + + + + + + + + + + + + + + + + + + + + )); -MedalBronze.displayName = 'Cog'; +MedalBronze.displayName = 'Bronze Medal'; export { MedalBronze }; diff --git a/packages/ui/src/icons/MedalGold.tsx b/packages/ui/src/icons/MedalGold.tsx index c3a589a1..87ac2bcd 100644 --- a/packages/ui/src/icons/MedalGold.tsx +++ b/packages/ui/src/icons/MedalGold.tsx @@ -5,22 +5,53 @@ import { Icon, IconProps } from '../components'; const MedalGold = forwardRef((props, ref) => ( - + + + + + + + + + + + + + + + + + + + + + + + + )); -MedalGold.displayName = 'Cog'; +MedalGold.displayName = 'Gold Medal'; export { MedalGold }; diff --git a/packages/ui/src/icons/MedalSilver.tsx b/packages/ui/src/icons/MedalSilver.tsx index 6a24fd9e..e3a20053 100644 --- a/packages/ui/src/icons/MedalSilver.tsx +++ b/packages/ui/src/icons/MedalSilver.tsx @@ -5,22 +5,53 @@ import { Icon, IconProps } from '../components'; const MedalSilver = forwardRef((props, ref) => ( - + + + + + + + + + + + + + + + + + + + + + + + + )); -MedalSilver.displayName = 'Cog'; +MedalSilver.displayName = 'Silver Medal'; export { MedalSilver };