fix: ui

KyberNetwork · Jul 27, 2023 · 38623eb · 38623eb
1 parent 75bce71
commit 38623eb
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git a/src/assets/images/bg_share_my_earning.png b/src/assets/images/bg_share_my_earning.png
diff --git a/src/assets/images/bg_share_my_earning_mb.png b/src/assets/images/bg_share_my_earning_mb.png
diff --git a/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx b/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx
@@ -17,7 +17,7 @@ import Divider from 'components/Divider'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { FarmTag } from 'components/FarmTag'
 import Loader from 'components/Loader'
-import { MouseoverTooltip } from 'components/Tooltip'
+import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import { APRTooltipContent } from 'components/YieldPools/FarmingPoolAPRCell'
 import { APP_PATHS, ELASTIC_BASE_FEE_UNIT, PROMM_ANALYTICS_URL } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
@@ -333,7 +333,13 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId, positionEarnings, p
           <MobileStat mobileView={mobileView}>
             <StatItem label="TVL" value={formatDollarAmount(+poolEarning.totalValueLockedUsd)} />
             <StatItem
-              label="APR"
+              label={
+                <MouseoverTooltip
+                  text={t`Average estimated return based on yearly trading fees from the pool & additional bonus rewards if you participate in the farm`}
+                >
+                  <TextDashed>APR</TextDashed>
+                </MouseoverTooltip>
+              }
               value={
                 <MouseoverTooltip
                   width="fit-content"

diff --git a/src/pages/MyEarnings/ElasticPools/index.tsx b/src/pages/MyEarnings/ElasticPools/index.tsx
@@ -1,5 +1,5 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
-import { Trans } from '@lingui/macro'
+import { Trans, t } from '@lingui/macro'
 import { useMemo } from 'react'
 import { Info } from 'react-feather'
 import { useMedia } from 'react-use'
@@ -8,6 +8,7 @@ import { useGetElasticEarningQuery, useGetElasticLegacyEarningQuery } from 'serv
 import { ElasticPoolEarningWithDetails, ElasticPositionEarningWithDetails } from 'services/earning/types'
 import styled from 'styled-components'
 
+import InfoHelper from 'components/InfoHelper'
 import LoaderWithKyberLogo from 'components/LocalLoader'
 import { EMPTY_ARRAY } from 'constants/index'
 import { VERSION } from 'constants/v2'
@@ -189,7 +190,12 @@ const ElasticPools = () => {
             <Trans>Token Pair | Fee</Trans>
           </Text>
           <Text>TVL</Text>
-          <Text>APR</Text>
+          <Text>
+            APR
+            <InfoHelper
+              text={t`Average estimated return based on yearly trading fees from the pool & additional bonus rewards if you participate in the farm`}
+            />
+          </Text>
           <Text>
             <Trans>Volume (24h)</Trans>
           </Text>

diff --git a/src/pages/MyEarnings/ShareModal.tsx b/src/pages/MyEarnings/ShareModal.tsx
@@ -295,7 +295,7 @@ export default function ShareModal({ isOpen, setIsOpen, title, value, poolInfo }
         <RowBetween>
           {!isMobile && (
             <ButtonWrapper onClick={() => setIsSharePc(!isSharePc)}>
-              <Icon id="devices" size={20} />
+              <Icon id="devices" size={20} style={{ color: theme.subText }} />
             </ButtonWrapper>
           )}
           <ShareContainer>