From 36225fbd0fa403c9fab29e7ed8790774e4ff0864 Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Thu, 26 Sep 2024 11:22:36 -0600
Subject: [PATCH] final tweaks

---
 src/pages/Markets/components/AssetCard.tsx    | 37 +++++++----
 .../Markets/components/CardWithSparkline.tsx  | 64 +++++++++----------
 src/pages/Markets/components/LpCard.tsx       | 28 ++++----
 src/pages/Markets/components/MarketsRow.tsx   |  2 +-
 4 files changed, 70 insertions(+), 61 deletions(-)

diff --git a/src/pages/Markets/components/AssetCard.tsx b/src/pages/Markets/components/AssetCard.tsx
index 4964dce2a8e..667291cbd8b 100644
--- 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,18 +28,26 @@ 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>
@@ -47,13 +55,16 @@ export const AssetCard: React.FC<AssetCardProps> = ({ assetId, onClick }) => {
         </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
index 5e8406dda5f..70d0f14bd19 100644
--- 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
index 364cc7ab27f..f02b7e73e69 100644
--- 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,6 +62,7 @@ export const LpCard: React.FC<LpCardProps> = ({ assetId, apy, volume24H, onClick
                 textOverflow='ellipsis'
                 overflow='hidden'
                 width='100%'
+                mb={1}
               >
                 {asset.name}
               </CText>
@@ -68,7 +70,7 @@ export const LpCard: React.FC<LpCardProps> = ({ assetId, apy, volume24H, onClick
             <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
index 883f3718cdb..c6bb600476c 100644
--- 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>
     )