Merits dashboard minor changes (#2637)

move hint, remove label

ui/pages/RewardsDashboard.tsx

@@ -67,12 +67,6 @@ const RewardsDashboard = () => {
             description="Claim your daily Merits and any Merits received from referrals."
             direction="column-reverse"
             contentAfter={ <DailyRewardClaimButton/> }
-          >
-            <RewardsDashboardCardValue
-              label="Total balance"
-              value={ balancesQuery.data?.total || 'N/A' }
-              isLoading={ balancesQuery.isPending }
-              withIcon
             hint={ (
               <>
                 Total number of Merits earned from all activities.{ ' ' }
@@ -81,6 +75,11 @@ const RewardsDashboard = () => {
                 </LinkExternal>
               </>
             ) }
+          >
+            <RewardsDashboardCardValue
+              value={ balancesQuery.data?.total || 'N/A' }
+              isLoading={ balancesQuery.isPending }
+              withIcon
             />
           </RewardsDashboardCard>
           <RewardsDashboardCard
@@ -89,7 +88,6 @@ const RewardsDashboard = () => {
             direction="column-reverse"
           >
             <RewardsDashboardCardValue
-              label="Referrals"
               value={ referralsQuery.data?.referrals ?
                 `${ referralsQuery.data?.referrals } user${ Number(referralsQuery.data?.referrals) === 1 ? '' : 's' }` :
                 'N/A'
@@ -111,16 +109,6 @@ const RewardsDashboard = () => {
                 </LinkExternal>
               </>
             ) }
-            direction="column-reverse"
-          >
-            <RewardsDashboardCardValue
-              label="Streak"
-              value={
-                dailyRewardQuery.data?.streak ?
-                  `${ dailyRewardQuery.data?.streak } day${ Number(dailyRewardQuery.data?.streak) === 1 ? '' : 's' }` :
-                  'N/A'
-              }
-              isLoading={ dailyRewardQuery.isPending }
             hint={ (
               <>
                 See the{ ' ' }
@@ -133,6 +121,15 @@ const RewardsDashboard = () => {
                 to learn how your streak number affects daily rewards
               </>
             ) }
+            direction="column-reverse"
+          >
+            <RewardsDashboardCardValue
+              value={
+                dailyRewardQuery.data?.streak ?
+                  `${ dailyRewardQuery.data?.streak } day${ Number(dailyRewardQuery.data?.streak) === 1 ? '' : 's' }` :
+                  'N/A'
+              }
+              isLoading={ dailyRewardQuery.isPending }
             />
           </RewardsDashboardCard>
         </Flex>

ui/rewards/dashboard/RewardsDashboardCard.tsx

 import { Flex, Text, useColorModeValue, Tag } from '@chakra-ui/react';
 import React from 'react';
 
+import HintPopover from 'ui/shared/HintPopover';
+
 type Props = {
-  title?: string;
+  title: string;
   description: string | React.ReactNode;
+  hint?: string | React.ReactNode;
   availableSoon?: boolean;
   blurFilter?: boolean;
   contentAfter?: React.ReactNode;
@@ -13,7 +16,7 @@ type Props = {
 };
 
 const RewardsDashboardCard = ({
-  title, description, availableSoon, contentAfter,
+  title, description, hint, availableSoon, contentAfter,
   direction = 'column', children, blurFilter,
 }: Props) => {
   return (
@@ -34,12 +37,19 @@ const RewardsDashboardCard = ({
         p={{ base: 1.5, md: 3 }}
         w={{ base: 'full', md: direction === 'row' ? '340px' : 'full' }}
       >
-        { title && (
         <Flex alignItems="center" gap={ 2 }>
           <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="500">{ title }</Text>
+          { hint && (
+            <HintPopover
+              label={ hint }
+              popoverContentProps={{
+                maxW: { base: 'calc(100vw - 8px)', lg: '210px' },
+              }}
+              popoverBodyProps={{ textAlign: 'center' }}
+            />
+          ) }
           { availableSoon && <Tag colorScheme="blue">Available soon</Tag> }
         </Flex>
-        ) }
         <Text as="div" fontSize="sm">
           { description }
         </Text>

ui/rewards/dashboard/RewardsDashboardCardValue.tsx

@@ -7,7 +7,7 @@ import HintPopover from 'ui/shared/HintPopover';
 import MeritsIcon from '../MeritsIcon';
 
 type Props = {
-  label: string;
+  label?: string;
   value: number | string | undefined;
   withIcon?: boolean;
   hint?: string | React.ReactNode;
@@ -16,6 +16,7 @@ type Props = {
 
 const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading }: Props) => (
   <Flex key={ label } flexDirection="column" alignItems="center" gap={ 2 }>
+    { label && (
       <Flex alignItems="center" gap={ 1 }>
         { hint && (
           <HintPopover
@@ -28,6 +29,7 @@ const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading }: Props
           { label }
         </Text>
       </Flex>
+    ) }
     <Skeleton
       isLoaded={ !isLoading }
       display="flex"