[GSW-673] feat: add 500 error page and update 404 page

gnoswap-labs · Dec 17, 2023 · 2589bcd · 2589bcd
1 parent 3a9acce
commit 2589bcd
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 13 deletions.
diff --git a/packages/web/src/layouts/custom-404/Custom404Layout.styles.ts b/packages/web/src/layouts/custom-404/Custom404Layout.styles.ts
@@ -24,6 +24,8 @@ export const wrapper = (theme: Theme) => css`
   .icon-404 {
     width: 380px;
     height: 320px;
+    opacity: 60%;
+    mix-blend-mode: hard-light;
     ${media.tablet} {
       width: 300px;
       height: 252px;
@@ -39,8 +41,8 @@ export const wrapper = (theme: Theme) => css`
     margin-left: 120px;
     strong {
       font-weight: 700;
-      font-size: 60px;
-      line-height: 72px;
+      font-size: 40px;
+      line-height: 48px;
       color: ${theme.color.text23};
       display: block;
       width: 100%;
@@ -54,17 +56,19 @@ export const wrapper = (theme: Theme) => css`
       }
     }
     p {
-      ${fonts.body3};
-      color: ${theme.color.text05};
-      margin: 4px 0px 48px;
+      font-size: 16px;
+      line-height: 22.4px;
+      color: ${theme.color.text04};
+      margin: 8px 0px 48px;
     }
     ${media.tablet} {
       margin-left: 60px;
       strong {
-        ${fonts.h3};
+        ${fonts.body1};
       }
       p {
-        ${fonts.body5}
+        ${fonts.body11}
+        margin: 4px 0px 24px;
       }
     }
     
@@ -73,11 +77,12 @@ export const wrapper = (theme: Theme) => css`
       margin-left: 0;
       strong {
         text-align: center;
-        ${fonts.h5};
+        ${fonts.body5};
       }
       p {
-        ${fonts.body7};
-        margin: 4px 0px 16px;
+        text-align: center;
+        ${fonts.body10};
+        margin: 8px 0px 16px;
         br {
           display: none;
         }

diff --git a/packages/web/src/layouts/custom-404/Custom404Layout.tsx b/packages/web/src/layouts/custom-404/Custom404Layout.tsx
@@ -23,10 +23,9 @@ const Custom404Layout: React.FC<Custom404LayoutProps> = ({
     <main>
       {icon404}
       <div className="content-section">
-        <strong>We’ll be right back.</strong>
+        <strong>404</strong>
         <p>
-          We’re currently experiencing technical issues. <br />
-          Please check back soon.
+        Page not found!
         </p>
         <Button
           leftIcon={<IconStrokeArrowLeft className="arrow-icon" />}

diff --git a/packages/web/src/layouts/custom-500/Custom500Layout.styles.ts b/packages/web/src/layouts/custom-500/Custom500Layout.styles.ts
@@ -0,0 +1,104 @@
+import { fonts } from "@constants/font.constant";
+import { css, Theme } from "@emotion/react";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const wrapper = (theme: Theme) => css`
+  height: 100%;
+  ${mixins.flexbox("column", "center", "flex-start")}
+  main {
+    ${mixins.flexbox("row", "center", "center")}
+    width: 100%;
+    max-width: 1440px;
+    flex-grow: 1;
+    padding: 190px 40px;
+    margin: 0 auto;
+    ${media.tablet} {
+      padding: 118px 40px;
+    }
+    ${media.mobile} {
+      padding: 48px 0;
+      ${mixins.flexbox("column", "center", "center")}
+    }
+  }
+  .icon-404 {
+    width: 380px;
+    height: 320px;
+    opacity: 60%;
+    mix-blend-mode: hard-light;
+    ${media.tablet} {
+      width: 300px;
+      height: 252px;
+    }
+    ${media.mobile} {
+      width: 237.5px;
+      height: 200px;
+      margin-bottom: 24px;
+    }
+  }
+  .content-section {
+    ${mixins.flexbox("column", "flex-start", "flex-start")}
+    margin-left: 120px;
+    strong {
+      font-weight: 700;
+      font-size: 40px;
+      line-height: 48px;
+      color: ${theme.color.text23};
+      display: block;
+      width: 100%;
+    }
+    .button-404 {
+      span {
+        ${fonts.body7}
+      }
+      &:hover {
+        background-color: ${theme.color.hover05};;
+      }
+    }
+    p {
+      font-size: 16px;
+      line-height: 22.4px;
+      color: ${theme.color.text04};
+      margin: 8px 0px 48px;
+    }
+    ${media.tablet} {
+      margin-left: 60px;
+      strong {
+        ${fonts.body1};
+      }
+      p {
+        ${fonts.body11}
+        margin: 4px 0px 24px;
+      }
+    }
+    
+    ${media.mobile} {
+      width: 250px;
+      margin-left: 0;
+      strong {
+        text-align: center;
+        ${fonts.body5};
+      }
+      p {
+        text-align: center;
+        ${fonts.body10};
+        margin: 8px 0px 16px;
+        br {
+          display: none;
+        }
+      }
+      .button-404 {
+        width: 147px;
+        margin: auto;
+        height: 44px;
+        span {
+          ${fonts.body9};
+        }
+      }
+    }
+  }
+
+  .arrow-icon {
+    margin-right: 8px;
+  }
+`;
diff --git a/packages/web/src/layouts/custom-500/Custom500Layout.tsx b/packages/web/src/layouts/custom-500/Custom500Layout.tsx
@@ -0,0 +1,50 @@
+import Button from "@components/common/button/Button";
+import IconStrokeArrowLeft from "@components/common/icons/IconStrokeArrowLeft";
+import React from "react";
+import { wrapper } from "./Custom500Layout.styles";
+
+interface Custom500LayoutProps {
+  header: React.ReactNode;
+  icon404: React.ReactNode;
+  goBackClick: () => void;
+  footer: React.ReactNode;
+  themeKey: "dark" | "light";
+}
+
+const Custom500Layout: React.FC<Custom500LayoutProps> = ({
+  header,
+  icon404,
+  goBackClick,
+  footer,
+  themeKey,
+}) => (
+  <div css={wrapper}>
+    {header}
+    <main>
+      {icon404}
+      <div className="content-section">
+        <strong>We’ll be right back.</strong>
+        <p>
+          We’re currently experiencing technical issues. <br />
+          Please check back soon.
+        </p>
+        <Button
+          leftIcon={<IconStrokeArrowLeft className="arrow-icon" />}
+          text="Go back"
+          onClick={goBackClick}
+          style={{
+            bgColor: themeKey === "dark" ? "background02" : "background04",
+            textColor: "text20",
+            width: 240,
+            height: 57,
+            arrowColor: "icon15",
+          }}
+          className="button-404"
+        />
+      </div>
+    </main>
+    {footer}
+  </div>
+);
+
+export default Custom500Layout;
diff --git a/packages/web/src/pages/500.tsx b/packages/web/src/pages/500.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import IconGnoswap404 from "@components/common/icons/IconGnoswap404";
+import HeaderContainer from "@containers/header-container/HeaderContainer";
+import Footer from "@components/common/footer/Footer";
+import Custom500Layout from "@layouts/custom-500/Custom500Layout";
+import { useRouter } from "next/router";
+import { useAtomValue } from "jotai";
+import { ThemeState } from "@states/index";
+
+export default function Custom500() {
+  const router = useRouter();
+  const goBackClick = () => router.back();
+  const themeKey = useAtomValue(ThemeState.themeKey);
+
+  return (
+    <Custom500Layout
+      header={<HeaderContainer />}
+      icon404={<IconGnoswap404 className="icon-404"/>}
+      goBackClick={goBackClick}
+      footer={<Footer />}
+      themeKey={themeKey}
+    />
+  );
+}