From f50bdf9006e2341266cf9da49dd809e9c471d8f6 Mon Sep 17 00:00:00 2001
From: Liel Fridman <lielft@gmail.com>
Date: Sat, 19 Oct 2019 00:37:07 +0300
Subject: [PATCH] Improving the UI of book cards

---
 app/src/components/bookcard.js | 14 +++++++-------
 app/src/pages/index.js         |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/src/components/bookcard.js b/app/src/components/bookcard.js
index 45c07e1..e1c3b69 100644
--- a/app/src/components/bookcard.js
+++ b/app/src/components/bookcard.js
@@ -3,13 +3,13 @@ import React from "react"
 import StarRatings from 'react-star-ratings';
 
 const BookCard = ({ book }) => (
-    <div className="w-56 rounded overflow-hidden shadow-lg m-3">
-    <img className="w-full" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg" alt="Sunset in the mountains" />
-    <div className="px-6 py-4">
+    <div className="mx-auto flex-grow-0 w-11/12 md:w-56 rounded-lg overflow-hidden shadow-lg m-3 flex flex-column flex-wrap items-stretch">
+    <img className="self-start" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg" alt="Sunset in the mountains" />
+    <div className="px-6 py-4 w-full content-start">
       <div className="font-bold text-xl mb-0">{ book.title }</div>
       <div className="text-gray-700 font-bold text-base mb-1">
-        <span className="mr-2 align-middle">{ book.year }</span> 
-        <StarRatings 
+        <span className="mr-2 align-middle">{ book.year }</span>
+        <StarRatings
           rating={ parseFloat(book.rating) }
           numberOfStars={5}
           starDimension="18px"
@@ -21,8 +21,8 @@ const BookCard = ({ book }) => (
         { book.author }
       </p>
     </div>
-    <div className="px-6 py-4">
-      <span className="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{book.category}</span>
+    <div className="w-full self-end">
+      <span className="inline-block bg-blue-600 px-3 py-1 text-lg font-semibold text-gray-100 mr-2 w-full text-center">{book.category}</span>
     </div>
   </div>
 )
diff --git a/app/src/pages/index.js b/app/src/pages/index.js
index b5245e9..25b0de0 100644
--- a/app/src/pages/index.js
+++ b/app/src/pages/index.js
@@ -8,7 +8,7 @@ export default ({data}) => {
   return (
     <Layout>
       <SEO title="Home" />
-      <div className="flex flex-wrap">
+      <div className="flex flex-row flex-wrap">
       {data.allBooksJson.edges.map(function(x) {
         return (
           <BookCard book={x.node} key={x.node.id} />