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