From 5a5038768543ee72a352c617f44187a0069c1e49 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Wed, 13 Aug 2025 17:13:20 +0200
Subject: [PATCH] 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             | 13 +++--
 src/app/globals.css                           | 50 +++++--------------
 src/components/atoms/MovieCard/index.tsx      |  4 +-
 src/components/atoms/ReadMore/index.tsx       |  2 +-
 src/components/molecules/MovieList/index.tsx  | 39 +++++++++------
 .../Navbar/components/Search/index.tsx        |  6 +--
 src/components/organisms/Navbar/index.tsx     |  4 +-
 7 files changed, 55 insertions(+), 63 deletions(-)

diff --git a/src/app/(withGlobalData)/page.tsx b/src/app/(withGlobalData)/page.tsx
index 4fed65e..dbe2572 100644
--- a/src/app/(withGlobalData)/page.tsx
+++ b/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} />
     </>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 051d4bc..9f41d73 100644
--- a/src/app/globals.css
+++ b/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 {
diff --git a/src/components/atoms/MovieCard/index.tsx b/src/components/atoms/MovieCard/index.tsx
index a2d1795..0fa3dac 100644
--- a/src/components/atoms/MovieCard/index.tsx
+++ b/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 />}
diff --git a/src/components/atoms/ReadMore/index.tsx b/src/components/atoms/ReadMore/index.tsx
index 574730e..5bb80c8 100644
--- a/src/components/atoms/ReadMore/index.tsx
+++ b/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}
diff --git a/src/components/molecules/MovieList/index.tsx b/src/components/molecules/MovieList/index.tsx
index 60f9cf5..022ba99 100644
--- a/src/components/molecules/MovieList/index.tsx
+++ b/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>
         )}
diff --git a/src/components/organisms/Navbar/components/Search/index.tsx b/src/components/organisms/Navbar/components/Search/index.tsx
index b66508c..6bc5fd2 100644
--- a/src/components/organisms/Navbar/components/Search/index.tsx
+++ b/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>
             )}
diff --git a/src/components/organisms/Navbar/index.tsx b/src/components/organisms/Navbar/index.tsx
index 0d6ef44..f1c6801 100644
--- a/src/components/organisms/Navbar/index.tsx
+++ b/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