error icon color fix

ui/shared/AppError/AppErrorIcon.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 
 import icon404 from 'icons/error-pages/404.svg';
 import icon422 from 'icons/error-pages/422.svg';
+import icon429 from 'icons/error-pages/429.svg';
 import icon500 from 'icons/error-pages/500.svg';
 
 const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGElement>> > = {
   '404': icon404,
   '422': icon422,
+  '429': icon429,
   '500': icon500,
 };
 
@@ -16,7 +18,7 @@ interface Props {
 }
 
 const AppErrorIcon = ({ statusCode }: Props) => {
-  return <Icon as={ ICONS[String(statusCode)] || ICONS['500'] } width="200px" height="auto"/>;
+  return <Icon as={ ICONS[String(statusCode)] || ICONS['500'] } width="200px" height="auto" color="text"/>;
 };
 
 export default AppErrorIcon;

ui/shared/AppError/custom/AppErrorTooManyRequests.tsx

-import { Box, Heading, Icon, Text } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import React from 'react';
 import ReCaptcha from 'react-google-recaptcha';
 
 import config from 'configs/app';
-import icon429 from 'icons/error-pages/429.svg';
 import buildUrl from 'lib/api/buildUrl';
 import useFetch from 'lib/hooks/useFetch';
 import useToast from 'lib/hooks/useToast';
 
+import AppErrorIcon from '../AppErrorIcon';
+import AppErrorTitle from '../AppErrorTitle';
+
 const AppErrorTooManyRequests = () => {
   const toast = useToast();
   const fetch = useFetch();
@@ -50,8 +52,8 @@ const AppErrorTooManyRequests = () => {
         },
       }}
     >
-      <Icon as={ icon429 } width="200px" height="auto"/>
-      <Heading mt={ 8 } size="2xl" fontFamily="body">Too many requests</Heading>
+      <AppErrorIcon statusCode={ 429 }/>
+      <AppErrorTitle title="Too many requests"/>
       <Text variant="secondary" mt={ 3 }>
         You have exceeded the request rate for a given time period. Please reduce the number of requests and try again soon.
       </Text>