error icon color fix

blockscout · Sep 5, 2023 · 185ca80 · 185ca80
1 parent e9a45f3
commit 185ca80
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 5 deletions.
diff --git a/ui/shared/AppError/AppErrorIcon.tsx b/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;
diff --git a/...red/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png b/...red/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-422-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-422-1.png
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-500-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-500-1.png
diff --git a/...AppError/__screenshots__/AppError.pw.tsx_default_too-many-requests-mobile-1.png b/...AppError/__screenshots__/AppError.pw.tsx_default_too-many-requests-mobile-1.png
diff --git a/.../AppError/__screenshots__/AppError.pw.tsx_mobile_too-many-requests-mobile-1.png b/.../AppError/__screenshots__/AppError.pw.tsx_mobile_too-many-requests-mobile-1.png
diff --git a/ui/shared/AppError/custom/AppErrorTooManyRequests.tsx b/ui/shared/AppError/custom/AppErrorTooManyRequests.tsx
@@ -1,13 +1,15 @@
-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>