Update global styles and refactor MovieList component: change text color in globals.css, enhance MovieList filtering logic with numeric props, and improve MovieCard layout for better UI consistency.

src/app/(withGlobalData)/page.tsx

@@ -3,10 +3,15 @@ import { MovieList } from "@/components/molecules/MovieList";
 export default async function Home() {
   return (
     <>
-      <MovieList heading="Upcoming" filterUpcoming sortDirection="desc" />
-      <MovieList heading="My Watchlist" filterReleased />
-      <MovieList heading="Seen" filterSeen />
-      <MovieList heading="Favorites" filterFavorites />
+      <MovieList heading="Upcoming" filterUpcoming={1} sortDirection="desc" />
+      <MovieList
+        heading="My Watchlist"
+        filterReleased={1}
+        filterSeen={0}
+        filterFavorites={0}
+      />
+      <MovieList heading="Seen" filterSeen={1} />
+      <MovieList heading="Favorites" filterFavorites={1} />
     </>
   );
 }

src/app/globals.css

@@ -3,7 +3,7 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --color-text: #1d1d1d;
+  --color-text: #fafafa;
 
   --color-primary-50: #eefaff;
   --color-primary-100: #dcf5ff;
@@ -17,41 +17,17 @@
   --color-primary-900: #00547a;
   --color-primary-950: #003049;
 
-  --color-secondary-50: #ffeeee;
-  --color-secondary-100: #ffdada;
-  --color-secondary-200: #ffbbbb;
-  --color-secondary-300: #ff8b8b;
-  --color-secondary-400: #ff4949;
-  --color-secondary-500: #ff1111;
-  --color-secondary-600: #ff0000;
-  --color-secondary-700: #e70000;
-  --color-secondary: #be0000;
-  --color-secondary-900: #780000;
-  --color-secondary-950: #560000;
-
-  --color-monza-50: #fff1f2;
-  --color-monza-100: #ffe0e2;
-  --color-monza-200: #ffc7cb;
-  --color-monza-300: #ffa0a7;
-  --color-monza-400: #ff6974;
-  --color-monza-500: #fa3947;
-  --color-monza-600: #e71b2a;
-  --color-monza-700: #c1121f;
-  --color-monza-800: #a1131e;
-  --color-monza-900: #85171f;
-  --color-monza-950: #49060b;
-
-  --color-pink-lady-50: #fef9ee;
-  --color-pink-lady-100: #fdf0d5;
-  --color-pink-lady-200: #fadfae;
-  --color-pink-lady-300: #f7c77a;
-  --color-pink-lady-400: #f2a545;
-  --color-pink-lady-500: #ef8a20;
-  --color-pink-lady-600: #e07016;
-  --color-pink-lady-700: #ba5514;
-  --color-pink-lady-800: #944418;
-  --color-pink-lady-900: #773917;
-  --color-pink-lady-950: #401c0a;
+  --color-secondary-50: #fef9ee;
+  --color-secondary-100: #fdf0d5;
+  --color-secondary-200: #fadfae;
+  --color-secondary-300: #f7c77a;
+  --color-secondary-400: #f2a545;
+  --color-secondary-500: #ef8a20;
+  --color-secondary: #e07016;
+  --color-secondary-700: #ba5514;
+  --color-secondary-800: #944418;
+  --color-secondary-900: #773917;
+  --color-secondary-950: #401c0a;
 
   --color-hippie-blue-50: #f4f7fb;
   --color-hippie-blue-100: #e9eff5;
