From c05d54909004cf53908199164c66fc7075129ae2 Mon Sep 17 00:00:00 2001
From: EliteAsian <29520859+EliteAsian123@users.noreply.github.com>
Date: Sun, 9 Jul 2023 19:52:40 -0400
Subject: [PATCH] Added back button on news page

---
 src/assets/Icons/Back.svg               |  3 +++
 src/assets/Icons/index.ts               |  4 +++-
 src/routes/NewsPage/NewsPage.module.css | 30 +++++++++++++++++++++++--
 src/routes/NewsPage/index.tsx           | 16 ++++++++-----
 4 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/Icons/Back.svg

diff --git a/src/assets/Icons/Back.svg b/src/assets/Icons/Back.svg
new file mode 100644
index 0000000..53b4ddf
--- /dev/null
+++ b/src/assets/Icons/Back.svg
@@ -0,0 +1,3 @@
+<svg width="5" height="9" viewBox="0 0 5 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M3.90323 7.5L1 4.5L3.90323 1.5" stroke="white" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/Icons/index.ts b/src/assets/Icons/index.ts
index eaf2cf3..ed87356 100644
--- a/src/assets/Icons/index.ts
+++ b/src/assets/Icons/index.ts
@@ -21,6 +21,7 @@ import { ReactComponent as TwitterIcon } from "./Twitter.svg";
 import { ReactComponent as UpdateIcon } from "./Update.svg";
 import { ReactComponent as DriveIcon } from "./Drive.svg";
 import { ReactComponent as UnknownUserIcon } from "./UnknownUser.svg";
+import { ReactComponent as BackIcon } from "./Back.svg";
 
 export {
     AddIcon,
@@ -45,5 +46,6 @@ export {
     TwitterIcon,
     UpdateIcon,
     DriveIcon,
-    UnknownUserIcon
+    UnknownUserIcon,
+    BackIcon
 };
\ No newline at end of file
diff --git a/src/routes/NewsPage/NewsPage.module.css b/src/routes/NewsPage/NewsPage.module.css
index d6963dc..595ffb8 100644
--- a/src/routes/NewsPage/NewsPage.module.css
+++ b/src/routes/NewsPage/NewsPage.module.css
@@ -1,10 +1,36 @@
 .header {
+    display: flex;
+    padding: 25px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 50px;
+    align-self: stretch;
+
     background: linear-gradient(8deg, #050609 0%, rgba(8, 10, 14, 0.00) 100%), var(--bannerURL), lightgray;
     background-size: cover;
+}
+
+.header_back {
     display: flex;
-    padding: 100px 25px 25px 25px;
-    flex-direction: column;
+    align-items: center;
     gap: 10px;
+
+    opacity: 0.5;
+
+    color: white;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    text-transform: uppercase;
+}
+
+.header_info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+    align-self: stretch;
 }
 
 .title {
diff --git a/src/routes/NewsPage/index.tsx b/src/routes/NewsPage/index.tsx
index cdd03f7..62395b4 100644
--- a/src/routes/NewsPage/index.tsx
+++ b/src/routes/NewsPage/index.tsx
@@ -1,12 +1,12 @@
 import { useNewsArticle } from "@app/hooks/useNewsArticle";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import matter from "gray-matter";
 import { marked } from "marked";
 import SanitizedHTML from "@app/components/SanitizedHTML";
 import styles from "./NewsPage.module.css";
 import NewsBadge from "@app/components/NewsSection/NewsBadge";
 import { CSSProperties } from "react";
-import { TimeIcon } from "@app/assets/Icons";
+import { BackIcon, TimeIcon } from "@app/assets/Icons";
 import { Img } from "react-image";
 import UnknownUserIcon from "@app/assets/Icons/UnknownUser.svg";
 
@@ -25,9 +25,15 @@ function NewsPage() {
 
         return <>
             <div className={styles.header} style={{ "--bannerURL": `url(https://raw.githubusercontent.com/YARC-Official/News/master/images/banners/${articleData.banner})` } as CSSProperties}>
-                <NewsBadge>{articleData.type}</NewsBadge>
-                <div className={styles.title}>{articleData.title}</div>
-            </div>
+                <Link to="/" className={styles.header_back}>
+                    <BackIcon />
+                    RETURN
+                </Link>
+                <div className={styles.header_info}>
+                    <NewsBadge>{articleData.type}</NewsBadge>
+                    <div className={styles.title}>{articleData.title}</div>
+                </div>
+            </div >
             <div className={styles.content}>
                 <div className={styles.info}>
                     <div className={styles.author}>