Added back button on news page

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
 };

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 {

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}>