From 356e60b00bd06ba14dabd2aa6f687dc221c07537 Mon Sep 17 00:00:00 2001
From: Abdelaziz <abdelazizmalfy@gmail.com>
Date: Sun, 9 Aug 2020 15:41:56 +0200
Subject: [PATCH 1/2] Add 404 page

-Add 404 page
-Add 404 page styling
-Add translations needed for 404 page

fix #107
---
 pages/404/index.tsx                  | 27 ++++++++++++++++++++++
 public/static/locales/en/common.json |  4 +++-
 src/Styled/404.ts                    | 34 ++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 pages/404/index.tsx
 create mode 100644 src/Styled/404.ts

diff --git a/pages/404/index.tsx b/pages/404/index.tsx
new file mode 100644
index 00000000..c8b734a9
--- /dev/null
+++ b/pages/404/index.tsx
@@ -0,0 +1,27 @@
+// #region Global Imports
+import * as React from "react";
+import { NextPage } from "next";
+// #endregion Global Imports
+
+// #region Local Imports
+import { withTranslation } from "@Server/i18n";
+import { Container, TopText, HomeButton } from "@Styled/404";
+import Link from "next/link";
+// #endregion Local Imports
+
+// #region Interface Imports
+import { IErrorPage } from "@Interfaces";
+// #endregion Interface Imports
+
+const Custom404: NextPage<IErrorPage.IProps> = ({ t }) => {
+    return (
+        <Container>
+            <TopText>{t("common:NotFound")}</TopText>
+            <Link href="/">
+                <HomeButton>{t("common:BackHome")}</HomeButton>
+            </Link>
+        </Container>
+    );
+};
+
+export default withTranslation("common")(Custom404);
diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json
index de23d8c2..2198e1cc 100644
--- a/public/static/locales/en/common.json
+++ b/public/static/locales/en/common.json
@@ -1,5 +1,7 @@
 {
   "Hello": "Hello",
   "World": "World",
-  "Error": "Errr!"
+  "Error": "Errr!",
+  "NotFound": "Page not found!",
+  "BackHome": "Back to home"
 }
diff --git a/src/Styled/404.ts b/src/Styled/404.ts
new file mode 100644
index 00000000..7671b795
--- /dev/null
+++ b/src/Styled/404.ts
@@ -0,0 +1,34 @@
+// #region Global Imports
+import styled from "styled-components";
+
+// #endregion Global Imports
+
+export const Container = styled.div`
+    background-color: ${({ theme }) => theme.colors.primary};
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 100%;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 100vh;
+`;
+
+export const HomeButton = styled.div`
+    background: #f9da2e;
+    border-radius: 5px;
+    padding: 5px 10px;
+    font-family: Arial;
+    font-weight: 700;
+    font-size: 25px;
+    color: ${({ theme }) => theme.colors.primary};
+    letter-spacing: 0;
+    cursor: pointer;
+`;
+
+export const TopText = styled.div`
+    font-size: 80px;
+    font-family: Arial, Helvetica, sans-serif;
+    color: #ffffff;
+    margin-bottom: 10px;
+    margin-top: 20px;
+`;

From 0059dce50026c1ea865546f680f144dffbb01afc Mon Sep 17 00:00:00 2001
From: Abdelaziz <abdelazizmalfy@gmail.com>
Date: Sun, 9 Aug 2020 22:58:13 +0200
Subject: [PATCH 2/2] Remove duplicate styles

---
 pages/404/index.tsx |  4 ++--
 src/Styled/404.ts   | 34 ----------------------------------
 src/Styled/Home.ts  |  1 +
 3 files changed, 3 insertions(+), 36 deletions(-)
 delete mode 100644 src/Styled/404.ts

diff --git a/pages/404/index.tsx b/pages/404/index.tsx
index c8b734a9..96cb74ae 100644
--- a/pages/404/index.tsx
+++ b/pages/404/index.tsx
@@ -5,7 +5,7 @@ import { NextPage } from "next";
 
 // #region Local Imports
 import { withTranslation } from "@Server/i18n";
-import { Container, TopText, HomeButton } from "@Styled/404";
+import { Container, TopText, ApodButton } from "@Styled/Home";
 import Link from "next/link";
 // #endregion Local Imports
 
@@ -18,7 +18,7 @@ const Custom404: NextPage<IErrorPage.IProps> = ({ t }) => {
         <Container>
             <TopText>{t("common:NotFound")}</TopText>
             <Link href="/">
-                <HomeButton>{t("common:BackHome")}</HomeButton>
+                <ApodButton>{t("common:BackHome")}</ApodButton>
             </Link>
         </Container>
     );
diff --git a/src/Styled/404.ts b/src/Styled/404.ts
deleted file mode 100644
index 7671b795..00000000
--- a/src/Styled/404.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// #region Global Imports
-import styled from "styled-components";
-
-// #endregion Global Imports
-
-export const Container = styled.div`
-    background-color: ${({ theme }) => theme.colors.primary};
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 100%;
-    justify-content: flex-start;
-    align-items: center;
-    min-height: 100vh;
-`;
-
-export const HomeButton = styled.div`
-    background: #f9da2e;
-    border-radius: 5px;
-    padding: 5px 10px;
-    font-family: Arial;
-    font-weight: 700;
-    font-size: 25px;
-    color: ${({ theme }) => theme.colors.primary};
-    letter-spacing: 0;
-    cursor: pointer;
-`;
-
-export const TopText = styled.div`
-    font-size: 80px;
-    font-family: Arial, Helvetica, sans-serif;
-    color: #ffffff;
-    margin-bottom: 10px;
-    margin-top: 20px;
-`;
diff --git a/src/Styled/Home.ts b/src/Styled/Home.ts
index 1143ffd8..877db9bb 100644
--- a/src/Styled/Home.ts
+++ b/src/Styled/Home.ts
@@ -78,6 +78,7 @@ export const ApodButton = styled.div`
     font-size: 25px;
     color: ${({ theme }) => theme.colors.primary};
     letter-spacing: 0;
+    cursor: pointer;
 `;
 
 export const TopText = styled.div`