From 16b4a70b7d75969151c8a7d29f6978666743bd31 Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Tue, 14 May 2024 01:02:42 +0530
Subject: minor changes to the kdrama page

---
 src/app/kdrama/[id]/buttons.jsx          |  1 +
 src/app/kdrama/components/popular.jsx    |  2 +-
 src/app/kdrama/components/recent.jsx     |  2 +-
 src/app/kdrama/page.jsx                  |  2 +-
 src/app/kdrama/styles/info.module.css    | 35 ++++++++++++++++++++++++++++----
 src/app/kdrama/styles/kdrama.module.css  |  1 +
 src/app/kdrama/styles/popular.module.css | 16 +++------------
 src/app/kdrama/styles/search.module.css  |  6 +-----
 8 files changed, 40 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
index 2018a1c..e31adf1 100644
--- a/src/app/kdrama/[id]/buttons.jsx
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -26,6 +26,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 					{episodeData &&
 						episodeData.map((item, index) => (
 							<button
+								title={item.title}
 								key={index}
 								onClick={(event) => {
 									test(item.id, dramaId, item.title);
diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx
index 15c9f92..21d8cc3 100644
--- a/src/app/kdrama/components/popular.jsx
+++ b/src/app/kdrama/components/popular.jsx
@@ -9,7 +9,7 @@ export default async function PopularDramas() {
 
 	return (
 		<div className={styles.Main}>
-			<h1 className={styles.popDramasText}>Trending Dramas</h1>
+			<h2 className={styles.popDramasText}>Trending Dramas</h2>
 
 			<div className={styles.AnimeContainer}>
 				{popular &&
diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx
index 9c5d452..2b883d6 100644
--- a/src/app/kdrama/components/recent.jsx
+++ b/src/app/kdrama/components/recent.jsx
@@ -8,7 +8,7 @@ export default async function RecentDramas() {
 	PreFetchAnimeInfo(popular);
 	return (
 		<div className={styles.Main}>
-			<h1 className={styles.popDramasText}>Recent Releases</h1>
+			<h2 className={styles.popDramasText}>Recent Releases</h2>
 
 			<div className={styles.AnimeContainer}>
 				{popular &&
diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx
index f6b417f..b9cdb69 100644
--- a/src/app/kdrama/page.jsx
+++ b/src/app/kdrama/page.jsx
@@ -7,8 +7,8 @@ export default async function Kdrama() {
 	return (
 		<div className={styles.Main}>
 			<DramaSearch />
-			<br />
 			<PopularDramas />
+			<hr style={{ marginTop: 15, borderColor: "gray" }} />
 			<RecentDramas />
 		</div>
 	);
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
index 9da3034..3b60fd2 100644
--- a/src/app/kdrama/styles/info.module.css
+++ b/src/app/kdrama/styles/info.module.css
@@ -1,6 +1,6 @@
 .Main {
 	max-width: 98%;
-	margin: 80px auto;
+	margin: 60px auto;
 }
 
 .TitleContainer {
@@ -14,10 +14,11 @@
 	font-size: 34px;
 	font-weight: 500;
 	color: var(--neon-green);
+	margin: 0;
 }
 
 .TitleContainer img {
-	border-radius: 0.5rem;
+	border-radius: 0.4rem;
 }
 
 .DramaDescription h2 {
@@ -45,11 +46,11 @@
 }
 
 .DramaGenre::-webkit-scrollbar {
-	height: 5px;
+	height: 2px;
 }
 
 .DramaGenre::-webkit-scrollbar-thumb {
-	background-color: var(--soft-purple);
+	background-color: var(--light-green);
 	border-radius: 1rem;
 }
 
@@ -143,4 +144,30 @@
 		font-size: 14px;
 		width: 80px;
 	}
+
+	.TitleContainer {
+		flex-direction: column;
+	}
+
+	.TitleContainer img {
+		width: auto;
+		height: auto;
+		border-radius: 0.2rem;
+		background-color: #121212;
+		padding: 0.2rem;
+	}
+	
+	.TitleContainer p {
+		font-size: 30px;
+		font-weight: 400;
+		margin: 0 0 0.25rem 0
+	}
+
+	.EpisodesContainer {
+		text-align: center;
+	}
+
+	.EpisodeButtons button {
+		width: 90px;
+	}
 }
diff --git a/src/app/kdrama/styles/kdrama.module.css b/src/app/kdrama/styles/kdrama.module.css
index d683479..deb3860 100644
--- a/src/app/kdrama/styles/kdrama.module.css
+++ b/src/app/kdrama/styles/kdrama.module.css
@@ -1,3 +1,4 @@
 .Main {
 	margin: 80px auto;
+	width: 99%;
 }
diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css
index 92373a2..ec76fb3 100644
--- a/src/app/kdrama/styles/popular.module.css
+++ b/src/app/kdrama/styles/popular.module.css
@@ -1,17 +1,6 @@
 .popDramasText {
-	color: var(--soft-purple);
-	margin: 10px 0 10px 0;
-	text-align: center;
-	color: transparent;
-	background: linear-gradient(
-		90deg,
-		var(--neon-green) 40%,
-		var(--light-green) 60%,
-		var(--neon-yellow) 80%,
-		var(--soft-purple) 100%
-	);
-	background-size: 60% 50%;
-	background-clip: text;
+	color: white;
+	margin: 0 0 0.2rem	 0;
 }
 
 .AnimeContainer {
@@ -45,6 +34,7 @@
 		background-color 200ms ease;
 	cursor: grab;
 	border-radius: 0.4rem;
+	overflow: hidden;
 }
 
 .AnimeEntry img {
diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css
index dbca5ad..d7d28b2 100644
--- a/src/app/kdrama/styles/search.module.css
+++ b/src/app/kdrama/styles/search.module.css
@@ -1,6 +1,3 @@
-.SearchContainer {
-	margin: -1rem 0 -2rem 0;
-}
 
 .LoadingText {
 	color: white;
@@ -14,8 +11,7 @@
 	display: flex;
 	align-items: center;
 	max-width: 30%;
-	border-radius: 0.8rem;
-	margin: 0 0.2rem 0 0.2rem;
+	border-radius: 0.5rem;
 }
 
 .SearchContainer input {
-- 
cgit v1.2.3