final tweaks

shapeshift · Sep 26, 2024 · 36225fb · 36225fb
1 parent 777a59d
commit 36225fb
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 61 deletions.
diff --git a/src/pages/Markets/components/AssetCard.tsx b/src/pages/Markets/components/AssetCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Card, CardBody, Flex, Text } from '@chakra-ui/react'
+import { Box, Button, Card, CardBody, Flex, Text, Tooltip } from '@chakra-ui/react'
 import type { AssetId } from '@shapeshiftoss/caip'
 import { useCallback } from 'react'
 import { Amount } from 'components/Amount/Amount'
@@ -28,32 +28,43 @@ export const AssetCard: React.FC<AssetCardProps> = ({ assetId, onClick }) => {
         as={Flex}
         flexDirection='column'
         justifyContent='space-between'
-        py={4}
-        px={4}
+        py={5}
+        px={5}
         width='100%'
         height='100%'
       >
         <Flex align='center'>
-          <AssetIcon src={asset.icon} boxSize='40px' mr={3} />
+          <AssetIcon assetId={asset.assetId} boxSize='40px' mr={3} />
           <Box textAlign='left' overflow='hidden' width='100%'>
-            <Text fontWeight='bold' fontSize='lg' textOverflow='ellipsis' overflow='hidden'>
-              {asset.name}
-            </Text>
-            <Text fontSize='sm' color='gray.500' textOverflow='ellipsis' overflow='hidden'>
+            <Tooltip label={asset.name} placement='top-start'>
+              <Text fontWeight='bold' fontSize='lg' textOverflow='ellipsis' overflow='hidden'>
+                {asset.name}
+              </Text>
+            </Tooltip>
+            <Text
+              fontSize='sm'
+              color='text.subtle'
+              textOverflow='ellipsis'
+              overflow='hidden'
+              mt={1}
+            >
               {asset.symbol}
             </Text>
           </Box>
           <WatchAssetButton assetId={assetId} alignSelf='flex-start' />
         </Flex>
         <Box textAlign='left'>
           <Amount.Fiat value={marketData.price} fontWeight='bold' fontSize='2xl' />
-          <Flex align='center' mt={1}>
-            <Amount.Percent
-              autoColor
-              value={bnOrZero(changePercent24Hr).times(0.01).toString()}
-              fontWeight='medium'
+          <Amount.Percent
+            autoColor
+            value={bnOrZero(changePercent24Hr).times(0.01).toString()}
+            fontWeight='medium'
+            mt={1}
+            />
             />
           </Flex>
+          />
+          </Flex>
         </Box>
       </CardBody>
     </Card>

diff --git a/src/pages/Markets/components/CardWithSparkline.tsx b/src/pages/Markets/components/CardWithSparkline.tsx
@@ -40,57 +40,51 @@ export const CardWithSparkline: React.FC<{
         as={Flex}
         flexDirection='column'
         justifyContent='space-between'
-        py={6}
+        py={5}
         width='100%'
         height='100%'
       >
         <Box>
-          <Flex width='100%' justify='space-between' mt={4}>
-            <Flex alignItems='center' justifyContent='space-between' flexWrap='wrap' mb={4}>
-              <Flex align='center' mb={2}>
-                <AssetIcon pairProps={assetPairProps} assetId={assetId} size='md' mr={3} />
-                <Box textAlign='left'>
-                  <Text fontWeight='bold' fontSize='lg'>
-                    {asset.name}
-                  </Text>
-                  <Text fontSize='sm' color='gray.500'>
-                    {asset.symbol}
-                  </Text>
-                  <Amount.Fiat value={marketData.price} fontWeight='bold' fontSize='2xl' />
-                  <Flex align='center' mt={1}>
-                    <Amount.Percent
-                      autoColor
-                      value={bnOrZero(changePercent24Hr).times(0.01).toString()}
-                      fontWeight='medium'
-                    />
-                  </Flex>
-                </Box>
-              </Flex>
+          <Flex width='100%' align='center' justify='space-between' mb={4}>
+            <Flex width='100%'>
+              <AssetIcon pairProps={assetPairProps} assetId={assetId} size='md' mr={3} />
+              <Box textAlign='left'>
+                <Text fontWeight='bold' fontSize='lg' mb={1}>
+                  {asset.name}
+                </Text>
+                <Text fontSize='sm' color='text.subtle'>
+                  {asset.symbol}
+                </Text>
+              </Box>
+              <WatchAssetButton assetId={assetId} alignSelf='flex-start' />
             </Flex>
-            <WatchAssetButton assetId={assetId} />
+            <Box textAlign='right'>
+              <Amount.Fiat value={marketData.price} fontWeight='bold' fontSize='2xl' mb={1} />
+              <Amount.Percent
+                autoColor
+                value={bnOrZero(changePercent24Hr).times(0.01).toString()}
+                fontWeight='medium'
+              />
+            </Box>
           </Flex>
-          <Box mb={4} overflow='hidden' textAlign='left'>
-            <Text
+          <Box overflow='hidden' textAlign='left'>
+            <ParsedHtml
               fontSize='sm'
-              color='gray.500'
-              lineHeight='19px'
+              color='text.subtle'
+              lineHeight='24px'
               whiteSpace='break-spaces'
               noOfLines={3}
-            >
-              <ParsedHtml
-                color='text.subtle'
-                innerHtml={markdownLinkToHTML(asset.description || '')}
-              />
-            </Text>
+              innerHtml={markdownLinkToHTML(asset.description || '')}
+            />
           </Box>
         </Box>
-        <Box height='50%' m={-6}>
+        <Box mx={-6}>
           <PriceChart
             assetId={assetId}
             timeframe={HistoryTimeframe.DAY}
             percentChange={changePercent24Hr}
             setPercentChange={noop}
-            chartHeight='120px'
+            chartHeight='150px'
             hideAxis={true}
           />
         </Box>

diff --git a/src/pages/Markets/components/LpCard.tsx b/src/pages/Markets/components/LpCard.tsx
@@ -46,13 +46,14 @@ export const LpCard: React.FC<LpCardProps> = ({ assetId, apy, volume24H, onClick
         as={Flex}
         flexDirection='column'
         justifyContent='space-between'
-        p={2}
+        py={5}
+        px={5}
         width='100%'
         height='100%'
       >
-        <Flex align='center' mb={4}>
-          <AssetIcon assetId={asset.assetId} pairProps={pairProps} flexShrink={0} />
-          <Box textAlign='left' ml={3} overflow='hidden' width='100%'>
+        <Flex align='center'>
+          <AssetIcon assetId={asset.assetId} pairProps={pairProps} flexShrink={0} mr={3} />
+          <Box textAlign='left' overflow='hidden' width='100%'>
             <Tooltip label={asset.name} placement='top-start'>
               <CText
                 fontWeight='bold'
@@ -61,14 +62,15 @@ export const LpCard: React.FC<LpCardProps> = ({ assetId, apy, volume24H, onClick
                 textOverflow='ellipsis'
                 overflow='hidden'
                 width='100%'
+                mb={1}
               >
                 {asset.name}
               </CText>
             </Tooltip>
             <Tooltip label={asset.symbol} placement='bottom-start'>
               <CText
                 fontSize='sm'
-                color='gray.500'
+                color='text.subtle'
                 whiteSpace='nowrap'
                 textOverflow='ellipsis'
                 overflow='hidden'
@@ -78,29 +80,31 @@ export const LpCard: React.FC<LpCardProps> = ({ assetId, apy, volume24H, onClick
               </CText>
             </Tooltip>
           </Box>
-          <WatchAssetButton assetId={assetId} />
+          <WatchAssetButton assetId={assetId} alignSelf='flex-start' />
         </Flex>
         <Flex justify='space-between'>
           <Box textAlign='left'>
             <Amount.Percent
               autoColor
               value={bnOrZero(apy).times(0.01).toString()}
-              fontWeight='medium'
+              fontWeight='bold'
+              fontSize='2xl'
+              mb={1}
             />
-            <Text translation='common.apy' fontSize='sm' color='gray.500' />
+            <Text translation='common.apy' color='text.subtle' />
           </Box>
           <Box textAlign='right'>
             {bnOrZero(volume24H).isPositive() ? (
-              <Amount.Fiat fontWeight='bold' fontSize='md' value={volume24H} />
+              <Amount.Fiat fontWeight='bold' fontSize='2xl' value={volume24H} />
             ) : (
-              <CText fontSize='sm' color='gray.500'>
+              <CText fontWeight='bold' fontSize='2xl'>
                 N/A
               </CText>
             )}
             <Text
               translation='assets.assetDetails.assetHeader.24HrVolume'
-              fontSize='sm'
-              color='gray.500'
+              color='text.subtle'
+              mt={1}
             />
           </Box>
         </Flex>

diff --git a/src/pages/Markets/components/MarketsRow.tsx b/src/pages/Markets/components/MarketsRow.tsx
@@ -73,7 +73,7 @@ export const MarketsRow: React.FC<MarketsRowProps> = ({
     }
 
     return (
-      <Text fontSize='sm' color='gray.500'>
+      <Text fontSize='sm' color='text.subtle'>
         {subtitle}
       </Text>
     )