fixes: changed the manga.svg to manga.png

3 files changed, 33 insertions, 32 deletions

diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css
index 457fbbf..96671c2 100644
--- a/src/app/manga/manga.module.css
+++ b/src/app/manga/manga.module.css
@@ -3,24 +3,28 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	height: 100dvh;
-	width: 100dvw;
+	height: 100vh;
 }
 
-.MangaSVG {
-	height: auto;
-	width: auto;
+.searchMain {
+	display: flex;
+	align-items: center;
 }
 
-.searchMain {
+.SearchBar {
 	display: flex;
 	align-items: center;
+	background: #121212;
+	padding: 0.2rem;
+	border-radius: 0.5rem;
+	width: 20dvw;
+	margin-top: 0.3rem;
 }
 
-.searchMain button {
-	margin: 10px 5px 0px 5px;
-	padding: 8px;
-	border-radius: 0.3rem;
+.histButton button {
+	margin: 0px 5px 0px 5px;
+	border-radius: 0.2rem;
+	padding: 0.4rem;
 	border: none;
 	outline: none;
 	font-family: "Atkinson Hyperlegible", serif;
@@ -29,17 +33,6 @@
 	cursor: pointer;
 }
 
-.SearchBar {
-	display: flex;
-	align-items: center;
-	background: #1f1f1f;
-	margin-top: 10px;
-	border-style: dotted;
-	border-color: rgb(63, 63, 63);
-	border-width: 2px;
-	width: 20dvw;
-	border-radius: 1rem;
-}
 
 .SearchBar input {
 	background: none;
@@ -53,12 +46,23 @@
 	font-size: 16px;
 }
 
+.SearchBar input::placeholder {
+	color: rgb(71, 71, 71);
+}
+
 @media screen and (max-width: 768px) {
-	.MangaSVG {
+	.SearchBar {
+		width: 40vw;
+	}
+}
+
+@media screen and (max-width: 425px) {
+	.MangaImage {
 		width: 100%;
+		height: auto;
 	}
 
 	.SearchBar {
-		width: 50dvw;
+		width: 60dvw;
 	}
 }
\ No newline at end of file
diff --git a/src/app/manga/page.jsx b/src/app/manga/page.jsx
index a7b3cde..2b3572a 100644
--- a/src/app/manga/page.jsx
+++ b/src/app/manga/page.jsx
@@ -2,17 +2,16 @@ import styles from "./manga.module.css";
 import Image from "next/image";

 import SearchBar from "./searchBar";

 

-// This is the landing page for the manga section. Nothing much here but my only complaint is the loading time for the svg. It's too big but idk how to fix it. I mean I could use a png but then the quality is not good. Will keep it like this for the time being

-

 export default async function Manga() {

 	return (

 		<div className={styles.Main}>

 			<Image

-				src="/manga.svg"

+				src="/manga.png"

 				width={480}

 				height={200}

-				className={styles.MangaSVG}

+				className={styles.MangaImage}

 				alt="Manga SVG"

+				priority

 			/>

 			<SearchBar />

 		</div>

diff --git a/src/app/manga/searchBar.jsx b/src/app/manga/searchBar.jsx
index 763f383..76928c3 100644
--- a/src/app/manga/searchBar.jsx
+++ b/src/app/manga/searchBar.jsx
@@ -6,8 +6,6 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";

 import Link from "next/link";

 

-// This is the search bar for the mangapage. Nothing extraordinary but just an input box and a search icon. Gets the work done.

-

 export default function SearchBar() {

 	const router = useRouter();

 

@@ -16,11 +14,11 @@ export default function SearchBar() {
 	return (

 		<main className={styles.searchMain}>

 			<div className={styles.SearchBar}>

-				<FaSearch color="white" style={{ marginLeft: 5 }} />

+				<FaSearch color="white" style={{ marginLeft: 5 }} size={18} />

 				<input

 					type="text"

 					name="manga"

-					placeholder="Enter manga title"

+					placeholder="Enter manga title and press enter"

 					autoComplete="off"

 					onChange={(e) => setMangaTitle(e.target.value)}

 					onKeyDown={(event) => {

@@ -35,7 +33,7 @@ export default function SearchBar() {
 					}}

 				></input>

 			</div>

-			<div>

+			<div className={styles.histButton}>

 				<Link href={"/manga/history/continueWatching/"}>

 					<button>History</button>

 				</Link>