fix: Small screen improvements (pancakeswap#1389)

ssowellsvt · May 31, 2021 · d852b8b · d852b8b
1 parent 9fed49a
commit d852b8b
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 20 deletions.
diff --git a/src/views/Pools/components/PoolsTable/ActionPanel/ActionPanel.tsx b/src/views/Pools/components/PoolsTable/ActionPanel/ActionPanel.tsx
@@ -34,13 +34,13 @@ const expandAnimation = keyframes`
     max-height: 0px;
   }
   to {
-    max-height: 500px;
+    max-height: 700px;
   }
 `
 
 const collapseAnimation = keyframes`
   from {
-    max-height: 500px;
+    max-height: 700px;
   }
   to {
     max-height: 0px;
@@ -61,7 +61,7 @@ const StyledActionPanel = styled.div<{ expanded: boolean }>`
   display: flex;
   flex-direction: column-reverse;
   justify-content: center;
-  padding: 24px;
+  padding: 12px;
 
   ${({ theme }) => theme.mediaQueries.lg} {
     flex-direction: row;
@@ -110,6 +110,7 @@ const ActionPanel: React.FC<ActionPanelProps> = ({ account, pool, userDataLoaded
   const { t } = useTranslation()
   const { currentBlock } = useBlock()
   const { isXs, isSm, isMd } = breakpoints
+  const showSubtitle = isXs || (isSm && sousId === 0)
 
   const { shouldShowBlockCountdown, blocksUntilStart, blocksRemaining, hasPoolStarted, blocksToDisplay } =
     getPoolBlockInfo(pool, currentBlock)
@@ -186,7 +187,7 @@ const ActionPanel: React.FC<ActionPanelProps> = ({ account, pool, userDataLoaded
   const aprRow = (
     <Flex justifyContent="space-between" alignItems="center" mb="8px">
       <Text>{isAutoVault ? t('APY') : t('APR')}</Text>
-      <Apr pool={pool} performanceFee={isAutoVault ? performanceFeeAsDecimal : 0} />
+      <Apr pool={pool} showIcon performanceFee={isAutoVault ? performanceFeeAsDecimal : 0} />
     </Flex>
   )
 
@@ -246,6 +247,11 @@ const ActionPanel: React.FC<ActionPanelProps> = ({ account, pool, userDataLoaded
         </span>
       </InfoSection>
       <ActionContainer>
+        {showSubtitle && (
+          <Text mt="4px" mb="16px" color="textSubtle">
+            {isAutoVault ? t('Automatic restaking') : `${t('Earn')} CAKE ${t('Stake').toLocaleLowerCase()} CAKE`}
+          </Text>
+        )}
         <Harvest {...pool} userDataLoaded={userDataLoaded} />
         <Stake pool={pool} userDataLoaded={userDataLoaded} />
       </ActionContainer>

diff --git a/src/views/Pools/components/PoolsTable/Apr.tsx b/src/views/Pools/components/PoolsTable/Apr.tsx
@@ -9,10 +9,11 @@ import { getAprData } from 'views/Pools/helpers'
 
 interface AprProps extends FlexProps {
   pool: Pool
+  showIcon: boolean
   performanceFee?: number
 }
 
-const Apr: React.FC<AprProps> = ({ pool, performanceFee = 0, ...props }) => {
+const Apr: React.FC<AprProps> = ({ pool, showIcon, performanceFee = 0, ...props }) => {
   const { stakingToken, earningToken, isFinished, earningTokenPrice, apr } = pool
   const { t } = useTranslation()
 
@@ -54,7 +55,7 @@ const Apr: React.FC<AprProps> = ({ pool, performanceFee = 0, ...props }) => {
               unit="%"
             />
           </Flex>
-          {!isFinished && (
+          {!isFinished && showIcon && (
             <Flex>
               <IconButton
                 onClick={openRoiModal}

diff --git a/src/views/Pools/components/PoolsTable/Cells/AprCell.tsx b/src/views/Pools/components/PoolsTable/Cells/AprCell.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Text } from '@pancakeswap/uikit'
+import { Text, useMatchBreakpoints } from '@pancakeswap/uikit'
 import { Pool } from 'state/types'
 import { useTranslation } from 'contexts/Localization'
 import BaseCell, { CellContent } from './BaseCell'
@@ -12,22 +12,28 @@ interface AprCellProps {
 }
 
 const StyledCell = styled(BaseCell)`
-  flex: 1 0 120px;
+  flex: 1 0 50px;
   ${({ theme }) => theme.mediaQueries.md} {
     flex: 0 0 120px;
   }
 `
 
 const AprCell: React.FC<AprCellProps> = ({ pool, performanceFee }) => {
   const { t } = useTranslation()
+  const { isXs, isSm } = useMatchBreakpoints()
   const { isAutoVault } = pool
   return (
     <StyledCell role="cell">
       <CellContent>
         <Text fontSize="12px" color="textSubtle" textAlign="left">
           {isAutoVault ? t('APY') : t('APR')}
         </Text>
-        <Apr pool={pool} performanceFee={isAutoVault ? performanceFee : 0} alignItems="flex-start" />
+        <Apr
+          pool={pool}
+          performanceFee={isAutoVault ? performanceFee : 0}
+          showIcon={!isXs && !isSm}
+          alignItems="flex-start"
+        />
       </CellContent>
     </StyledCell>
   )

diff --git a/src/views/Pools/components/PoolsTable/Cells/EarningsCell.tsx b/src/views/Pools/components/PoolsTable/Cells/EarningsCell.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Skeleton, Text, useTooltip, HelpIcon, Flex, Box, useModal } from '@pancakeswap/uikit'
+import { Skeleton, Text, useTooltip, HelpIcon, Flex, Box, useModal, useMatchBreakpoints } from '@pancakeswap/uikit'
 import { Pool } from 'state/types'
 import BigNumber from 'bignumber.js'
 import { PoolCategory } from 'config/constants/types'
@@ -32,6 +32,7 @@ const HelpIconWrapper = styled.div`
 
 const EarningsCell: React.FC<EarningsCellProps> = ({ pool, account, userDataLoaded }) => {
   const { t } = useTranslation()
+  const { isXs, isSm } = useMatchBreakpoints()
   const { sousId, earningToken, poolCategory, userData, earningTokenPrice, isAutoVault } = pool
   const isManualCakePool = sousId === 0
 
@@ -109,8 +110,8 @@ const EarningsCell: React.FC<EarningsCellProps> = ({ pool, account, userDataLoad
               <Box mr="8px" height="32px" onClick={!isAutoVault && hasEarnings ? handleEarningsClick : undefined}>
                 <Balance
                   mt="4px"
-                  bold
-                  fontSize="16px"
+                  bold={!isXs && !isSm}
+                  fontSize={isXs || isSm ? '14px' : '16px'}
                   color={hasEarnings ? 'primary' : 'textDisabled'}
                   decimals={hasEarnings ? 5 : 1}
                   value={hasEarnings ? earningTokenBalance : 0}
@@ -131,7 +132,7 @@ const EarningsCell: React.FC<EarningsCellProps> = ({ pool, account, userDataLoad
                   </Text>
                 )}
               </Box>
-              {isAutoVault && (
+              {isAutoVault && !isXs && !isSm && (
                 <HelpIconWrapper ref={targetRef}>
                   <HelpIcon color="textSubtle" />
                 </HelpIconWrapper>

diff --git a/src/views/Pools/components/PoolsTable/Cells/ExpandActionCell.tsx b/src/views/Pools/components/PoolsTable/Cells/ExpandActionCell.tsx
@@ -14,7 +14,7 @@ const StyledCell = styled(BaseCell)`
   justify-content: flex-end;
   align-items: center;
   flex: 1;
-  padding-right: 16px;
+  padding-right: 12px;
   padding-left: 0px;
   ${({ theme }) => theme.mediaQueries.md} {
     flex: 0 0 120px;

diff --git a/src/views/Pools/components/PoolsTable/Cells/NameCell.tsx b/src/views/Pools/components/PoolsTable/Cells/NameCell.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import BigNumber from 'bignumber.js'
-import { Text, Image } from '@pancakeswap/uikit'
+import { Text, Image, useMatchBreakpoints } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 import { useCakeVault } from 'state/hooks'
 import { Pool } from 'state/types'
@@ -15,7 +15,7 @@ interface NameCellProps {
 const StyledCell = styled(BaseCell)`
   flex: 5;
   flex-direction: row;
-  padding-left: 16px;
+  padding-left: 12px;
   ${({ theme }) => theme.mediaQueries.sm} {
     flex: 1 0 150px;
     padding-left: 32px;
@@ -24,6 +24,7 @@ const StyledCell = styled(BaseCell)`
 
 const NameCell: React.FC<NameCellProps> = ({ pool }) => {
   const { t } = useTranslation()
+  const { isXs, isSm } = useMatchBreakpoints()
   const { sousId, stakingToken, earningToken, userData, isFinished, isAutoVault } = pool
   const {
     userData: { userShares },
@@ -42,6 +43,7 @@ const NameCell: React.FC<NameCellProps> = ({ pool }) => {
 
   let title = `${t('Earn')} ${earningTokenSymbol}`
   let subtitle = `${t('Stake')} ${stakingTokenSymbol}`
+  const showSubtitle = sousId !== 0 || (sousId === 0 && !isXs && !isSm)
 
   if (isAutoVault) {
     title = t('Auto CAKE')
@@ -60,10 +62,14 @@ const NameCell: React.FC<NameCellProps> = ({ pool }) => {
             {t('Staked')}
           </Text>
         )}
-        <Text bold>{title}</Text>
-        <Text fontSize="12px" color="textSubtle">
-          {subtitle}
+        <Text bold={!isXs && !isSm} small={isXs || isSm}>
+          {title}
         </Text>
+        {showSubtitle && (
+          <Text fontSize="12px" color="textSubtle">
+            {subtitle}
+          </Text>
+        )}
       </CellContent>
     </StyledCell>
   )

diff --git a/src/views/Pools/components/PoolsTable/PoolRow.tsx b/src/views/Pools/components/PoolsTable/PoolRow.tsx
@@ -43,7 +43,7 @@ const PoolRow: React.FC<PoolRowProps> = ({ pool, account, userDataLoaded }) => {
       <StyledRow role="row" onClick={toggleExpanded}>
         <NameCell pool={pool} />
         <EarningsCell pool={pool} account={account} userDataLoaded={userDataLoaded} />
-        {(isMd || isLg || isXl) && <AprCell pool={pool} performanceFee={performanceFeeAsDecimal} />}
+        <AprCell pool={pool} performanceFee={performanceFeeAsDecimal} />
         {(isLg || isXl) && <TotalStakedCell pool={pool} />}
         {isXl && <EndsInCell pool={pool} />}
         <ExpandActionCell expanded={expanded} isFullLayout={isMd || isLg || isXl} />