feat: Show bounty prize on cards

[claudioantonio]

Closes #121

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bug-buster	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 28, 2024 7:37pm

[claudioantonio]

Fixing a missing commit to bring deployment back to normal.

[guidanoli]

The card looks like this now:

But I found the spacing and order of components weird, so I tweaked it a bit:

Here is the diff:

diff --git a/frontend/src/app/explore/page.tsx b/frontend/src/app/explore/page.tsx
index d1da2fa..309118c 100644
--- a/frontend/src/app/explore/page.tsx
+++ b/frontend/src/app/explore/page.tsx
@@ -5,6 +5,7 @@ import {
     Button,
     Center,
     Stack,
+    Space,
     Image,
     Card,
     Flex,
@@ -55,18 +56,19 @@ const Bounty: FC<{
                                 bountyStatus={bountyStatus}
                             />
                         </Group>
-                        <Text>
-                            Total Prize:{" "}
-                            {formatErc20Amount(
-                                token,
-                                totalPrize,
-                                erc20Metadata,
-                            )}
-                        </Text>
                     </Stack>
                     <Text truncate="end" size="xs" c="dimmend">
                         {bounty.description}
                     </Text>
+                    <Space h="sm" />
+                    <Text ta="right">
+                        Total Prize:{" "}
+                        {formatErc20Amount(
+                            token,
+                            totalPrize,
+                            erc20Metadata,
+                        )}
+                    </Text>
                 </Box>
             </Card>
         </Anchor>

What do you think?

[claudioantonio]

It was not looking so ugly to me because it depends on how long the bounty title is.

1. But I do like you proposal. I will adapt.
2. I confess I don't like very much the idea of having the Title and the badges in the same line, wrapping when they don't fit. I will test explicitly putting each information in one line.
3. I think we should remove the description from the card. I don't think that description for real bounties will fit in such small space.

What do you think?

[guidanoli]

I confess I don't like very much the idea of having the Title and the badges in the same line, wrapping when they don't fit. I will test explicitly putting each information in one line.

I agree. Also, is the title truncated with ellipsis if it's too long, or does it break into several lines automatically?

I think we should remove the description from the card. I don't think that description for real bounties will fit in such small space.

The idea was to give a preview of what the bounty is about. But if you think it will not give any information to the user, we can remove it.

[claudioantonio]

I confess I don't like very much the idea of having the Title and the badges in the same line, wrapping when they don't fit. I will test explicitly putting each information in one line.

I agree. Also, is the title truncated with ellipsis if it's too long, or does it break into several lines automatically?

It is truncated with ellipsis.

I think we should remove the description from the card. I don't think that description for real bounties will fit in such small space.

The idea was to give a preview of what the bounty is about. But if you think it will not give any information to the user, we can remove it.

Ok.

[claudioantonio]

Hi @guidanoli , here comes a screenshot of the final result. What do you think?

[guidanoli]

Looks good on my end