Merge pull request polkassembly#652 from polkassembly/fix/kr/identity…

…-icon

fix: 🔥 icons size compressed

src/components/OnchainIdentity/TotalAmountBreakdown.tsx

@@ -12,8 +12,8 @@ import { ESetIdentitySteps, ITxFee } from '.';
 import { Button } from 'antd';
 import UpArrowIcon from '~assets/icons/up-arrow.svg';
 import DownArrowIcon from '~assets/icons/down-arrow.svg';
-import IdentityIllustration from '~assets/icons/identity.svg';
 import HelperTooltip from '~src/ui-components/HelperTooltip';
+import { AmountBreakdownModalIcon } from '~src/ui-components/CustomIcons';
 
 interface Props {
 	className?: string;
@@ -53,10 +53,10 @@ const TotalAmountBreakdown = ({ className, txFee, changeStep, perSocialBondFee,
 
 	return (
 		<div className={className}>
-			<span className='mt-6 flex items-center justify-center'>
-				<IdentityIllustration />
+			<span className='-mt-6 flex items-center justify-center text-[350px]'>
+				<AmountBreakdownModalIcon />
 			</span>
-			<ul className='mt-6 flex flex-col gap-2 pl-4 text-sm tracking-[0.001em] text-bodyBlue'>
+			<ul className='-mt-6 flex flex-col gap-2 pl-4 text-sm tracking-[0.001em] text-bodyBlue'>
 				<li>Polkadot offers on-chain identities that verify users&apos;s credentials through appointed registrars, instilling greater trust and support. </li>
 				<li>
 					Once successfully verified, users receive a green checkmark, symbolising their trusted status. This verified status symbol enhances trustworthiness when requesting funds

src/ui-components/CustomIcons.tsx

@@ -104,6 +104,7 @@ import CopySVG from '~assets/icons/content-copy.svg';
 import CreatePropoosalSVG from '~assets/icons/create-proposal-filled.svg';
 import SetIdentitySVG from '~assets/icons/identity-icon.svg';
 import ApplayoutIdentitySVG from '~assets/icons/layout-identity.svg';
+import AmountBreakdownModalSVG from '~assets/icons/amount-breakdown-identity.svg';
 
 export const DislikeIcon = (props: Partial<CustomIconComponentProps>) => (
 	<Icon
@@ -747,6 +748,12 @@ export const SetIdentityIcon = (props: Partial<CustomIconComponentProps>) => (
 	/>
 );
 
+export const AmountBreakdownModalIcon = (props: Partial<CustomIconComponentProps>) => (
+	<Icon
+		component={AmountBreakdownModalSVG}
+		{...props}
+	/>
+);
 export const ApplayoutIdentityIcon = (props: Partial<CustomIconComponentProps>) => (
 	<Icon
 		component={ApplayoutIdentitySVG}