added common className variables for buttons, fixed some styling with the mobile view

movie-search/__tests__/omdb.test.jsx

@@ -13,7 +13,6 @@ test("queryOMDb returns movie with error", async () => {
   expect(data).toHaveProperty("Response", "False");
 });
 
-// f=dune
 
 // Warning: React does not recognize the `fetchPriority` prop on a DOM element
 // The `punycode` module is deprecated. Please use a userland alternative instead.

movie-search/src/app/Search/SearchBar.tsx

@@ -1,3 +1,4 @@
+import { primaryBtn, secondaryBtn } from "@/common/classes";
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 
@@ -21,13 +22,13 @@ export default function SearchBar() {
       <div className="flex gap-4 justify-center">
         <button
           type="submit"
-          className={`rounded px-2 bg-purple-500 hover:bg-purple-700`}
+          className={primaryBtn}
         >
           Search
         </button>
         <button
           type="reset"
-          className={`rounded px-2 bg-gray-400 hover:bg-gray-600`}
+          className={secondaryBtn}
         >
           Clear
         </button>

movie-search/src/app/page.module.css

@@ -19,6 +19,7 @@
 }
 
 .description a {
+  margin-top: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,7 +28,7 @@
 
 .description p {
   position: relative;
-  margin: 0;
+  margin-top: 50px;
   padding: 1rem;
   background-color: rgba(var(--callout-rgb), 0.5);
   border: 1px solid rgba(var(--callout-border-rgb), 0.3);

movie-search/src/app/page.tsx

@@ -1,18 +1,13 @@
 import Image from "next/image";
 import styles from "./page.module.css";
 import Link from "next/link";
+import { primaryBtn } from "@/common/classes";
 
 export default function Home() {
   return (
-    <main 
-    className={styles.main}
-    >
-      <div
-       className={styles.description}
-       >
-        <p>
-          A simple app to let you search for movies by title.
-        </p>
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <p>A simple app to let you search for movies by title.</p>
         <div>
           <a
             href="https://lysted.com"
@@ -33,11 +28,9 @@ export default function Home() {
 
       <div className="container m-auto">
         <div className="flex justify-center">
-        <Link href={"/Search"} className="mx-auto">
-          <button className="mt-2 px-4 rounded bg-purple-500 hover:bg-purple-700" >
-            Start searching!
-            </button>
-        </Link>
+          <Link href={"/Search"} className="mx-auto">
+            <button className={`mt-2 ${primaryBtn}`}>Start searching!</button>
+          </Link>
         </div>
       </div>
     </main>

movie-search/src/common/classes.ts

@@ -1 +1,4 @@
-const responsiveContainer = ''
+const btn = "px-4 py-2 rounded";
+
+export const primaryBtn = `${btn} text-white bg-purple-500 hover:bg-purple-700`;
+export const secondaryBtn = `${btn} bg-gray-400 hover:bg-gray-600`;

movie-search/src/common/components/MovieCard.tsx

@@ -1,6 +1,7 @@
 import FavoriteBtn from "@/common/components/FavoriteBtn";
 import ImgCard from "@/common/components/ImgCard";
 import Link from "next/link";
+import { primaryBtn } from "../classes";
 
 export interface IMovieCardItem {
   Title: string;
@@ -27,11 +28,8 @@ export default function MovieCard({ movie }: IMovieCardProps) {
         <p className=" text-sm text-gray-700">Circa: {movie.Year}</p>
 
         <div className="flex gap-3  justify-around">
-          <Link
-            href={`/Movie?i=${movie.imdbID}`}
-            className="block rounded-lg bg-purple-500 px-4 py-2 text-center font-semibold text-white hover:bg-purple-600"
-          >
-            Movie Details
+          <Link href={`/Movie?i=${movie.imdbID}`}>
+            <button className={primaryBtn}>Movie Details</button>
           </Link>
           <FavoriteBtn movie={movie} />
         </div>

movie-search/src/common/components/MovieList.tsx

@@ -6,7 +6,6 @@ export interface IMovieListProps {
 
 export default function MovieList({ movies }: IMovieListProps) {
   return (
-    <div className="container m-auto">
       <div
         className={`p-1 flex justify-around flex-wrap gap-4 sm:justify-center `}
       >
@@ -20,6 +19,5 @@ export default function MovieList({ movies }: IMovieListProps) {
           <h1>Nothing to show</h1>
         )}
       </div>
-    </div>
   );
 }