@@ -72,7 +48,7 @@
 
 @layer base {
   body {
-    @apply bg-pink-lady-50 text-text;
+    @apply bg-hippie-blue-950 text-text;
   }
 
   .container {

src/components/atoms/MovieCard/index.tsx

@@ -55,7 +55,7 @@ export const MovieCard: FC<Props> = ({ layout = "default", ...movie }) => {
 
   if (layout === "zeus") {
     return (
-      <article className="flex flex-col w-full shadow-md rounded-lg overflow-hidden bg-white">
+      <article className="flex flex-col w-full shadow-lg rounded-t-lg overflow-hidden bg-black/50 shadow-white/5">
         <figure className="relative ">
           <img
             className="w-full object-cover xl:h-[420px]"
@@ -135,7 +135,7 @@ export const MovieCard: FC<Props> = ({ layout = "default", ...movie }) => {
           </div>
           <p
             className={`text-sm mt-2 flex items-center gap-1 leading-[1.1] ${
-              isReleased ? "text-green-700" : "text-yellow-700"
+              isReleased ? "text-green-700" : "text-yellow-500"
             }`}
           >
             {isReleased ? <RiCalendarCheckLine /> : <RiCalendarScheduleLine />}

src/components/atoms/ReadMore/index.tsx

@@ -12,7 +12,7 @@ export const ReadMore: FC<Props> = ({ text }) => {
     <p
       className={`${
         isOpen ? "line-clamp-none" : "line-clamp-2"
-      } hover:text-primary cursor-pointer`}
+      } hover:text-secondary cursor-pointer`}
       onClick={() => setIsOpen(!isOpen)}
     >
       {text}

src/components/molecules/MovieList/index.tsx

@@ -10,10 +10,10 @@ type Props = {
   heading?: string;
   overrideMovies?: Movie[];
 
-  filterSeen?: boolean;
-  filterFavorites?: boolean;
-  filterUpcoming?: boolean;
-  filterReleased?: boolean;
+  filterSeen?: 0 | 1;
+  filterFavorites?: 0 | 1;
+  filterUpcoming?: 0 | 1;
+  filterReleased?: 0 | 1;
 
   fluid?: boolean;
   showFilters?: boolean;
@@ -43,12 +43,23 @@ export const MovieList: FC<Props> = ({
 
   const filteredMovies = movies.filter((movie) => {
     let result = true;
-    if (filterSeen) result = !!movie.seen;
-    if (filterFavorites) result = result && !!movie.favorite;
-    if (filterUpcoming)
-      result = result && new Date(movie.release_date) > new Date();
-    if (filterReleased)
-      result = result && new Date(movie.release_date) < new Date();
+    const today = new Date();
+    if (filterSeen !== undefined) {
+      result = movie.seen === !!filterSeen;
+    }
+    if (filterFavorites !== undefined) {
+      result = result && movie.favorite === !!filterFavorites;
+    }
+    if (filterUpcoming !== undefined) {
+      const releaseDate = new Date(movie.release_date);
+      result =
+        result && filterUpcoming ? releaseDate > today : releaseDate < today;
+    }
+    if (filterReleased !== undefined) {
+      const releaseDate = new Date(movie.release_date);
+      result =
+        result && filterReleased ? releaseDate < today : releaseDate > today;
+    }
     return result;
   });
 
@@ -69,8 +80,8 @@ export const MovieList: FC<Props> = ({
   return (
     <section className="my-4 md:my-10">
       <div className={`${fluid ? "max-w-full" : "container"}`}>
-        <div className="row">
-          {heading && (
+        {heading && (
+          <div className="row">
             <div className="col-12 md:col-10 flex gap-2 items-center">
               {showFilters && (
                 <Dropdown
@@ -85,8 +96,8 @@ export const MovieList: FC<Props> = ({
               )}
               <h2 className="text-2xl font-bold">{heading}</h2>
             </div>
-          )}
-        </div>
+          </div>
+        )}
         {filteredMovies.length === 0 && (
           <p className="text-text/60 text-sm">No movies found</p>
         )}

src/components/organisms/Navbar/components/Search/index.tsx

@@ -41,14 +41,14 @@ export const Search = () => {
   return (
     <>
       <button
-        className="text-text hover:text-primary-900 cursor-pointer"
+        className="text-text hover:text-secondary cursor-pointer transition-colors"
         onClick={() => setIsSearchOpen(!isSearchOpen)}
       >
         <IoSearch size={25} fill="currentColor" />
       </button>
 
       {isSearchOpen && (
-        <div className="fixed inset-0 bg-black/50 z-20 backdrop-blur-sm overflow-y-auto flex items-center">
+        <div className="fixed inset-0 bg-black/50 z-20 backdrop-blur-sm overflow-y-auto flex py-20">
           <button
             className="absolute top-4 right-4 text-white cursor-pointer"
             onClick={handleClose}
@@ -66,7 +66,7 @@ export const Search = () => {
               />
             </div>
             {results && (
-              <div className="col-span-full">
+              <div className="col-span-full mt-2 lg:mt-10 text-center ">
                 <p className="text-white">{total_results} movies found</p>
               </div>
             )}

src/components/organisms/Navbar/index.tsx

@@ -14,7 +14,7 @@ const links = [
 
 export const Navbar = () => {
   return (
-    <header className="bg-white shadow-sm max-sm:sticky top-0 w-full z-30">
+    <header className="bg-hippie-blue-700 shadow-sm max-sm:sticky top-0 w-full z-30">
       <div className="container">
         <div className="flex items-center gap-8 py-4">
           <Link className="block text-teal-600" href="/">
@@ -42,7 +42,7 @@ export const Navbar = () => {
               <div className="flex gap-4 sm:gap-6">
                 <Search />
                 <a
-                  className="block rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-white transition hover:bg-primary-900"
+                  className="block border-b-2 border-secondary-700 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-secondary-700"
                   href="#"
                 >
                   Random Movie