Update pre - v3.5.4

> UI adjustment on smaller devices

10 files changed, 33 insertions, 166 deletions

diff --git a/README.md b/README.md
index e9f5d18..adfac69 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,10 @@
   - [x] Ability to edit list inside detail page
 - [ ] Working on Manga pages
 
+## Bug Report
+
+If you encounter any issues or bug on the site please head to [issues](https://github.com/DevanAbinaya/Ani-Moopa/issues) and create a bug report there.
+
 ## For Local Development
 
 1. Clone this repository using :
@@ -112,7 +116,9 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
 ## Contact
 
 Thank You for passing by!!
-If you have any questions or feedback, please reach out to us at [[email protected]](mailto:[email protected]), or you can join our [discord sever](https://discord.gg/4xTGhr85BG).
+If you have any questions or feedback, please reach out to us at [[email protected]](mailto:[email protected]), or you can join our [discord sever](https://discord.gg/4xTGhr85BG).
+<br>
+or you can DM me on Discord `CritenDust#3704`/`Factiven#9110`. (just contact me on one of these account)
 
 ## Support This Project
 
diff --git a/components/footer.js b/components/footer.js
index 3494810..50c556a 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -22,7 +22,7 @@ function Footer() {
                 &copy; {new Date().getFullYear()} moopa.live | Website Made by
                 Factiven
               </p>
-              <p className="font-karla md:text-[0.8rem] text-[0.65rem] text-[#9c9c9c] w-[320px] md:w-[520px] italic">
+              <p className="font-karla md:text-[0.8rem] text-[0.65rem] text-[#9c9c9c]  md:w-[520px] italic">
                 This site does not store any files on our server, we only linked
                 to the media which is hosted on 3rd party services.
               </p>
diff --git a/components/hero/content.js b/components/hero/content.js
index 25e1431..7e2d9ab 100644
--- a/components/hero/content.js
+++ b/components/hero/content.js
@@ -52,11 +52,8 @@ export default function Content({ ids, section, data }) {
               >
                 <Link
                   href={`/anime/${anime.id}`}
-                  className="hover:scale-105 group relative duration-300 ease-in-out hover-parent"
+                  className="hover:scale-105 group relative duration-300 ease-in-out"
                 >
-                  {/* <div className="fixed top-0 z-40 bg-black invisible group-hover:visible">
-                    {anime.title.romaji || anime.title.english}
-                  </div> */}
                   <Image
                     draggable={false}
                     src={
diff --git a/package.json b/package.json
index a62ab26..d20a84e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moopa",
-  "version": "3.5.0",
+  "version": "3.5.4",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index 26c42cb..4b759b6 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -447,21 +447,25 @@ export default function Info() {
                     </div>
                   )}
                 </div>
-                <div className="bg-secondary rounded-sm h-[30px]">
-                  <div className="flex items-center justify-center h-full gap-10 p-2">
+                <div className="bg-secondary rounded-sm xs:h-[30px]">
+                  <div className="grid grid-cols-3 place-content-center xs:flex  items-center justify-center h-full xs:gap-10 p-2 text-sm">
                     {info && info.status !== "NOT_YET_RELEASED" ? (
                       <>
-                        <div className="flex-center gap-2">
+                        <div className="flex-center flex-col xs:flex-row gap-2">
                           <TvIcon className="w-5 h-5 text-action" />
                           <h4 className="font-karla">{info?.type}</h4>
                         </div>
-                        <div className="flex-center gap-2">
+                        <div className="flex-center flex-col xs:flex-row gap-2">
                           <ArrowTrendingUpIcon className="w-5 h-5 text-action" />
                           <h4>{info?.averageScore}%</h4>
                         </div>
-                        <div className="flex-center gap-2">
+                        <div className="flex-center flex-col xs:flex-row gap-2">
                           <RectangleStackIcon className="w-5 h-5 text-action" />
-                          <h1>{info?.episodes} Episodes</h1>
+                          {info?.episodes ? (
+                            <h1>{info?.episodes} Episodes</h1>
+                          ) : (
+                            <h1>TBA</h1>
+                          )}
                         </div>
                       </>
                     ) : (
@@ -676,8 +680,8 @@ export default function Info() {
                   )}
                   {info?.nextAiringEpisode && (
                     <div className="flex items-center gap-2">
-                      <div className="flex items-center gap-4">
-                        <h1>Next Ep :</h1>
+                      <div className="flex items-center gap-4 text-[10px] xxs:text-sm md:text-base">
+                        <h1>Next :</h1>
                         <div
                           className="px-5 rounded-sm font-karla font-bold bg-white text-black"
                           // style={color}
@@ -741,7 +745,7 @@ export default function Info() {
                         <div className="flex flex-col">
                           <h1>{epiStatus} while retrieving data</h1>
                           <pre
-                            className={`rounded-md overflow-hidden ${getLanguageClassName(
+                            className={`rounded-md ${getLanguageClassName(
                               "bash"
                             )}`}
                           >
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js
index 682e252..41635b8 100644
--- a/pages/anime/watch/[...info].js
+++ b/pages/anime/watch/[...info].js
@@ -288,7 +288,7 @@ export default function Info({ sessions, id, aniId, provider }) {
           <div className="min-h-screen mt-3 md:mt-0 flex flex-col lg:gap-0 gap-5 lg:flex-row lg:py-10 lg:px-10 justify-start w-screen">
             <div className="w-screen lg:w-[67%]">
               {loading ? (
-                <div className="h-auto aspect-video z-20">
+                <div className="aspect-video z-20">
                   <VideoPlayer
                     key={id}
                     data={epiData}
@@ -304,7 +304,7 @@ export default function Info({ sessions, id, aniId, provider }) {
                   />
                 </div>
               ) : (
-                <div className="lg:h-[693px] h-[225px] xs:h-[281px] bg-black" />
+                <div className="aspect-video bg-black" />
               )}
               <div>
                 {data ? (
@@ -386,7 +386,7 @@ export default function Info({ sessions, id, aniId, provider }) {
                       <div className="row-start-2">
                         {data ? data.studios : <Skeleton width={80} />}
                       </div>
-                      <div className="grid col-start-2 place-content-end relative">
+                      <div className="hidden xxs:grid col-start-2 place-content-end relative">
                         <div className="" onClick={() => setOpen(true)}>
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
diff --git a/pages/categories/[id].js b/pages/categories/[id].js
deleted file mode 100644
index 1395a33..0000000
--- a/pages/categories/[id].js
+++ /dev/null
@@ -1,125 +0,0 @@
-import Head from "next/head";
-import Footer from "../../components/footer";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { useAniList } from "../../lib/useAnilist";
-import Image from "next/image";
-
-export default function Categories() {
-  const router = useRouter();
-  const { id } = router.query;
-  const tags = id?.replace(/-/g, " ");
-  const { aniAdvanceSearch } = useAniList();
-
-  const [data, setData] = useState();
-
-  const [season, setSeason] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    setLoading(true);
-    if (tags === "This Season") {
-      seasonNow();
-      setLoading(false);
-    } else if (tags === "Popular Anime") {
-      PopularAnime();
-      setLoading(false);
-    } else if (tags === "Popular Manga") {
-      PopularManga();
-      setLoading(false);
-    } else {
-      setData(null);
-      setLoading(false);
-    }
-  }, [id]);
-
-  async function seasonNow() {
-    const data = await aniAdvanceSearch({
-      perPage: 25,
-      seasonYear: 2023,
-      season: getCurrentSeason(),
-      // type: "MANGA",
-    });
-    setData(data);
-  }
-
-  async function PopularAnime() {
-    const data = await aniAdvanceSearch({
-      perPage: 25,
-      sort: ["POPULARITY_DESC"],
-    });
-    setData(data);
-  }
-
-  async function PopularManga() {
-    const data = await aniAdvanceSearch({
-      perPage: 25,
-      sort: ["POPULARITY_DESC"],
-      type: "MANGA",
-    });
-    setData(data);
-  }
-
-  console.log(data);
-  return (
-    <>
-      <Head>
-        <title>Categories - {tags}</title>
-      </Head>
-      <div className="flex-center min-h-screen w-screen">
-        <div className="grid-container bg-white">
-          {loading ? (
-            <p>Loading...</p>
-          ) : (
-            data &&
-            data?.media.map((m) => {
-              return (
-                <div key={m.id} className="grid-item h-[265px] w-[185px]">
-                  <Image
-                    src={m.coverImage.extraLarge}
-                    alt="image"
-                    width={500}
-                    height={500}
-                    className="object-cover h-[265px] w-[185px]"
-                  />
-                </div>
-              );
-            })
-          )}
-        </div>
-      </div>
-      <Footer />
-    </>
-  );
-}
-
-function getYear() {
-  const now = new Date();
-  return now.getFullYear();
-}
-
-function getCurrentSeason() {
-  const now = new Date();
-  const month = now.getMonth() + 1; // getMonth() returns 0-based index
-
-  switch (month) {
-    case 12:
-    case 1:
-    case 2:
-      return "WINTER";
-    case 3:
-    case 4:
-    case 5:
-      return "SPRING";
-    case 6:
-    case 7:
-    case 8:
-      return "SUMMER";
-    case 9:
-    case 10:
-    case 11:
-      return "FALL";
-    default:
-      return "UNKNOWN SEASON";
-  }
-}
diff --git a/pages/contact.js b/pages/contact.js
index 7dbc6d1..c7da878 100644
--- a/pages/contact.js
+++ b/pages/contact.js
@@ -7,7 +7,9 @@ const Contact = () => {
         <h1>Contact Us</h1>
         <p>If you have any questions or comments, please email us at:</p>
         <p>
-          <a href="mailto:[email protected]">[email protected]</a>
+          <a href="mailto:[email protected]?subject=[Moopa]%20-%20Your%20Subject">
+            [email protected]
+          </a>
         </p>
       </div>
     </Layout>
diff --git a/pages/index.js b/pages/index.js
index 6295dee..fcf8288 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -86,9 +86,9 @@ export function Navigasi() {
                 placeholder="Search Anime"
                 onKeyDown={handleKeyDown}
               />
-              <a href="#" className="search-btn">
+              <div className="search-btn">
                 <i className="fas fa-search"></i>
-              </a>
+              </div>
             </div>
           </div>
         </div>
diff --git a/styles/globals.css b/styles/globals.css
index 9e1e6a4..f2ea9d2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -213,6 +213,8 @@ pre {
   padding: 1rem;
   margin: 1rem 0;
   @apply bg-[#191c24];
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
 
 pre code {
@@ -230,22 +232,3 @@ pre code {
 .language-bash {
   color: #89b482;
 }
-
-.hover-parent:hover .hover-child {
-  display: block;
-}
-
-.hover-child {
-  display: none;
-}
-
-.hover-child:hover {
-  display: none;
-}
-
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-gap: 1rem;
-  padding: 1rem;
-}