dApp: Points card update (#839)

Closes: #802 

This pull request includes various updates to the `AcrePointsCard`
component and some theme adjustments. The key changes involve updating
the imports, adding new assets, modifying styles, and enhancing the user
interface.

### Changes:

* Replaced `Stack` with `Image` in the import statement to include image
assets. (`dapp/src/pages/DashboardPage/AcrePointsCard.tsx`)
* Added new constants for colors and imported
`acrePointsIllustrationSrc` for the Acre Points illustration.
(`dapp/src/pages/DashboardPage/AcrePointsCard.tsx`)
* Changed `TextMd` font weight from `bold` to `medium` for the "Total
Acre points" text. (`dapp/src/pages/DashboardPage/AcrePointsCard.tsx`)
* Updated the `H4` element to use `semibold` font weight and added an
image below the user data skeleton.
(`dapp/src/pages/DashboardPage/AcrePointsCard.tsx`)
* Replaced `Stack` with `HStack` for better alignment and updated styles
for the countdown and button components.
(`dapp/src/pages/DashboardPage/AcrePointsCard.tsx`)

### Note:
Theme colors and button styles is a complex change which might cause
unexpected issues.
Should be handled separately. Card component updates should be handled
separately as well.

### Preview:
<img width="382" alt="image"
src="https://github.com/user-attachments/assets/ea811c2b-0fe5-4248-a6ba-0f3239cbd28a">

<img width="382" alt="image"
src="https://github.com/user-attachments/assets/2c02ee54-2fb8-4395-95c5-ccdbe6df67c0">

<img width="382" alt="image (5)"
src="https://github.com/user-attachments/assets/cca096fc-5567-4cfc-a190-3aa07c047658">

dapp/src/pages/DashboardPage/AcrePointsCard.tsx

@@ -8,7 +8,7 @@ import {
   CardProps,
   HStack,
   Icon,
-  Stack,
+  Image,
   Tooltip,
   VStack,
 } from "@chakra-ui/react"
@@ -20,6 +20,14 @@ import { IconInfoCircle } from "@tabler/icons-react"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import InfoTooltip from "#/components/shared/InfoTooltip"
 import useDebounce from "#/hooks/useDebounce"
+import acrePointsIllustrationSrc from "#/assets/images/acre-points-illustration.png"
+
+// TODO: Define colors as theme value
+const COLOR_TEXT_LIGHT_PRIMARY = "#1C1A16"
+const COLOR_TEXT_LIGHT_TERTIARY = "#7D6A4B"
+// TODO: Update `Button` component theme
+const COLOR_BUTTON_LABEL = "#FBF7EC"
+const COLOR_BUTTON_BACKGROUND = "#33A321"
 
 export default function AcrePointsCard(props: CardProps) {
   const {
@@ -49,7 +57,7 @@ export default function AcrePointsCard(props: CardProps) {
   return (
     <Card px={4} py={5} {...props}>
       <CardHeader p={0} mb={2} as={HStack} justify="space-between">
-        <TextMd fontWeight="bold" color="grey.700">
+        <TextMd fontWeight="medium" color="grey.700">
           Total Acre points
         </TextMd>
 
@@ -64,10 +72,16 @@ export default function AcrePointsCard(props: CardProps) {
 
       <CardBody p={0}>
         <UserDataSkeleton>
-          <H4 mb={2}>{formattedTotalPointsAmount}&nbsp;PTS</H4>
+          <H4 fontWeight="semibold" mb={2}>
+            {formattedTotalPointsAmount}
+          </H4>
+        </UserDataSkeleton>
+
+        <Image src={acrePointsIllustrationSrc} mt={6} />
 
+        <UserDataSkeleton>
           {isDataReady && (
-            <VStack px={4} py={3} spacing={0} rounded="lg" bg="gold.100">
+            <VStack px={4} py={5} spacing={0} rounded="lg" bg="gold.100">
               {isCalculationInProgress ? (
                 <VStack spacing={4}>
                   {!claimableBalance && (
@@ -89,32 +103,29 @@ export default function AcrePointsCard(props: CardProps) {
                   </HStack>
                 </VStack>
               ) : (
-                <Stack
-                  direction={claimableBalance ? "row" : "column"}
-                  spacing={0}
-                >
-                  <TextMd color="grey.500" textAlign="center">
+                <HStack spacing={0}>
+                  <TextMd color={COLOR_TEXT_LIGHT_TERTIARY} textAlign="center">
                     Next drop in
                   </TextMd>
                   <Countdown
                     timestamp={nextDropTimestamp!} // Timestamp presence already checked
                     onCountdownEnd={handleOnCountdownEnd}
-                    size={claimableBalance ? "md" : "2xl"}
-                    display={claimableBalance ? "inline" : "block"}
-                    ml={claimableBalance ? 2 : 0}
-                    mt={claimableBalance ? 0 : 2}
+                    size="md"
+                    ml={1}
+                    color={COLOR_TEXT_LIGHT_PRIMARY}
                   />
-                </Stack>
+                </HStack>
               )}
 
               {claimableBalance && (
                 <Button
-                  mt={3}
+                  mt={5}
                   onClick={debouncedClaimPoints}
                   w="full"
                   colorScheme="green"
-                  color="gold.200"
-                  fontWeight="bold"
+                  bgColor={COLOR_BUTTON_BACKGROUND}
+                  color={COLOR_BUTTON_LABEL}
+                  fontWeight="semibold"
                   size="lg"
                 >
                   Claim {formattedClaimablePointsAmount} PTS

dapp/src/theme/Countdown.ts

@@ -9,13 +9,11 @@ const containerBaseStyle = defineStyle({
 
 const unitBaseStyle = defineStyle({
   display: "inline-block",
-  color: "grey.700",
   whiteSpace: "nowrap",
 })
 
 const separatorBaseStyle = defineStyle({
   display: "inline-block",
-  color: "grey.300",
 })
 
 const multiStyleConfig = createMultiStyleConfigHelpers(PARTS)