Merge pull request #13 from ShivaBhattacharjee/light-mode-perish

removed : ☀️ light mode for good
ShivaBhattacharjee · Jan 12, 2024 · 7ac264c · 7ac264c
2 parents fb55bbc + b1a41f7
commit 7ac264c
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 134 deletions.
diff --git a/src/app/edit-profile/page.tsx b/src/app/edit-profile/page.tsx
@@ -68,10 +68,10 @@ const Page = () => {
             {loading ? (
                 <EditProfileLoading />
             ) : (
-                <form onSubmit={UpdateProfile} className="flex flex-col gap-4 p-4 overflow-y-hidden min-h-screen">
+                <form onSubmit={UpdateProfile} className="flex lg:w-[70%] flex-col gap-4 p-4 overflow-y-hidden min-h-screen">
                     <h1 className="text-3xl font-bold">Profile</h1>
-                    <span className=" w-full h-[1px] bg-white/20"></span>
-                    <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-5">
+                    <span className=" w-full lg:w-[80%] h-[1px] bg-white/20"></span>
+                    <div className="flex flex-col gap-5">
                         <div onClick={() => setOpenAvatarModal(true)} className="h-24 cursor-pointer w-24 relative lg:h-32 lg:w-32 rounded-full bg-white  text-black  flex justify-center items-center ">
                             {profilePicture ? <img src={profilePicture} alt="profile" className="rounded-full" /> : <p className=" p-2 font-semibold text-3xl">{username?.charAt(0).toUpperCase()}</p>}
                             <div className="absolute bg-white cursor-pointer p-2 rounded-full right-0 bottom-0">

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -10,9 +10,7 @@ import "./globals.css";
 
 import Footer from "@/components/shared/Footer";
 import ScrollToTop from "@/components/shared/ScrollToTop";
-import { ThemeChildren } from "@/components/ThemeChildren";
 import { UserProvider } from "@/context/getUserDetails";
-import { ThemeProvider } from "@/context/themeChange";
 import { ProfileProvider } from "@/hooks/useprofile";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -29,25 +27,23 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     return (
         <html lang="en">
             <body className={inter.className}>
-                <ThemeProvider>
-                    <section>
-                        <ThemeChildren>
-                            <ProfileProvider>
-                                <UserProvider>
-                                    <Toaster position="top-right" />
-                                    <NextTopLoader color="#fff" initialPosition={0.08} crawlSpeed={200} height={3} crawl={true} showSpinner={true} easing="ease" speed={200} zIndex={1600} showAtBottom={false} />
-                                    <TopNavbar />
-                                    <SideBar />
-                                    <ScrollToTop />
-                                    <main className="flex relative flex-col ml-0 md:ml-20 lg:ml-52 ">
-                                        {children}
-                                        <Footer />
-                                    </main>
-                                </UserProvider>
-                            </ProfileProvider>
-                        </ThemeChildren>
-                    </section>
-                </ThemeProvider>
+                <section>
+                    <ProfileProvider>
+                        <UserProvider>
+                            <Toaster position="top-right" />
+                            <NextTopLoader color="#fff" initialPosition={0.08} crawlSpeed={200} height={3} crawl={true} showSpinner={true} easing="ease" speed={200} zIndex={1600} showAtBottom={false} />
+                            <main className="min-h-screen w-full text-white bg-black">
+                                <TopNavbar />
+                                <SideBar />
+                                <ScrollToTop />
+                                <section className="flex relative flex-col ml-0 md:ml-20 lg:ml-52 ">
+                                    {children}
+                                    <Footer />
+                                </section>
+                            </main>
+                        </UserProvider>
+                    </ProfileProvider>
+                </section>
             </body>
         </html>
     );

diff --git a/src/components/ThemeChildren.tsx b/src/components/ThemeChildren.tsx
diff --git a/src/components/appName.tsx b/src/components/appName.tsx
diff --git a/src/components/loading/AiringScheduleLoading.tsx b/src/components/loading/AiringScheduleLoading.tsx
@@ -3,15 +3,12 @@ import React from "react";
 
 import SpinLoading from "./SpinLoading";
 
-import { useTheme } from "@/context/themeChange";
-
 const AiringScheduleLoading = () => {
-    const { theme } = useTheme();
     return (
         <div className="flex flex-col mt-9">
             <h1 className="text-3xl lg:text-5xl font-bold">Airing</h1>
             <div className="flex gap-2">
-                <div className={`${theme === "light" ? "border-black/25" : "border-white/25"} border-2 flex justify-center items-center animate-pulse h-52 w-full p-4 rounded-lg mt-5 lg:h-96 overflow-y-auto`}>
+                <div className={`border-white/25 border-2 flex justify-center items-center animate-pulse h-52 w-full p-4 rounded-lg mt-5 lg:h-96 overflow-y-auto`}>
                     <SpinLoading />
                 </div>
             </div>

diff --git a/src/components/loading/SpinLoading.tsx b/src/components/loading/SpinLoading.tsx
@@ -1,12 +1,10 @@
 "use client";
 import React from "react";
 
-import { useTheme } from "@/context/themeChange";
 const SpinLoading = () => {
-    const { theme } = useTheme();
     return (
         <div role="status">
-            <svg aria-hidden="true" className={` w-16 h-16 ${theme === "light" ? "text-black/10" : "text-white/10"} animate-spin ${theme === "light" ? "fill-black" : "fill-white"} `} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg aria-hidden="true" className={` w-16 h-16 text-white/10 animate-spin fill-white `} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
                 <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
             </svg>

diff --git a/src/components/shared/AvatarModal.tsx b/src/components/shared/AvatarModal.tsx
@@ -13,7 +13,7 @@ interface AvatarModalProps {
 const AvatarModal: React.FC<AvatarModalProps> = ({ setOpenAvatarModal, onSelectProfilePicture, openAvatarModal }) => {
     return (
         <>
-            <div className={`absolute p-4 w-full bg-black left-0 right-0 bottom-0 ${openAvatarModal ? "top-0" : "top-[2000px] hidden"} duration-200 overflow-y-scroll h-[75%] hiddenscroll `}>
+            <div className={`absolute w-full z-50 p-4 left-0 right-0 bg-black bottom-0 ${openAvatarModal ? "top-0" : "top-[2000px] hidden"} duration-200 overflow-y-scroll min-h-screen hiddenscroll `}>
                 <ArrowLeft className="cursor-pointer" onClick={() => setOpenAvatarModal(false)} size={40} />
                 {Object.keys(ProfiePicture.Profiles).map((anime) => (
                     <div key={anime}>

diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import React from "react";
-import { Github, Instagram, Moon, Sun } from "lucide-react";
+import { Github, Instagram } from "lucide-react";
 
-import { useTheme } from "@/context/themeChange";
 const socialMediaLinks = [
     {
         icon: <Github />,
@@ -16,29 +15,20 @@ const socialMediaLinks = [
 ];
 
 const Footer = () => {
-    const { theme, toggleTheme } = useTheme();
     return (
-        <div className={`mb-20 md:mb-0 p-4 mt-12 md:mt-0 border-t ${theme === "light" ? "border-black/20" : "border-white/20"}`}>
+        <div className={`mb-20 md:mb-0 p-4 mt-12 md:mt-0 border-t border-white/20`}>
             <div className="flex flex-col gap-7 justify-between items-center">
                 <h1 className="text-3xl font-bold">AnimeTrix</h1>
                 <p className="text-[9px] md:text-sm text-center font-semibold m-auto max-w-4xl">AnimeTrix is not affiliated with or endorsed by any of the anime studios behind the creation of the anime presented on this site. This website is only a user interface presenting/linking various self-hosted files across the internet by other third-party providers for easy access. AnimeTrix never downloads the video from any source provider, link will be returned from the response hence it is completely not subjected to DMCA compliant.</p>
             </div>
-            <div className="flex justify-between lg:max-w-7xl lg:m-auto items-center mt-6 mb-7">
-                <div className="flex gap-4 scale-90">
+            <div className="flex justify-center lg:max-w-7xl lg:m-auto items-center mt-6 mb-7">
+                <div className="flex gap-4 scale-125 mt-7 mb-7">
                     {socialMediaLinks.map((link) => (
                         <a key={link.url} href={link.url} target="_blank" rel="noopener noreferrer">
                             {link.icon}
                         </a>
                     ))}
                 </div>
-                <div className="flex gap-2 cursor-pointer">
-                    <div onClick={() => toggleTheme("dark")} className={`${theme === "dark" && "bg-white/30"} p-2 rounded-full`}>
-                        <Moon size={20} />
-                    </div>
-                    <div onClick={() => toggleTheme("light")} className={`${theme === "light" && "bg-black/20 text-black"} p-2 rounded-full`}>
-                        <Sun size={20} />
-                    </div>
-                </div>
             </div>
         </div>
     );

diff --git a/src/components/shared/SearchModal.tsx b/src/components/shared/SearchModal.tsx
@@ -8,15 +8,13 @@ import SpinLoading from "../loading/SpinLoading";
 import SearchCards from "./cards/SearchCards";
 import { SearchResults } from "./SearchResults";
 
-import { useTheme } from "@/context/themeChange";
 import useDebounce from "@/hooks/debounce";
 import Anime from "@/types/animetypes";
 
 const SearchModal = ({ trending }: { trending: Anime[] }) => {
     const modalRef = useRef<HTMLDivElement>(null);
     const [openSearch, setOpenSearch] = useState<boolean>(false);
     const [searchValue, setSearchValue] = useState<string>("");
-    const { theme } = useTheme();
 
     const closeSearchModal = () => {
         setOpenSearch(false);
@@ -72,7 +70,7 @@ const SearchModal = ({ trending }: { trending: Anime[] }) => {
 
     return (
         <AnimatePresence>
-            <Search className={`cursor-pointer ${theme === "light" ? "text-black" : "text-white"}`} onClick={() => setOpenSearch(!openSearch)} />
+            <Search className={`cursor-pointer text-white`} onClick={() => setOpenSearch(!openSearch)} />
             {openSearch && (
                 <motion.div
                     initial={{ scale: 0 }}

diff --git a/src/components/shared/airingschedule/AiringScheduleCard.tsx b/src/components/shared/airingschedule/AiringScheduleCard.tsx
@@ -4,8 +4,6 @@ import React, { useEffect, useState } from "react";
 import { ArrowLeftToLine, ArrowRightToLine, PlayCircle } from "lucide-react";
 import Link from "next/link";
 
-import { useTheme } from "@/context/themeChange";
-
 type DayOfWeek = "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday";
 
 interface Anime {
@@ -31,7 +29,6 @@ const AiringScheduleCard: React.FC<AiringScheduleCardProps> = ({ airingData }) =
     const daysOfWeek: DayOfWeek[] = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
     const [currentDay, setCurrentDay] = useState<DayOfWeek>(daysOfWeek[new Date().getDay()]);
     const [animeForCurrentDay, setAnimeForCurrentDay] = useState<Anime[] | undefined>(undefined);
-    const { theme } = useTheme();
 
     useEffect(() => {
         setAnimeForCurrentDay(airingData[currentDay]);
@@ -60,7 +57,7 @@ const AiringScheduleCard: React.FC<AiringScheduleCardProps> = ({ airingData }) =
 
     return (
         <div className="flex gap-2">
-            <div className={`border-2 ${theme === "light" ? "border-black/20" : "border-white/20"} h-auto max-h-[400px] md:max-h-[600px] w-full rounded-lg mt-5 overflow-y-auto`}>
+            <div className={`border-2 border-white/20 h-auto max-h-[400px] md:max-h-[600px] w-full rounded-lg mt-5 overflow-y-auto`}>
                 <div className="flex flex-col gap-3">
                     <div className="p-4">
                         <div className="flex flex-col gap-3 ">
@@ -70,15 +67,15 @@ const AiringScheduleCard: React.FC<AiringScheduleCardProps> = ({ airingData }) =
                                 </div>
                             ) : (
                                 animeForCurrentDay.map((anime: Anime) => (
-                                    <div className={`flex border-b-2 ${theme === "light" ? "border-black/20" : "border-white/20 "} justify-between items-center`} key={anime?.id}>
+                                    <div className={`flex border-b-2 border-white/20 justify-between items-center`} key={anime?.id}>
                                         <Link href={`/details/${anime.id}`}>
                                             <div className="flex items-center gap-4 mb-2">
                                                 <img height={200} width={400} loading="lazy" src={anime.coverImage} alt={`an image of ${anime?.title?.romaji || anime?.title?.english || anime.title?.native}`} className="w-24 text-sm object-cover hover:scale-90 duration-200  rounded-lg" />
                                                 <div className="flex flex-col">
                                                     <span className="text-sm w-24 truncate mb-3 md:text-2xl md:w-[400px] lg:w-full ">{anime?.title?.romaji || anime?.title?.english || anime.title?.native}</span>
                                                     <div className="flex gap-2 items-center flex-wrap text-sm lg:text-xl">
                                                         <span>Ep: {anime.airingEpisode} -</span>
-                                                        <span className={`${theme === "light" ? "text-black" : "text-gray-300"}`}>{formatTime(anime.airingAt)}</span>
+                                                        <span className={`text-gray-300`}>{formatTime(anime.airingAt)}</span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -92,7 +89,7 @@ const AiringScheduleCard: React.FC<AiringScheduleCardProps> = ({ airingData }) =
                         </div>
                     </div>
                 </div>
-                <div className={`sticky bottom-0 ${theme === "light" ? "bg-black/5" : "bg-white/5"} bg-gradient-to-r ${theme === "light" ? "from-white" : "from-black"} ${theme === "light" ? "to-white/30" : "to-black/30"} backdrop-blur-xl overflow-hidden p-3`}>
+                <div className={`sticky bottom-0 bg-white/5"} bg-gradient-to-r from-black to-black/30 backdrop-blur-xl overflow-hidden p-3`}>
                     <div className="flex justify-between items-center  md:max-w-[400px] m-auto">
                         <button onClick={handlePreviousDay}>
                             <ArrowLeftToLine className="scale-125" />

diff --git a/src/components/shared/navigation/SideBar.tsx b/src/components/shared/navigation/SideBar.tsx
@@ -81,7 +81,7 @@ const SideBar = () => {
         <nav>
             {/* desktop sidebar */}
             <div className=" hidden md:flex fixed ">
-                <div className={`w-52 max-lg:w-20 h-screen bg-white/5 backdrop-blur-xl text-white sticky left-0 top-0 duration-300 border-r-2 border-white/25`}>
+                <div className={`w-52 max-lg:w-20 h-screen bg-transparent backdrop-blur-xl text-white sticky left-0 top-0 duration-300 border-r-2 border-white/25`}>
                     <div className="flex flex-col overflow-scroll h-screen mt-3 p-2 max-lg:mt-10">
                         {NavItems.map((link) => {
                             const isActive = (pathname.includes(link.route) && link.route.length > 1) || pathname === link.route;

diff --git a/src/components/shared/navigation/TopNavbar.tsx b/src/components/shared/navigation/TopNavbar.tsx
@@ -1,17 +1,19 @@
 import React from "react";
+import Link from "next/link";
 
 import SearchModal from "../SearchModal";
 
-import AppName from "@/components/appName";
 import Logout from "@/components/buttons/Logout";
 import { getTrendingAnime } from "@/lib/AnimeFetch";
 
 export default async function TopNavbar() {
     const trendingPromise = await getTrendingAnime();
     return (
-        <div className="sticky top-0 w-full max-w-[2500px] text-white h-20 items-center grid z-50 p-4 bg-white/5 backdrop-blur-md border-b-2 border-black/20 dark:border-0">
+        <div className="sticky top-0 w-full max-w-[2500px] text-white h-20 items-center grid z-50 p-4 bg-transparent backdrop-blur-md border-b-2 border-black/20 dark:border-0">
             <div className="flex justify-between items-center flex-wrap">
-                <AppName />
+                <Link href={"/"} className={`text-3xl text-white md:text-3xl font-bold`}>
+                    Anime <span>Trix</span>
+                </Link>
                 <div className="flex justify-between items-center gap-4">
                     <SearchModal trending={trendingPromise} />
                     <Logout />

diff --git a/src/components/shared/upcomingSeason/UpcomingSeasonCard.tsx b/src/components/shared/upcomingSeason/UpcomingSeasonCard.tsx
@@ -4,7 +4,6 @@ import Link from "next/link";
 
 import ReloadFunc from "../../error/ReloadFunc";
 
-import { useTheme } from "@/context/themeChange";
 import Anime from "@/types/animetypes";
 
 interface UpcomingSeasonCardProps {
@@ -13,15 +12,14 @@ interface UpcomingSeasonCardProps {
 }
 
 const UpcomingSeasonCard: React.FC<UpcomingSeasonCardProps> = ({ props, title }) => {
-    const { theme } = useTheme();
     return (
-        <div className={`border-2 ${theme === "light" ? "border-black/20" : "border-white/20 "} p-5 h-[700px] overflow-y-scroll overflow-hidden w-full rounded-lg`}>
+        <div className={`border-2 border-white/20  p-5 h-[700px] overflow-y-scroll overflow-hidden w-full rounded-lg`}>
             <div className="flex flex-col gap-6">
                 <h1 className="text-3xl font-bold capitalize">{title}</h1>
                 {props?.length > 0 || props === undefined ? (
                     props?.map((anime) => {
                         return (
-                            <Link href={`details/${anime.id}`} className={`flex border-b-2 ${theme === "light" ? "border-black/25" : "border-white/25"} gap-5 items-center`} key={anime.id + 1}>
+                            <Link href={`details/${anime.id}`} className={`flex border-b-2 border-white/25 gap-5 items-center`} key={anime.id + 1}>
                                 <img src={anime?.image} loading="lazy" alt={`an image of ${anime?.title?.userPreferred || anime?.title?.english || anime?.title?.romaji || anime?.title?.native}`} height={200} width={400} className="lg:w-32 w-28 duration-200 hover:scale-105 rounded-lg mb-3" />
                                 <div className="flex gap-3 flex-col">
                                     <span className="text-lg">{anime?.title?.userPreferred || anime?.title?.english || anime?.title?.romaji || anime?.title?.native}</span>