fixes: css improvements and UI redesign for manga info page

5 files changed, 78 insertions, 51 deletions

diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index 47dde9e..d240d80 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -1,19 +1,17 @@
-.ImageContainer img {
-	width: auto;
-	max-width: 1000px;
-	height: auto;
-	border-radius: 5px;
-	margin-top: 10px;
-
-}
-
 .Image {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	background-color: #1b1b1b;
 	border-radius: 10px;
-	width: auto;
+	width: 50%;
+	margin: 10px auto;
+}
+
+.ImageContainer img {
+	max-width: auto;
+	height: auto;
+	border-radius: 5px;
 	margin-top: 10px;
 }
 
@@ -53,7 +51,7 @@
 
 @media screen and (max-width: 768px) {
 	.ImageContainer img {
-		width: 90%;
+		width: 95%;
 		align-items: center;
 	}
 
diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx
index b4b8d4a..eec62b9 100644
--- a/src/app/manga/[title]/[id]/buttons.jsx
+++ b/src/app/manga/[title]/[id]/buttons.jsx
@@ -18,7 +18,10 @@ export default async function Buttons({ content: data }) {
 								}}
 							>
 								<button key={index}>
-									{item.volumeNumber} - {item.chapterNumber}
+									<div>
+										<p>Chapter: {item.chapterNumber}</p>
+										<p>Volume: {item.volumeNumber}</p>
+									</div>
 								</button>
 							</Link>
 						);
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 686374a..6108766 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -1,30 +1,22 @@
-.MangaInfoContainer {
-	max-width: 90%;
-	margin: 0px auto;
-}
-
 .MangaHero {
 	display: flex;
 	flex-direction: column;
-}
-
-.HeroImage {
-	width: 100%;
-	height: auto;
-	max-height: 550px;
-	border-radius: 10px;
+	justify-content: center;
 }
 
 .TitleContainer {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-top: 10px;
+	padding: 5px;
+	backdrop-filter: blur(5px);
+
 }
 
 .TitleContainer p {
-	font-family: "Lato";
-	font-size: 32px;
+	font-family: "Quicksand";
+	font-size: 40px;
+	font-weight: 900;
 }
 
 .TitleContainer img {
@@ -44,6 +36,14 @@
 }
 
 .MangaRatings {
+	display: flex;
+	justify-content: center;
+	margin-top: -10px;
+}
+
+.MangaRatings span {
+	margin-right: 2px;
+	margin-left: 2px;
 	color: var(--light-green);
 }
 
@@ -65,14 +65,10 @@
 }
 
 .Character::-webkit-scrollbar-thumb {
-	background-color: #949494;
+	background-color: #B799FF;
 	border-radius: 5px;
 }
 
-.Character::-webkit-scrollbar-track {
-	background-color: rgb(87, 87, 87);
-	border-radius: 5px;
-}
 
 .CharacterEntry {
 	margin: 5px;
@@ -101,17 +97,20 @@
 }
 
 .ChapterContainer::-webkit-scrollbar-thumb {
-	background-color: #949494;
+	/* background-color: #949494; */
+	background-color: #B799FF;
 	border-radius: 5px;
 }
 
-.ChapterContainer::-webkit-scrollbar-track {
+/* .ChapterContainer::-webkit-scrollbar-track {
 	background-color: rgb(66, 66, 66);
 	border-radius: 5px;
-}
+} */
+
 
 .ChapterContainer button {
-	width: 100px;
+	width: 130px;
+	height: auto;
 	padding: 10px;
 	margin: 5px;
 	border-radius: 5px;
@@ -119,13 +118,18 @@
 	border: none;
 	outline: none;
 	font-family: "Lato";
-	background-color: #777777e3;
+	background-color: #f8f6e3dc;
 	cursor: pointer;
 	transition: transform 0.2s linear;
 }
 
+.ChapterContainer button p {
+	font-family: "Quicksand";
+	margin: 2px;
+}
+
 .ChapterContainer button:hover {
-	background-color: var(--neon-green);
+	background-color: #97E7E1;
 }
 
 .ChapterContainer button:focus {
@@ -144,4 +148,13 @@
 		font-size: 28px;
 	}
 
+	.ChapterContainer button {
+		width: 120px;
+
+	}
+
+	.ChapterContainer button p {
+		font-size: 14px;
+	}
+
 }
\ 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 4166568..3038b3f 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -2,6 +2,7 @@ import styles from "./info.module.css";
 import Image from "next/image";
 import Buttons from "./buttons";
 import { redirect } from "next/navigation";
+import { FaStar } from "react-icons/fa";
 
 export default async function MangaInfo({ params }) {
 	const id = params.id;
@@ -15,20 +16,20 @@ export default async function MangaInfo({ params }) {
 		<div className={styles.MangaInfoContainer}>
 			{data && (
 				<div className={styles.MangaInfo}>
-					<div className={styles.MangaHero}>
-						<Image
-							src={data.cover}
-							width={1730}
-							height={400}
-							alt="Cover Poster"
-							className={styles.HeroImage}
-							priority
-						/>
+					<div
+						className={styles.MangaHero}
+						style={{
+							backgroundImage: `url(${data.cover})`,
+							backgroundSize: "cover",
+							backgroundRepeat: "no-repeat",
+							borderRadius: 10,
+						}}
+					>
 						<div className={styles.TitleContainer}>
 							<p
 								style={{
 									color: data.color,
-									backgroundColor: "#3a3a3ac2",
+									// backgroundColor: "#3a3a3ac2",
 									borderRadius: 10,
 									padding: 5,
 								}}
@@ -58,9 +59,6 @@ export default async function MangaInfo({ params }) {
 							Ended on: {data.endDate["day"]}-
 							{data.endDate["month"]}-{data.endDate["year"]}
 						</span>
-						<p className={styles.MangaRatings}>
-							Ratings: {data.rating / 10}
-						</p>
 						<p style={{ color: "#7ED7C1" }}>
 							Genres:
 							{data.genres &&
@@ -77,6 +75,12 @@ export default async function MangaInfo({ params }) {
 									</span>
 								))}
 						</p>
+						<div className={styles.MangaRatings}>
+							<span>Ratings: {data.rating / 10}</span>
+							<span>
+								<FaStar />
+							</span>
+						</div>
 					</div>
 
 					<div className={styles.CharactersContainer}>
diff --git a/src/app/manga/loading.jsx b/src/app/manga/loading.jsx
new file mode 100644
index 0000000..74b0e05
--- /dev/null
+++ b/src/app/manga/loading.jsx
@@ -0,0 +1,9 @@
+import styles from "./manga.module.css";
+
+export default function Loading() {
+	return (
+		<div className={styles.LoadingContainer}>
+			<p>Please wait while we are loading your content....</p>
+		</div>
+	);
+}