DAPP-1967 added lozenge tags support in staking activities

push-protocol · Nov 12, 2024 · b80e538 · b80e538
1 parent bb50fdd
commit b80e538
Showing 1 changed file with 26 additions and 3 deletions.
diff --git a/src/modules/rewards/components/StakePushActivitiesListItem.tsx b/src/modules/rewards/components/StakePushActivitiesListItem.tsx
@@ -6,7 +6,7 @@ import { Activity, StakeActivityResponse, UsersActivity } from 'queries';
 import { useAccount } from 'hooks';
 
 // components
-import { Box, Button, Lock, Multiplier, RewardsBell, Skeleton, Text } from 'blocks';
+import { Box, Button, Lock, Lozenge, Multiplier, RewardsBell, Skeleton, Star, Text } from 'blocks';
 import { RewardsActivityIcon } from './RewardsActivityIcon';
 import { ActivityButton } from './ActivityButton';
 
@@ -93,23 +93,46 @@ const StakePushActivitiesListItem: FC<StakeActivitiesItemProps> = ({
             gap={{ ml: 'spacing-sm', initial: 'spacing-xxxs' }}
             alignItems={{ ml: 'center' }}
           >
-            <Box display={{ ml: 'block', initial: 'none' }}>
+            <Box
+              display={{ ml: 'flex', initial: 'none' }}
+              flexDirection="column"
+              alignItems="center"
+            >
               <Text
                 color="text-primary"
                 variant="h6-bold"
                 textAlign="center"
               >
                 {activity?.activityTitle}
               </Text>
+              {activity?.tags?.map((tag) => (
+                <Lozenge
+                  size="small"
+                  icon={<Star />}
+                >
+                  {tag}
+                </Lozenge>
+              ))}
             </Box>
-            <Box display={{ ml: 'none', initial: 'block' }}>
+            <Box
+              display={{ ml: 'none', initial: 'flex' }}
+              gap="spacing-xs"
+            >
               <Text
                 color="text-primary"
                 variant="bl-semibold"
                 textAlign="center"
               >
                 {activity?.activityTitle}
               </Text>
+              {activity?.tags?.map((tag) => (
+                <Lozenge
+                  size="small"
+                  icon={<Star />}
+                >
+                  {tag}
+                </Lozenge>
+              ))}
             </Box>
 
             {activity.points > 0 && (