refactor: convert CSS modules to Tailwind

app/components/BookCard/BookCard.tsx

@@ -1,4 +1,3 @@
-import styles from "./BookCard.module.css";
 import { BookCover } from "~/components/BookCover/BookCover";
 import { FavoriteButton } from "~/components/FavoriteButton/FavoriteButton";
 import type { Book } from "~/api/types";
@@ -12,22 +11,22 @@ function BookCard({ book }: BookCardProps) {
   const [searchParams] = useSearchParams();
 
   return (
-    <article className={styles.bookCard}>
+    <article className="relative flex flex-col h-full box-border rounded-base border border-border bg-surface">
       <FavoriteButton book={book} />
 
       <Link
         to={{
           pathname: `/book/${book.id}`,
           search: searchParams.toString(),
         }}
-        className={styles.bookCardLink}
+        className="flex flex-1 flex-col h-full w-full cursor-pointer box-border rounded-base p-6 hover:border hover:border-theme"
 
         aria-label={`View details for ${book.title}`}
       >
         <BookCover book={book} />
 
-        <section className={styles.info}>
-          <h3 className={styles.title}>{book.title}</h3>
+        <section className="mt-4 text-[0.9rem]">
+          <h3 className="mb-2 text-base">{book.title}</h3>
           <p>{book.author.join(", ")}</p>
           <p>{book.publishedYear ?? "Unknown"}</p>
         </section>

app/components/BookCover/BookCover.tsx

@@ -1,4 +1,3 @@
-import styles from "./BookCover.module.css";
 import type { Book } from "~/api/types";
 
 interface BookCoverProps {
@@ -10,10 +9,12 @@ function BookCover({ book }: BookCoverProps) {
     <img
       src={book.coverImage}
       alt={`Book cover of ${book.title}`}
-      className={styles.coverImage}
+      className="w-full object-contain px-6 py-3"
     />
   ) : (
-    <p className={styles.coverPlaceholder}>No cover available</p>
+    <p className="flex items-center justify-center mx-6 my-3 aspect-2/3 rounded-base bg-background text-center text-sm text-theme">
+      No cover available
+    </p>
   );
 }
 

app/components/FavoriteButton/FavoriteButton.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import styles from "./FavoriteButton.module.css";
 import { CheckIcon } from "~/components/icons/CheckIcon";
 import type { Book } from "~/api/types";
 
@@ -31,7 +30,7 @@ function FavoriteButton({ book }: FavoriteButtonProps) {
   return (
     <button
       type="button"
-      className={`${styles.favoriteButton} ${favorites.includes(book.id) ? styles.favoriteButtonActive : ""}`}
+      className={`absolute right-2 top-2 flex items-center justify-center h-8 w-8 cursor-pointer bg-surface text-2xl rounded-base border ${favorites.includes(book.id) ? "border-success text-success" : "border-border text-theme hover:border-theme"}`}
       onClick={saveFavorite}
       aria-label={
         // Toggle the accessibility label based on the current state for screen readers

app/components/FilterBooksSection/FilterBooksSection.tsx

@@ -1,4 +1,3 @@
-import styles from "./FilterBooksSection.module.css";
 import type { BookFilters } from "~/api/types";
 import { languageCodes } from "~/api/languageCodes";
 import { CircleQuestionMark } from "~/components/icons/CircleQuestionMark";
@@ -71,17 +70,17 @@ function FilterBooksSection() {
   }, [debouncedFilters, rawFilters, setSearchParams]);
 
   return (
-    <section className={styles.filterBooksSection}>
-      <h2>Filter Books</h2>
-      <ul className={styles.filterInputsList}>
+    <section className="flex flex-col items-center mb-8">
+      <h2 className="my-4">Filter Books</h2>
+      <ul className="grid grid-cols-2 gap-4 max-[900px]:grid-cols-1">
         {FILTER_INPUTS.map((input) => (
-          <li key={input.name} className={styles.filterInputContainer}>
-            <label htmlFor={input.name} className={styles.filterLabel}>
+          <li key={input.name} className="flex flex-col gap-2">
+            <label htmlFor={input.name} className="flex items-center gap-2">
               {input.name.charAt(0).toUpperCase() + input.name.slice(1)}
             </label>
             <input
               type="text"
-              className={styles.filterInput}
+              className="rounded-base border border-border bg-surface p-2 text-base hover:border-theme"
               name={input.name}
               aria-label={input.ariaLabel}
               placeholder={input.placeholder}
@@ -93,18 +92,19 @@ function FilterBooksSection() {
             />
           </li>
         ))}
-        <li className={styles.filterInputContainer}>
-          <label htmlFor="language" className={styles.filterLabel}>
+        <li className="flex flex-col gap-2">
+          <label htmlFor="language" className="flex items-center gap-2">
             Language
             <span
+              className="flex items-center"
               title="Only show books that have an edition in the selected language"
               role="tooltip"
             >
               <CircleQuestionMark />
             </span>
           </label>
           <select
-            className={styles.filterInput}
+            className="rounded-base border border-border bg-surface p-2 text-base hover:border-theme"
             name="language"
             aria-label="Search for language"
             value={filters.language ?? ""}

app/components/Footer/Footer.tsx

@@ -1,8 +1,6 @@
-import styles from "./Footer.module.css";
-
 function Footer() {
   return (
-    <footer className={styles.footer}>
+    <footer className="flex items-center justify-between bg-footer px-10 py-8 text-sm text-surface max-[800px]:flex-col max-[800px]:justify-center max-[800px]:gap-1">
       <p>IT2810 Webutvikling - Gruppe 37 - Prosjekt 1</p>
       <p>2026</p>
     </footer>

app/components/Header/Header.tsx

@@ -1,9 +1,7 @@
-import styles from "./Header.module.css";
-
 function Header() {
   return (
-    <header className={styles.header}>
-      <h1 className={styles.title}>Readr</h1>
+    <header className="flex items-center justify-between border-b-2 border-theme bg-surface px-10 py-3.75">
+      <h1 className="m-0 text-2xl">Readr</h1>
     </header>
   );
 }

app/components/MainLoading/MainLoading.tsx

@@ -1,8 +1,6 @@
-import styles from "./MainLoading.module.css";
-
 function MainLoading() {
   return (
-    <main className={styles.mainLoading}>
+    <main className="flex flex-col items-center justify-center gap-4">
       <p>Welcome to Readr!</p>
       <p>Loading...</p>
     </main>