fix: update points table content alignment (#190)

DLC-link · Oct 4, 2024 · 986df7c · 986df7c
1 parent f2cd72d
commit 986df7c
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 28 deletions.
diff --git a/src/app/components/points/components/points-table/components/points-table-item.tsx b/src/app/components/points/components/points-table/components/points-table-item.tsx
@@ -1,11 +1,12 @@
-import { HStack, Image, Text } from '@chakra-ui/react';
+import { HStack, Image, Text, useBreakpointValue } from '@chakra-ui/react';
 import { CustomSkeleton } from '@components/custom-skeleton/custom-skeleton';
 import { ProtocolRewards } from '@models/points.models';
 import { unshiftValue } from 'dlc-btc-lib/utilities';
 
 import { formatNumber } from '@shared/utils';
 
 export function PointsTableItem(pointsTableItem: ProtocolRewards): React.JSX.Element {
+  const isMobile = useBreakpointValue({ base: true, md: false });
   if (!pointsTableItem) return <CustomSkeleton height={'35px'} />;
 
   const { name, points, currentTokens, multiplier } = pointsTableItem;
@@ -22,30 +23,55 @@ export function PointsTableItem(pointsTableItem: ProtocolRewards): React.JSX.Ele
       borderColor={'border.white.01'}
       justifyContent={'space-between'}
     >
-      <HStack w={'25%'}>
-        <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlc BTC logo'} boxSize={'25px'} />
-        <Text color={'white'} fontSize={'sm'} fontWeight={800}>
-          {unshiftValue(currentTokens)}
-        </Text>
-      </HStack>
-      <HStack w={'50%'}>
-        <Text color={'white'} fontSize={'sm'} fontWeight={800}>
-          {`${formatNumber(points)} Points`}
-        </Text>
-        <Text
-          bgGradient={`linear(to-r, #AC50EF, #7059FB, #2ECFF6)`}
-          bgClip="text"
-          fontSize={'sm'}
-          fontWeight={800}
-        >
-          {`(${multiplier}x)`}
-        </Text>
-      </HStack>
-      <HStack w={'25%'}>
-        <Text color={'white'} fontSize={'sm'}>
-          {name}
-        </Text>
-      </HStack>
+      {isMobile ? (
+        <HStack w={'100%'}>
+          <HStack w={'100%'}>
+            <Text color={'white'} fontSize={'sm'}>
+              {name}
+            </Text>
+          </HStack>
+          <HStack w={'50%'}>
+            <Text color={'white'} fontSize={'sm'} fontWeight={800}>
+              {formatNumber(points)}
+            </Text>
+            <Text
+              bgGradient={`linear(to-r, #AC50EF, #7059FB, #2ECFF6)`}
+              bgClip="text"
+              fontSize={'sm'}
+              fontWeight={800}
+            >
+              {`(${multiplier}x)`}
+            </Text>
+          </HStack>
+        </HStack>
+      ) : (
+        <>
+          <HStack w={'25%'}>
+            <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlc BTC logo'} boxSize={'25px'} />
+            <Text color={'white'} fontSize={'sm'} fontWeight={800}>
+              {unshiftValue(currentTokens)}
+            </Text>
+          </HStack>
+          <HStack w={'50%'}>
+            <Text color={'white'} fontSize={'sm'} fontWeight={800}>
+              {`${formatNumber(points)} Points`}
+            </Text>
+            <Text
+              bgGradient={`linear(to-r, #AC50EF, #7059FB, #2ECFF6)`}
+              bgClip="text"
+              fontSize={'sm'}
+              fontWeight={800}
+            >
+              {`(${multiplier}x)`}
+            </Text>
+          </HStack>
+          <HStack w={'25%'}>
+            <Text color={'white'} fontSize={'sm'}>
+              {name}
+            </Text>
+          </HStack>
+        </>
+      )}
     </HStack>
   );
 }
diff --git a/src/app/components/points/components/points-table/points-table.tsx b/src/app/components/points/components/points-table/points-table.tsx
@@ -17,9 +17,18 @@ export function PointsTable({ items }: PointsTableProps): React.JSX.Element {
   return (
     <GenericTableLayout height={`${dynamicHeight}px`} width={'50%'} isMobile={isMobile}>
       <GenericTableHeader>
-        <GenericTableHeaderText w={'25%'}>dlcBTC Used</GenericTableHeaderText>
-        <GenericTableHeaderText w={'50%'}>Points Earned</GenericTableHeaderText>
-        <GenericTableHeaderText w={'25%'}>DeFi Protocol</GenericTableHeaderText>
+        {isMobile ? (
+          <>
+            <GenericTableHeaderText w={'50%'}>DeFi Protocol</GenericTableHeaderText>
+            <GenericTableHeaderText w={'50%'}>Points Earned</GenericTableHeaderText>
+          </>
+        ) : (
+          <>
+            <GenericTableHeaderText w={'25%'}>dlcBTC Used</GenericTableHeaderText>
+            <GenericTableHeaderText w={'50%'}>Points Earned</GenericTableHeaderText>
+            <GenericTableHeaderText w={'25%'}>DeFi Protocol</GenericTableHeaderText>
+          </>
+        )}
       </GenericTableHeader>
       <Skeleton isLoaded={items !== undefined} height={'50px'} w={'100%'}>
         <GenericTableBody>