From 8afe43cb96f9ae0c3b392e640f6e0ba029f91dcf Mon Sep 17 00:00:00 2001
From: cscough <curtiscoughenour0@gmail.com>
Date: Sun, 26 May 2024 22:44:56 -0400
Subject: [PATCH] added common className variables for buttons, fixed some
 styling with the mobile view

---
 movie-search/__tests__/omdb.test.jsx          |  1 -
 movie-search/src/app/Search/SearchBar.tsx     |  5 +++--
 movie-search/src/app/page.module.css          |  3 ++-
 movie-search/src/app/page.tsx                 | 21 +++++++------------
 movie-search/src/common/classes.ts            |  5 ++++-
 .../src/common/components/MovieCard.tsx       |  8 +++----
 .../src/common/components/MovieList.tsx       |  2 --
 7 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/movie-search/__tests__/omdb.test.jsx b/movie-search/__tests__/omdb.test.jsx
index d74f27c..3f0af43 100644
--- a/movie-search/__tests__/omdb.test.jsx
+++ b/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.
\ No newline at end of file
diff --git a/movie-search/src/app/Search/SearchBar.tsx b/movie-search/src/app/Search/SearchBar.tsx
index ebd337c..281de12 100644
--- a/movie-search/src/app/Search/SearchBar.tsx
+++ b/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>
diff --git a/movie-search/src/app/page.module.css b/movie-search/src/app/page.module.css
index 5c4b1e6..641ae81 100644
--- a/movie-search/src/app/page.module.css
+++ b/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);
diff --git a/movie-search/src/app/page.tsx b/movie-search/src/app/page.tsx
index ae25cb3..2541eee 100644
--- a/movie-search/src/app/page.tsx
+++ b/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>
diff --git a/movie-search/src/common/classes.ts b/movie-search/src/common/classes.ts
index dce70ee..b98bdf0 100644
--- a/movie-search/src/common/classes.ts
+++ b/movie-search/src/common/classes.ts
@@ -1 +1,4 @@
-const responsiveContainer = ''
\ No newline at end of file
+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`;
diff --git a/movie-search/src/common/components/MovieCard.tsx b/movie-search/src/common/components/MovieCard.tsx
index 245263d..91f1605 100644
--- a/movie-search/src/common/components/MovieCard.tsx
+++ b/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>
diff --git a/movie-search/src/common/components/MovieList.tsx b/movie-search/src/common/components/MovieList.tsx
index c002f12..de99597 100644
--- a/movie-search/src/common/components/MovieList.tsx
+++ b/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>
   );
 }