fixes: minor css fixes, added loading indicators, added error pages etc etc

4 files changed, 54 insertions, 17 deletions

diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 638cfd1..686374a 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -20,7 +20,6 @@
 	justify-content: space-between;
 	align-items: center;
 	margin-top: 10px;
-	/* background-color: #3a3a3ac2; */
 }
 
 .TitleContainer p {
@@ -30,6 +29,7 @@
 
 .TitleContainer img {
 	border-radius: 10px;
+	margin-left: 5px;
 }
 
 .MangaDescription {
@@ -89,7 +89,7 @@
 
 /* Chapters Buttons */
 .ChapterContainer {
-	width: 95%;
+	width: 100%;
 	margin: 20px auto;
 	text-align: center;
 	height: 400px;
@@ -119,10 +119,9 @@
 	border: none;
 	outline: none;
 	font-family: "Lato";
-	background-color: #41C9E2;
+	background-color: #777777e3;
 	cursor: pointer;
 	transition: transform 0.2s linear;
-
 }
 
 .ChapterContainer button:hover {
@@ -132,5 +131,17 @@
 .ChapterContainer button:focus {
 	opacity: 0.6;
 	transition: transform 0.2s linear;
+	background-color: var(--pastel-red);
 	transform: scale(0.9);
+}
+
+@media screen and (max-width: 768px) {
+	.MangaInfoContainer {
+		max-width: 100%;
+	}
+
+	.TitleContainer p {
+		font-size: 28px;
+	}
+
 }
\ No newline at end of file
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 1b9b631..4166568 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -1,11 +1,16 @@
 import styles from "./info.module.css";
 import Image from "next/image";
 import Buttons from "./buttons";
+import { redirect } from "next/navigation";
 
 export default async function MangaInfo({ params }) {
 	const id = params.id;
 	const data = await getMangaInfo(id);
 
+	if (data.message) {
+		redirect("/404");
+	}
+
 	return (
 		<div className={styles.MangaInfoContainer}>
 			{data && (
@@ -63,7 +68,10 @@ export default async function MangaInfo({ params }) {
 									<span
 										key={index}
 										className={styles.MangaGenre}
-										style={{ color: data.color, margin: 5 }}
+										style={{
+											color: data.color,
+											margin: 5,
+										}}
 									>
 										{item}
 									</span>
diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css
index eef08ba..1369856 100644
--- a/src/app/manga/[title]/title.module.css
+++ b/src/app/manga/[title]/title.module.css
@@ -58,4 +58,10 @@
 
 .MangaChapters {
 	color: #FFEBB4
+}
+
+@media screen and (max-width: 768px) {
+	.Main {
+		max-width: 100%;
+	}
 }
\ No newline at end of file
diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css
index 7e4a5ba..87c9563 100644
--- a/src/app/manga/manga.module.css
+++ b/src/app/manga/manga.module.css
@@ -76,18 +76,6 @@
 	}
 }
 
-@media screen and (max-width: 768px) {
-
-	.HorizontalImageContainer img {
-		width: 95%;
-		height: auto;
-	}
-
-	.VerticalImageContainer img {
-		width: 46.5%;
-		height: 300px;
-	}
-}
 
 .SearchBar {
 	display: flex;
@@ -110,6 +98,30 @@
 	font-size: 16px;
 }
 
+.LoadingContainer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 90dvh;
+	color: white;
+	font-family: "Kanit";
+	font-size: 18px;
+}
+
+@media screen and (max-width: 768px) {
+
+	.HorizontalImageContainer img {
+		width: 95%;
+		height: auto;
+	}
+
+	.VerticalImageContainer img {
+		width: 46.5%;
+		height: 300px;
+	}
+}
+
+
 @media screen and (max-width: 425px) {
 
 	.Hero {