Update 7th

4 files changed, 44 insertions, 28 deletions

diff --git a/components/footer.js b/components/footer.js
index 4284dcf..77cf643 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -5,7 +5,7 @@ import Image from "next/image";
 
 function Footer() {
   return (
-    <section className=" text-white z-40 bg-black md:flex md:h-[14rem] md:items-center md:justify-between">
+    <section className=" text-[#dbdcdd] z-40 bg-[#0c0d10] md:flex md:h-[14rem] md:items-center md:justify-between">
       <div className="mx-auto flex w-[78%] flex-col space-y-10 py-10 md:flex-row md:items-center md:justify-between md:space-y-0 md:py-0">
         <div className="md:flex md:flex-col md:gap-y-[3.88rem]">
           <h1 className="font-outfit text-[2.56rem]">moopa</h1>
@@ -27,30 +27,30 @@ function Footer() {
         <div className="flex flex-col gap-10 md:flex-row md:items-end md:gap-[9.06rem] ">
           <div className="flex flex-col gap-10 font-karla font-bold md:flex-row md:gap-[5.94rem]">
             <ul className="flex flex-col gap-y-[0.7rem] ">
-              <li className="cursor-pointer hover:text-cyan-500">
+              <li className="cursor-pointer hover:text-action">
                 <a href="https://github.com/AniList/ApiV2-GraphQL-Docs">API</a>
               </li>
-              <li className="cursor-pointer hover:text-cyan-500">
+              <li className="cursor-pointer hover:text-action">
                 <Link href="/staff">Staff</Link>
               </li>
-              <li className="cursor-pointer hover:text-cyan-500">
+              <li className="cursor-pointer hover:text-action">
                 <Link href="/contact">Contact</Link>
               </li>
-              <li className="cursor-pointer hover:text-cyan-500">
+              <li className="cursor-pointer hover:text-action">
                 <Link href="/dmca">DMCA</Link>
               </li>
             </ul>
             <ul className="flex flex-col gap-y-[0.7rem]">
-              <li className="cursor-pointer hover:text-cyan-500">
+              <li className="cursor-pointer hover:text-action">
                 <a href="https://discord.gg/v5fjSdKwr2">Discord</a>
               </li>
-              <li className="cursor-pointer hover:text-cyan-500">
+              <li className="cursor-pointer hover:text-action">
                 <a href="https://www.instagram.com/dvnabny/">Instagram</a>
               </li>
-              <li className="cursor-pointer hover:text-cyan-500">
+              <li className="cursor-pointer hover:text-action">
                 <a href="https://twitter.com/Factivens">Twitter</a>
               </li>
-              <li className="cursor-pointer hover:text-cyan-500">
+              <li className="cursor-pointer hover:text-action">
                 <a href="https://github.com/DevanAbinaya">Github</a>
               </li>
             </ul>
diff --git a/components/hero/content.js b/components/hero/content.js
index b7515d2..96f49fd 100644
--- a/components/hero/content.js
+++ b/components/hero/content.js
@@ -52,13 +52,17 @@ export default function Content({ ids, section, data }) {
               >
                 <Link
                   href={`/anime/${anime.id}`}
-                  className="hover:scale-105 duration-300 ease-in-out"
+                  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={
                       anime.image ||
                       anime.coverImage?.extraLarge ||
+                      anime.coverImage?.large ||
                       "https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
                     }
                     alt={anime.title.romaji || anime.title.english}
@@ -68,6 +72,7 @@ export default function Content({ ids, section, data }) {
                     blurDataURL={
                       anime.image ||
                       anime.coverImage?.extraLarge ||
+                      anime.coverImage?.large ||
                       "https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
                     }
                     className="z-20 h-[192px] w-[135px] object-cover lg:h-[265px] lg:w-[185px] rounded-md"
diff --git a/components/layout.js b/components/layout.js
index ab4159a..280fbdb 100644
--- a/components/layout.js
+++ b/components/layout.js
@@ -47,8 +47,8 @@ function Layout(props) {
             isAtTop
               ? `px-2 pt-2 transition-all duration-1000 ${props.navTop}`
               : isScrollingDown
-              ? "md:h-16 md:translate-y-[-100%] md:shadow-sm md:bg-black "
-              : "md:h-16 md:translate-y-0 md:shadow-sm md:bg-black"
+              ? "md:h-16 md:translate-y-[-100%] md:shadow-sm md:bg-[#0c0d10] "
+              : "md:h-16 md:translate-y-0 md:shadow-sm md:bg-[#0c0d10]"
           }`}
         />
 
diff --git a/components/navbar.js b/components/navbar.js
index e0c1047..6bc5504 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -29,7 +29,7 @@ function Navbar(props) {
 
   return (
     <header className={`${props.className}`}>
-      <div className="flex h-16 w-auto items-center justify-between px-5 md:mx-auto md:w-[80%] md:px-0 text-white">
+      <div className="flex h-16 w-auto items-center justify-between px-5 md:mx-auto md:w-[80%] md:px-0 text-[#dbdcdd]">
         <div className="pb-2 font-outfit text-4xl font-semibold md:block">
           <Link href="/">moopa</Link>
         </div>
@@ -186,7 +186,7 @@ function Navbar(props) {
         </div>
 
         <nav className="left-0 top-[-100%] hidden w-auto items-center gap-10 px-5 md:flex">
-          <ul className="hidden gap-10 font-roboto text-xl md:flex items-center">
+          <ul className="hidden gap-10 font-roboto text-md md:flex items-center">
             <li>
               <Link
                 href="/"
@@ -211,20 +211,31 @@ function Navbar(props) {
                 search
               </Link>
             </li>
-            {!session && (
-              <li>
-                <button
-                  onClick={() => signIn("AniListProvider")}
-                  className="ring-1 ring-action font-karla font-bold  p-2 rounded-md"
-                >
-                  Sign in
-                </button>
-              </li>
-            )}
-            {session && (
-              <li className="h-16 w-16 p-2">
-                <img src={session?.user.image.large} alt="imagine" />
-              </li>
+            {status === "loading" ? (
+              <li>Loading...</li>
+            ) : (
+              <>
+                {!session && (
+                  <li>
+                    <button
+                      onClick={() => signIn("AniListProvider")}
+                      className="ring-1 ring-action font-karla font-bold px-2 py-1 rounded-md"
+                    >
+                      Sign in
+                    </button>
+                  </li>
+                )}
+                {session && (
+                  <li className="flex items-center justify-center">
+                    <img
+                      src={session?.user.image.large}
+                      alt="imagine"
+                      className="object-cover h-10 w-10 rounded-full"
+                    />
+                    {/* My List */}
+                  </li>
+                )}
+              </>
             )}
           </ul>
         </nav>