From d9c11d42295c4193a14e457deff44bf374db1f28 Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Tue, 5 Sep 2023 14:04:27 +0200
Subject: [PATCH] :lipstick: fixed table design

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 src/App.css |  5 +++++
 src/App.tsx | 26 ++++++++++++++------------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/App.css b/src/App.css
index 1eb0256..2b77342 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,6 +4,7 @@
 
 :root {
   --bg: #27374d;
+  --bg2: #1a2533;
   --text-1: #dde6ed;
 }
 
@@ -11,3 +12,7 @@ html {
   background-color: var(--bg);
   color: var(--text-1);
 }
+
+.card {
+  background-color: var(--bg2);
+}
diff --git a/src/App.tsx b/src/App.tsx
index eea2ade..57a05db 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -34,28 +34,30 @@ function App() {
 
   return (
     <>
-      <q.div>
-        <q.div>
+      <q.div className="flex flex-col justify-center items-center mx-auto w-3/4">
+        <q.div className="flex flex-col w-full items-center">
           <q.h1>All movies</q.h1>
-          {!loading && totalPages && (
-            <Pagination
-              currentPage={currentPage}
-              totalPages={calculatePages(totalPages)}
-              handlePageChange={handlePageChange}
-            />
-          )}
+          <q.div className="flex">
+            {!loading && totalPages && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={calculatePages(totalPages)}
+                handlePageChange={handlePageChange}
+              />
+            )}
+          </q.div>
         </q.div>
         {!loading && movies ? (
           <q.div>
-            <q.table>
+            <q.table className="border-separate border-spacing-y-5">
               <q.tr>
                 <q.th>Poster</q.th>
                 <q.th>Title</q.th>
                 <q.th>Year</q.th>
               </q.tr>
               {movies.map((movie: any) => (
-                <q.tr>
-                  <q.td>
+                <q.tr className="card rounded-md">
+                  <q.td className="p-2">
                     <q.img src={movie.Poster} alt={movie.Title} width="100" />
                   </q.td>
                   <q.td>{movie.Title}</q.td>