fix merits icon

icons/merits_colored.svg

-<svg viewBox="0 0 44 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g filter="url(#a)">
-    <path d="M20.692 8.355a2.614 2.614 0 0 1 2.615 0l9.856 5.69a2.615 2.615 0 0 1 1.307 2.264V27.69c0 .935-.498 1.798-1.307 2.265l-9.856 5.69a2.614 2.614 0 0 1-2.615 0l-9.856-5.69A2.614 2.614 0 0 1 9.53 27.69V16.309c0-.934.498-1.797 1.307-2.264l9.856-5.69Z" fill="url(#b)"/>
-    <path d="M23.787 7.523a3.574 3.574 0 0 0-3.575 0l-9.856 5.69A3.574 3.574 0 0 0 8.57 16.31v11.38c0 1.277.681 2.458 1.787 3.096l9.856 5.69a3.574 3.574 0 0 0 3.575 0l9.856-5.69a3.574 3.574 0 0 0 1.787-3.096V16.31a3.574 3.574 0 0 0-1.787-3.096l-9.856-5.69Z" stroke="#fff" stroke-width="1.92"/>
-  </g>
-  <path d="M20.692 8.355a2.614 2.614 0 0 1 2.615 0l9.856 5.69a2.615 2.615 0 0 1 1.307 2.264V27.69c0 .935-.498 1.798-1.307 2.265l-9.856 5.69a2.614 2.614 0 0 1-2.615 0l-9.856-5.69A2.614 2.614 0 0 1 9.53 27.69V16.309c0-.934.498-1.797 1.307-2.264l9.856-5.69Z" fill="url(#c)"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M20.797 17.078a.838.838 0 0 0-.838-.838h-.8a.838.838 0 0 0-.837.838v.724a.838.838 0 0 1-.838.838h-.406a.838.838 0 0 0-.838.838v7.444c0 .463.375.838.838.838h.8a.838.838 0 0 0 .838-.838v-7.444c0-.463.375-.838.838-.838h.405a.838.838 0 0 0 .838-.838v-.724Zm4.968 0a.838.838 0 0 0-.838-.838h-.8a.838.838 0 0 0-.837.838v.724c0 .463.375.838.837.838h.32c.463 0 .838.375.838.838v7.444c0 .463.375.838.837.838h.8a.838.838 0 0 0 .838-.838v-7.444a.838.838 0 0 0-.838-.838h-.32a.838.838 0 0 1-.837-.838v-.724Zm-2.51 4.594a.838.838 0 0 0-.838-.838h-.8a.838.838 0 0 0-.837.838v2.987c0 .463.375.838.837.838h.8a.838.838 0 0 0 .838-.838v-2.987Z" fill="#fff"/>
+<svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.787 1.923a3.574 3.574 0 0 0-3.574 0l-14.706 8.49a3.574 3.574 0 0 0-1.788 3.096v16.982c0 1.277.682 2.457 1.788 3.095l14.706 8.49a3.574 3.574 0 0 0 3.574 0l14.706-8.49a3.574 3.574 0 0 0 1.788-3.095V13.509a3.574 3.574 0 0 0-1.788-3.095l-14.706-8.49Z" fill="url(#a)" stroke="#fff" stroke-width="1.92"/>
+  <path d="M18.693 2.755a2.614 2.614 0 0 1 2.614 0l14.706 8.49a2.614 2.614 0 0 1 1.308 2.264v16.982c0 .934-.499 1.797-1.308 2.264l-14.706 8.49a2.614 2.614 0 0 1-2.614 0l-14.706-8.49a2.614 2.614 0 0 1-1.308-2.265V13.51c0-.935.499-1.798 1.308-2.265l14.706-8.49Z" fill="url(#b)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.33 15.164c0-.643-.522-1.164-1.164-1.164h-1.111c-.643 0-1.164.521-1.164 1.164v1.006c0 .642-.521 1.163-1.164 1.163h-.563c-.643 0-1.164.521-1.164 1.164v10.34c0 .642.521 1.163 1.164 1.163h1.11c.643 0 1.164-.521 1.164-1.164V18.497c0-.643.521-1.164 1.164-1.164h.564c.642 0 1.163-.52 1.163-1.163v-1.006Zm6.899 0c0-.643-.521-1.164-1.164-1.164h-1.11c-.643 0-1.164.521-1.164 1.164v1.006c0 .642.52 1.163 1.163 1.163h.444c.643 0 1.164.521 1.164 1.164v10.34c0 .642.52 1.163 1.163 1.163h1.111C27.48 30 28 29.479 28 28.836v-10.34c0-.642-.521-1.163-1.164-1.163h-.443a1.164 1.164 0 0 1-1.164-1.163v-1.006Zm-3.486 6.38c0-.642-.521-1.163-1.164-1.163h-1.11c-.643 0-1.164.521-1.164 1.164v4.149c0 .642.52 1.163 1.163 1.163h1.111c.643 0 1.164-.52 1.164-1.163v-4.15Z" fill="#fff"/>
   <defs>
-    <linearGradient id="b" x1="22" y1="7.6" x2="22" y2="36.4" gradientUnits="userSpaceOnUse">
+    <linearGradient id="a" x1="20" y1="2" x2="20" y2="42" gradientUnits="userSpaceOnUse">
       <stop stop-color="#2C5282"/>
       <stop offset="1" stop-color="#153967"/>
     </linearGradient>
-    <linearGradient id="c" x1="22" y1="7.6" x2="22" y2="36.4" gradientUnits="userSpaceOnUse">
+    <linearGradient id="b" x1="20" y1="2" x2="20" y2="42" gradientUnits="userSpaceOnUse">
       <stop stop-color="#008BE4"/>
       <stop offset="1" stop-color="#81C5F1"/>
     </linearGradient>
-    <filter id="a" x="3.609" y="6.084" width="36.781" height="39.831" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-      <feOffset dy="4"/>
-      <feGaussianBlur stdDeviation="2"/>
-      <feComposite in2="hardAlpha" operator="out"/>
-      <feColorMatrix values="0 0 0 0 0.551643 0 0 0 0 0.703233 0 0 0 0 0.800684 0 0 0 0.25 0"/>
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_412_42663"/>
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_412_42663" result="shape"/>
-    </filter>
   </defs>
 </svg>

ui/rewards/MeritsIcon.tsx

+import { Icon, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+// This icon doesn't work properly when it is in the sprite
+// Probably because of the gradient
+// eslint-disable-next-line no-restricted-imports
+import meritsIcon from 'icons/merits_colored.svg';
+
+type Props = {
+  className?: string;
+}
+
+const MeritsIcon = ({ className }: Props) => {
+  const shadow = useColorModeValue('drop-shadow(0px 4px 2px rgba(141, 179, 204, 0.25))', 'none');
+
+  return (
+    <Icon as={ meritsIcon } className={ className } filter={ shadow }/>
+  );
+};
+
+export default chakra(MeritsIcon);

ui/rewards/RewardsDashboardCardValue.tsx

-import { Flex, Text, Icon, Skeleton } from '@chakra-ui/react';
+import { Flex, Text, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-// This icon doesn't work properly when it is in the sprite
-// Probably because of the gradient
-// eslint-disable-next-line no-restricted-imports
-import meritsIcon from 'icons/merits_colored.svg';
 import HintPopover from 'ui/shared/HintPopover';
 
+import MeritsIcon from './MeritsIcon';
+
 type Props = {
   label: string;
   value: number | string | undefined;
@@ -15,31 +13,34 @@ type Props = {
   isLoading?: boolean;
 }
 
-const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading }: Props) => {
-  return (
-    <Flex key={ label } flexDirection="column" alignItems="center" gap={ 2 }>
-      <Flex alignItems="center" gap={ 1 }>
-        { hint && (
-          <HintPopover
-            label={ hint }
-            popoverContentProps={{ maxW: { base: 'calc(100vw - 8px)', lg: '210px' } }}
-            popoverBodyProps={{ textAlign: 'center' }}
-          />
-        ) }
-        <Text fontSize="xs" fontWeight="500" variant="secondary">
-          { label }
-        </Text>
-      </Flex>
-      <Skeleton isLoaded={ !isLoading } display="flex" alignItems="center" justifyContent="center" minW="100px">
-        { withIcon && (
-          <Icon as={ meritsIcon } boxSize={ 12 } mt={ -2 } mb={ -2.5 }/>
-        ) }
-        <Text fontSize={{ base: '24px', md: '32px' }} lineHeight={{ base: '24px', md: 1.5 }} fontWeight="500">
-          { value }
-        </Text>
-      </Skeleton>
+const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading }: Props) => (
+  <Flex key={ label } flexDirection="column" alignItems="center" gap={ 2 }>
+    <Flex alignItems="center" gap={ 1 }>
+      { hint && (
+        <HintPopover
+          label={ hint }
+          popoverContentProps={{ maxW: { base: 'calc(100vw - 8px)', lg: '210px' } }}
+          popoverBodyProps={{ textAlign: 'center' }}
+        />
+      ) }
+      <Text fontSize="xs" fontWeight="500" variant="secondary">
+        { label }
+      </Text>
     </Flex>
-  );
-};
+    <Skeleton
+      isLoaded={ !isLoading }
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      gap={ 2 }
+      minW="100px"
+    >
+      { withIcon && <MeritsIcon boxSize={ 8 }/> }
+      <Text fontSize={{ base: '24px', md: '32px' }} lineHeight={{ base: '24px', md: 1.5 }} fontWeight="500">
+        { value }
+      </Text>
+    </Skeleton>
+  </Flex>
+);
 
 export default RewardsDashboardCard;

ui/rewards/steps/CongratsStepContent.tsx

-import { Text, Box, Flex, Button, Skeleton, Icon } from '@chakra-ui/react';
+import { Text, Box, Flex, Button, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-// This icon doesn't work properly when it is in the sprite
-// Probably because of the gradient
-// eslint-disable-next-line no-restricted-imports
-import meritsIcon from 'icons/merits_colored.svg';
 import { useRewardsContext } from 'lib/contexts/rewards';
 import IconSvg from 'ui/shared/IconSvg';
 
+import MeritsIcon from '../MeritsIcon';
 import ReadOnlyInputWithCopy from '../ReadOnlyInputWithCopy';
 
 type Props = {
@@ -29,10 +26,12 @@ const CongratsStepContent = ({ isReferral }: Props) => {
         alignItems="center"
         background="linear-gradient(254.96deg, #9CD8FF 9.09%, #D0EFFF 88.45%)"
         borderRadius="md"
-        padding={ 2 }
+        p={ 2 }
+        pl={ 8 }
         mb={ 8 }
+        h="90px"
       >
-        <Icon as={ meritsIcon } boxSize="60px" mb={ -1 }/>
+        <MeritsIcon boxSize={ 12 } mr={ 2 }/>
         <Skeleton isLoaded={ !rewardsConfigQuery.isLoading }>
           <Text fontSize="30px" fontWeight="700" color="blue.700">
             +{ rewardsConfigQuery.data?.rewards[ isReferral ? 'registration_with_referral' : 'registration' ] }
@@ -41,7 +40,7 @@ const CongratsStepContent = ({ isReferral }: Props) => {
         { isReferral && (
           <Flex alignItems="center" h="56px">
             <Box w="1px" h="full" bgColor="whiteAlpha.800" mx={ 8 }/>
-            <Flex flexDirection="column" justifyContent="space-between">
+            <Flex flexDirection="column" justifyContent="space-between" gap={ 2 }>
               { [
                 {
                   title: 'Registration',
@@ -53,13 +52,13 @@ const CongratsStepContent = ({ isReferral }: Props) => {
                 },
               ].map(({ title, value }) => (
                 <Flex key={ title } alignItems="center">
-                  <Icon as={ meritsIcon } boxSize={ 8 } mb={ -0.5 }/>
-                  <Skeleton isLoaded={ !rewardsConfigQuery.isLoading }>
+                  <MeritsIcon boxSize={ 6 }/>
+                  <Skeleton isLoaded={ !rewardsConfigQuery.isLoading } ml={ 1 } mr={ 2 }>
                     <Text fontSize="sm" fontWeight="700" color="blue.700">
                       +{ value }
                     </Text>
                   </Skeleton>
-                  <Text fontSize="sm" color="blue.700" ml={ 2 }>
+                  <Text fontSize="sm" color="blue.700">
                     { title }
                   </Text>
                 </Flex>