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/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