feature: position icons and add tooltip

bob-collective · Jun 27, 2024 · 89e9313 · 89e9313
1 parent ac77d19
commit 89e9313
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 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
@@ -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
@@ -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' ? <MedalGold /> : medal === 'silver' ? <MedalSilver /> : <MedalBronze />;
+    const capitalisedMedalName = medal.charAt(0).toUpperCase() + medal.slice(1);
+
+    return isMobile ? (
+      <Popover>
+        <PopoverTrigger>
+          <Button isIconOnly size='s' variant='ghost'>
+            {medalIcon}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverBody>
+            <P size='s'>{capitalisedMedalName} harvester.</P>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    ) : (
+      <Tooltip color='primary' label={<P size='s'>{capitalisedMedalName} harvester.</P>}>
+        {medalIcon}
+      </Tooltip>
+    );
+  };
+
   return (
     <StyledPartnerCard
       // NOTE: onPress used here to prevent popover triggering navigation
@@ -72,7 +99,7 @@ const PartnerCard = ({
       </StyledLiveTag>
       <Flex direction='column' gap='md'>
         <Flex alignItems='center' direction='row' gap='md'>
-          {medal && <P>{medal}</P>}
+          {medal && <StyledIconWrapper>{getMedalIcon()}</StyledIconWrapper>}
           {typeof logoSrc === 'string' ? (
             <img
               alt={name}

diff --git a/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerSection.tsx b/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerSection.tsx
@@ -73,20 +73,14 @@ const PartnersSection = () => {
         {t('fusion.partners.title')}
       </H2>
       <P color='grey-200'> {t('fusion.partners.content')}</P>
-      <StyledCard alignItems='center' direction='row' gap='md'>
-        <InformationCircle />
-        <P size='s' weight='semibold'>
-          {t('fusion.partners.alert')}
-        </P>
-      </StyledCard>
       {isLoading ? (
         <Flex direction='row' justifyContent='center' marginTop='8xl'>
           <Spinner size='36' thickness={5} />
         </Flex>
       ) : (
         <>
           <H3 size='lg' weight='semibold'>
-            Top Harvesters by Hour
+            Top Harvesters
           </H3>
           <StyledGrid>
             {topHarvesters?.map((item, idx) => (
@@ -110,7 +104,7 @@ const PartnersSection = () => {
             ))}
           </StyledGrid>
           <H3 size='lg' weight='semibold'>
-            Other Projects
+            Other Harvesters
           </H3>
           <StyledGrid>
             {otherProjects?.map((item, idx) => (
@@ -134,6 +128,12 @@ const PartnersSection = () => {
           </StyledGrid>
         </>
       )}
+      <StyledCard alignItems='center' direction='row' gap='md'>
+        <InformationCircle />
+        <P size='s' weight='semibold'>
+          {t('fusion.partners.alert')}
+        </P>
+      </StyledCard>
     </Flex>
   );
 };

diff --git 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<SVGSVGElement, IconProps>((props, ref) => (
   <Icon ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
     <path
-      d='M9.59402 3.94C9.68402 3.398 10.154 3 10.704 3H13.297C13.847 3 14.317 3.398 14.407 3.94L14.62 5.221C14.683 5.595 14.933 5.907 15.265 6.091C15.339 6.131 15.412 6.174 15.485 6.218C15.809 6.414 16.205 6.475 16.56 6.342L17.777 5.886C18.0264 5.79221 18.301 5.78998 18.5519 5.87971C18.8028 5.96945 19.0137 6.14531 19.147 6.376L20.443 8.623C20.5761 8.8537 20.623 9.12413 20.5754 9.38617C20.5278 9.6482 20.3887 9.88485 20.183 10.054L19.18 10.881C18.887 11.121 18.742 11.494 18.749 11.873C18.7506 11.958 18.7506 12.043 18.749 12.128C18.742 12.506 18.887 12.878 19.179 13.118L20.184 13.946C20.608 14.296 20.718 14.9 20.444 15.376L19.146 17.623C19.0129 17.8536 18.8022 18.0296 18.5515 18.1195C18.3009 18.2094 18.0264 18.2074 17.777 18.114L16.56 17.658C16.205 17.525 15.81 17.586 15.484 17.782C15.4115 17.8261 15.3382 17.8688 15.264 17.91C14.933 18.093 14.683 18.405 14.62 18.779L14.407 20.059C14.317 20.602 13.847 21 13.297 21H10.703C10.153 21 9.68302 20.602 9.59302 20.06L9.38002 18.779C9.31802 18.405 9.06802 18.093 8.73602 17.909C8.66187 17.8681 8.58852 17.8258 8.51602 17.782C8.19102 17.586 7.79602 17.525 7.44002 17.658L6.22302 18.114C5.97375 18.2075 5.69939 18.2096 5.44872 18.1199C5.19806 18.0302 4.98733 17.8545 4.85402 17.624L3.55702 15.377C3.42397 15.1463 3.37707 14.8759 3.42468 14.6138C3.47229 14.3518 3.61131 14.1152 3.81702 13.946L4.82102 13.119C5.11302 12.879 5.25802 12.506 5.25102 12.127C5.24946 12.042 5.24946 11.957 5.25102 11.872C5.25802 11.494 5.11302 11.122 4.82102 10.882L3.81702 10.054C3.61156 9.88489 3.4727 9.64843 3.42509 9.38662C3.37749 9.12481 3.42424 8.8546 3.55702 8.624L4.85402 6.377C4.98721 6.14614 5.19803 5.97006 5.44894 5.88014C5.69984 5.79021 5.97451 5.79229 6.22402 5.886L7.44002 6.342C7.79602 6.475 8.19102 6.414 8.51602 6.218C8.58802 6.174 8.66202 6.131 8.73602 6.09C9.06802 5.907 9.31802 5.595 9.38002 5.221L9.59402 3.94V3.94Z'
-      stroke='currentColor'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      strokeWidth='1.5'
-    />
-    <path
-      d='M15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12V12Z'
-      stroke='currentColor'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      strokeWidth='1.5'
+      d='M19.4693 8.45548L19.425 8.79081L19.7198 8.95672C20.7986 9.56398 21.5 10.7193 21.5 12C21.5 13.2807 20.7986 14.436 19.7198 15.0433L19.425 15.2092L19.4693 15.5445C19.4896 15.698 19.5 15.8501 19.5 16C19.5 18.0797 17.6203 19.7469 15.5453 19.4694L15.2092 19.4245L15.0431 19.72C14.4369 20.7986 13.2818 21.5 12 21.5C10.7182 21.5 9.56306 20.7986 8.95687 19.72L8.79081 19.4246L8.45486 19.4694C6.37509 19.7469 4.5002 18.0802 4.5 16.0003C4.50022 15.8481 4.51044 15.6961 4.5306 15.5452L4.57545 15.2094L4.28025 15.0433C3.20136 14.436 2.5 13.2807 2.5 12C2.5 10.7193 3.20136 9.56398 4.28025 8.95672L4.57501 8.79081L4.53069 8.45548C4.5104 8.30198 4.5 8.14989 4.5 8C4.5 5.91895 6.37575 4.2488 8.45384 4.53047L8.79044 4.57609L8.95687 4.27998C9.56306 3.20145 10.7182 2.5 12 2.5C13.2818 2.5 14.4369 3.20145 15.0431 4.27998L15.2096 4.57618L15.5463 4.53045C17.6196 4.24884 19.5 5.91924 19.5 8C19.5 8.14989 19.4896 8.30198 19.4693 8.45548Z'
+      fill='url(#paint0_linear_698_2341)'
+      stroke='url(#paint1_linear_698_2341)'
     />
+    <g filter='url(#filter0_d_698_2341)'>
+      <path
+        d='M11.9332 16.1193C11.2969 16.1193 10.7301 16.0099 10.233 15.7912C9.73864 15.5696 9.34801 15.2656 9.06108 14.8793C8.77699 14.4901 8.63068 14.0412 8.62216 13.5327H10.4801C10.4915 13.7457 10.5611 13.9332 10.6889 14.0952C10.8196 14.2543 10.9929 14.3778 11.2088 14.4659C11.4247 14.554 11.6676 14.598 11.9375 14.598C12.2188 14.598 12.4673 14.5483 12.6832 14.4489C12.8991 14.3494 13.0682 14.2116 13.1903 14.0355C13.3125 13.8594 13.3736 13.6562 13.3736 13.4261C13.3736 13.1932 13.3082 12.9872 13.1776 12.8082C13.0497 12.6264 12.8651 12.4844 12.6236 12.3821C12.3849 12.2798 12.1009 12.2287 11.7713 12.2287H10.9574V10.8736H11.7713C12.0497 10.8736 12.2955 10.8253 12.5085 10.7287C12.7244 10.6321 12.892 10.4986 13.0114 10.3281C13.1307 10.1548 13.1903 9.95312 13.1903 9.72301C13.1903 9.50426 13.1378 9.3125 13.0327 9.14773C12.9304 8.98011 12.7855 8.84943 12.598 8.75568C12.4134 8.66193 12.1974 8.61506 11.9503 8.61506C11.7003 8.61506 11.4716 8.66051 11.2642 8.75142C11.0568 8.83949 10.8906 8.96591 10.7656 9.13068C10.6406 9.29545 10.5739 9.48864 10.5653 9.71023H8.79688C8.8054 9.20739 8.94886 8.7642 9.22727 8.38068C9.50568 7.99716 9.88068 7.69744 10.3523 7.48153C10.8267 7.26278 11.3622 7.15341 11.9588 7.15341C12.5611 7.15341 13.0881 7.26278 13.5398 7.48153C13.9915 7.70028 14.3423 7.99574 14.5923 8.3679C14.8452 8.73722 14.9702 9.15199 14.9673 9.61222C14.9702 10.1009 14.8182 10.5085 14.5114 10.8352C14.2074 11.1619 13.8111 11.3693 13.3224 11.4574V11.5256C13.9645 11.608 14.4531 11.831 14.7884 12.1946C15.1264 12.5554 15.294 13.0071 15.2912 13.5497C15.294 14.0469 15.1506 14.4886 14.8608 14.875C14.5739 15.2614 14.1776 15.5653 13.6719 15.7869C13.1662 16.0085 12.5866 16.1193 11.9332 16.1193Z'
+        fill='white'
+      />
+    </g>
+    <defs>
+      <filter
+        colorInterpolationFilters='sRGB'
+        filterUnits='userSpaceOnUse'
+        height='9.96606'
+        id='filter0_d_698_2341'
+        width='6.67334'
+        x='8.62207'
+        y='7.15332'
+      >
+        <feFlood floodOpacity='0' result='BackgroundImageFix' />
+        <feColorMatrix
+          in='SourceAlpha'
+          result='hardAlpha'
+          type='matrix'
+          values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+        />
+        <feOffset dy='1' />
+        <feComposite in2='hardAlpha' operator='out' />
+        <feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.41 0' />
+        <feBlend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_698_2341' />
+        <feBlend in='SourceGraphic' in2='effect1_dropShadow_698_2341' mode='normal' result='shape' />
+      </filter>
+      <linearGradient gradientUnits='userSpaceOnUse' id='paint0_linear_698_2341' x1='12' x2='12' y1='2' y2='22'>
+        <stop offset='0.045' stopColor='#6E310A' />
+        <stop offset='0.26' stopColor='#72380A' />
+        <stop offset='0.48' stopColor='#DF5555' />
+        <stop offset='0.815' stopColor='#753C09' />
+        <stop offset='1' stopColor='#A22A05' />
+      </linearGradient>
+      <linearGradient gradientUnits='userSpaceOnUse' id='paint1_linear_698_2341' x1='12' x2='12' y1='2' y2='22'>
+        <stop stopColor='#D3524C' />
+        <stop offset='1' stopColor='#9D4626' />
+      </linearGradient>
+    </defs>
   </Icon>
 ));
 
-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
@@ -5,22 +5,53 @@ import { Icon, IconProps } from '../components';
 const MedalGold = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
     <path
-      d='M9.59402 3.94C9.68402 3.398 10.154 3 10.704 3H13.297C13.847 3 14.317 3.398 14.407 3.94L14.62 5.221C14.683 5.595 14.933 5.907 15.265 6.091C15.339 6.131 15.412 6.174 15.485 6.218C15.809 6.414 16.205 6.475 16.56 6.342L17.777 5.886C18.0264 5.79221 18.301 5.78998 18.5519 5.87971C18.8028 5.96945 19.0137 6.14531 19.147 6.376L20.443 8.623C20.5761 8.8537 20.623 9.12413 20.5754 9.38617C20.5278 9.6482 20.3887 9.88485 20.183 10.054L19.18 10.881C18.887 11.121 18.742 11.494 18.749 11.873C18.7506 11.958 18.7506 12.043 18.749 12.128C18.742 12.506 18.887 12.878 19.179 13.118L20.184 13.946C20.608 14.296 20.718 14.9 20.444 15.376L19.146 17.623C19.0129 17.8536 18.8022 18.0296 18.5515 18.1195C18.3009 18.2094 18.0264 18.2074 17.777 18.114L16.56 17.658C16.205 17.525 15.81 17.586 15.484 17.782C15.4115 17.8261 15.3382 17.8688 15.264 17.91C14.933 18.093 14.683 18.405 14.62 18.779L14.407 20.059C14.317 20.602 13.847 21 13.297 21H10.703C10.153 21 9.68302 20.602 9.59302 20.06L9.38002 18.779C9.31802 18.405 9.06802 18.093 8.73602 17.909C8.66187 17.8681 8.58852 17.8258 8.51602 17.782C8.19102 17.586 7.79602 17.525 7.44002 17.658L6.22302 18.114C5.97375 18.2075 5.69939 18.2096 5.44872 18.1199C5.19806 18.0302 4.98733 17.8545 4.85402 17.624L3.55702 15.377C3.42397 15.1463 3.37707 14.8759 3.42468 14.6138C3.47229 14.3518 3.61131 14.1152 3.81702 13.946L4.82102 13.119C5.11302 12.879 5.25802 12.506 5.25102 12.127C5.24946 12.042 5.24946 11.957 5.25102 11.872C5.25802 11.494 5.11302 11.122 4.82102 10.882L3.81702 10.054C3.61156 9.88489 3.4727 9.64843 3.42509 9.38662C3.37749 9.12481 3.42424 8.8546 3.55702 8.624L4.85402 6.377C4.98721 6.14614 5.19803 5.97006 5.44894 5.88014C5.69984 5.79021 5.97451 5.79229 6.22402 5.886L7.44002 6.342C7.79602 6.475 8.19102 6.414 8.51602 6.218C8.58802 6.174 8.66202 6.131 8.73602 6.09C9.06802 5.907 9.31802 5.595 9.38002 5.221L9.59402 3.94V3.94Z'
-      stroke='currentColor'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      strokeWidth='1.5'
-    />
-    <path
-      d='M15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12V12Z'
-      stroke='currentColor'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      strokeWidth='1.5'
+      d='M19.4693 8.45548L19.425 8.79081L19.7198 8.95672C20.7986 9.56398 21.5 10.7193 21.5 12C21.5 13.2807 20.7986 14.436 19.7198 15.0433L19.425 15.2092L19.4693 15.5445C19.4896 15.698 19.5 15.8501 19.5 16C19.5 18.0797 17.6203 19.7469 15.5453 19.4694L15.2092 19.4245L15.0431 19.72C14.4369 20.7986 13.2818 21.5 12 21.5C10.7182 21.5 9.56306 20.7986 8.95687 19.72L8.79081 19.4246L8.45486 19.4694C6.37509 19.7469 4.5002 18.0802 4.5 16.0003C4.50022 15.8481 4.51044 15.6961 4.5306 15.5452L4.57545 15.2094L4.28025 15.0433C3.20136 14.436 2.5 13.2807 2.5 12C2.5 10.7193 3.20136 9.56398 4.28025 8.95672L4.57501 8.79081L4.53069 8.45548C4.5104 8.30198 4.5 8.14989 4.5 8C4.5 5.91895 6.37575 4.2488 8.45384 4.53047L8.79044 4.57609L8.95687 4.27998C9.56306 3.20145 10.7182 2.5 12 2.5C13.2818 2.5 14.4369 3.20145 15.0431 4.27998L15.2096 4.57618L15.5463 4.53045C17.6196 4.24884 19.5 5.91924 19.5 8C19.5 8.14989 19.4896 8.30198 19.4693 8.45548Z'
+      fill='url(#paint0_linear_698_2338)'
+      stroke='url(#paint1_linear_698_2338)'
     />
+    <g filter='url(#filter0_d_698_2338)'>
+      <path
+        d='M13.5043 7.27273V16H11.6591V9.02415H11.608L9.60938 10.277V8.64062L11.7699 7.27273H13.5043Z'
+        fill='white'
+      />
+    </g>
+    <defs>
+      <filter
+        colorInterpolationFilters='sRGB'
+        filterUnits='userSpaceOnUse'
+        height='9.72729'
+        id='filter0_d_698_2338'
+        width='3.89502'
+        x='9.60938'
+        y='7.27271'
+      >
+        <feFlood floodOpacity='0' result='BackgroundImageFix' />
+        <feColorMatrix
+          in='SourceAlpha'
+          result='hardAlpha'
+          type='matrix'
+          values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+        />
+        <feOffset dy='1' />
+        <feComposite in2='hardAlpha' operator='out' />
+        <feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.91 0' />
+        <feBlend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_698_2338' />
+        <feBlend in='SourceGraphic' in2='effect1_dropShadow_698_2338' mode='normal' result='shape' />
+      </filter>
+      <linearGradient gradientUnits='userSpaceOnUse' id='paint0_linear_698_2338' x1='12' x2='12' y1='2' y2='22'>
+        <stop offset='0.045' stopColor='#FF6301' />
+        <stop offset='0.335' stopColor='#FFB777' />
+        <stop offset='0.67' stopColor='#FF7F29' />
+        <stop offset='1' stopColor='#FFB777' />
+      </linearGradient>
+      <linearGradient gradientUnits='userSpaceOnUse' id='paint1_linear_698_2338' x1='12' x2='12' y1='2' y2='22'>
+        <stop stopColor='#FFA65F' />
+        <stop offset='1' stopColor='#FFCFAD' />
+      </linearGradient>
+    </defs>
   </Icon>
 ));
 
-MedalGold.displayName = 'Cog';
+MedalGold.displayName = 'Gold Medal';
 
 export { MedalGold };