replace AvailableSoonLabel with Tag

ui/rewards/AvailableSoonLabel.tsx

-import { Flex, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const AvailableSoonLabel = () => (
-  <Flex
-    px={ 1 }
-    borderRadius="sm"
-    backgroundColor={ useColorModeValue('blue.50', 'blue.800') }
-    color={ useColorModeValue('blue.500', 'blue.100') }
-    fontSize="sm"
-    fontWeight="500"
-    h={ 6 }
-    alignItems="center"
-  >
-    Available soon
-  </Flex>
-);
-
-export default AvailableSoonLabel;

ui/rewards/RewardsDashboardCard.tsx

-import { Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Text, useColorModeValue, Tag } from '@chakra-ui/react';
 import React from 'react';
 
-import AvailableSoonLabel from './AvailableSoonLabel';
-
 type Props = {
   title?: string;
   description: string | React.ReactNode;
@@ -39,7 +37,7 @@ const RewardsDashboardCard = ({
         { title && (
           <Flex alignItems="center" gap={ 2 }>
             <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="500">{ title }</Text>
-            { availableSoon && <AvailableSoonLabel/> }
+            { availableSoon && <Tag colorScheme="blue">Available soon</Tag> }
           </Flex>
         ) }
         <Text as="div" fontSize="sm">