Merge pull request #404 from casper-network/refactor/update-error-pag…

…e-designs#402 Refactor/update error page designs#402
casper-network · Jun 20, 2023 · 64f2ea4 · 64f2ea4
2 parents a7f208c + cd8bbcd
commit 64f2ea4
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 30 deletions.
diff --git a/app/public/locales/en/translation.json b/app/public/locales/en/translation.json
@@ -39,10 +39,10 @@
   "expand": "Expand",
   "fee-percentage": "Fee",
   "first": "First",
-  "go-back-to": "Go back to ",
   "hash": "hash",
   "height": "height",
   "home": "Home",
+  "home-page": "home",
   "hide-raw-data": "Hide Raw Data",
   "is-alive": "Status",
   "last": "Last",
@@ -63,6 +63,7 @@
   "public-key": "Public Key",
   "rank": "Rank",
   "raw-data": "Raw Data",
+  "return-to": "Return to",
   "rows": "{{count}} rows",
   "search": "Search",
   "self-percentage": "Self %",
@@ -90,6 +91,6 @@
   "validators-currently-online": "Validators currently online",
   "view-all": "View all",
   "view-blocks": "View Blocks",
-  "whoops": "Whoops! Something went wrong!",
+  "whoops": "Whoops! Something went wrong.",
   "weight": "Weight"
 }
diff --git a/app/src/components/layout/Header/Header.styled.ts b/app/src/components/layout/Header/Header.styled.ts
@@ -13,9 +13,13 @@ export const HeaderComponentsContainer = styled.div<{
   display: flex;
   justify-content: space-between;
   width: auto;
-  margin: 0 2.25rem;
+  margin: 0 0.5rem;
   padding: 0;
 
+  @media (min-width: ${defaultTheme.typography.breakpoints.xs}) {
+    margin: 0 1.5rem;
+  }
+
   @media (min-width: ${defaultTheme.typography.breakpoints.lg}) {
     width: auto;
     margin: 0 2.25rem;

diff --git a/app/src/components/layout/PageWrapper/PageWrapper.tsx b/app/src/components/layout/PageWrapper/PageWrapper.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { defaultTheme, pxToRem, Loader } from 'casper-ui-kit';
-import { GradientHeading } from '../../styled';
+import { Heading } from 'src/components/base';
 
 export interface PageError {
   message: string;
@@ -38,13 +38,13 @@ export const PageWrapper: React.FC<PageWrapperProps> = ({
   if (error) {
     return (
       <BaseContentWrapper>
-        <GradientHeading type="h2">{t('whoops')}</GradientHeading>
+        <ErrorPageHeading type="h2">{t('whoops')}</ErrorPageHeading>
         <ErrorMessage data-testid="error-content" data-cy="error-content">
           {error.message}
         </ErrorMessage>
-        <p>
-          {t('go-back-to')} <Link to="/">{t('home')}</Link>
-        </p>
+        <LinkWrapper>
+          {t('return-to')} <Link to="/">{t('home-page')}</Link>
+        </LinkWrapper>
       </BaseContentWrapper>
     );
   }
@@ -81,6 +81,22 @@ const ContentWrapper = styled.div`
   }
 `;
 
+const ErrorPageHeading = styled(Heading)`
+  margin-top: 1.5rem;
+  font-weight: ${defaultTheme.typography.fontWeights.light};
+  color: ${props => props.theme.text.primary};
+  line-height: 1;
+
+  @media (min-width: ${defaultTheme.typography.breakpoints.md}) {
+    margin: 0;
+  }
+`;
+
 const ErrorMessage = styled.p`
   overflow-wrap: break-word;
+  color: ${props => props.theme.text.primary};
+`;
+
+const LinkWrapper = styled.p`
+  color: ${props => props.theme.text.primary};
 `;
diff --git a/app/src/components/styled/GradientHeading/GradientHeading.tsx b/app/src/components/styled/GradientHeading/GradientHeading.tsx
diff --git a/app/src/components/styled/GradientHeading/index.ts b/app/src/components/styled/GradientHeading/index.ts
diff --git a/app/src/components/styled/index.ts b/app/src/components/styled/index.ts
@@ -1,7 +1,6 @@
 export * from './AvatarIcon';
 export * from './DetailData';
 export * from './Flex';
-export * from './GradientHeading';
 export * from './Grid';
 export * from './Hash';
 export * from './HideOn';