From ef9fc038433638becf58ec63b856f8abd53c9b8e Mon Sep 17 00:00:00 2001
From: Elysia Ong <elysia.owx@gmail.com>
Date: Mon, 12 Oct 2020 16:39:39 +0800
Subject: [PATCH] Style book card

---
 app/src/components/amazonurl.js |  2 +-
 app/src/components/bookcard.js  | 41 ++++++++++++++++++---------------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/src/components/amazonurl.js b/app/src/components/amazonurl.js
index dd60c7c..3d5486a 100644
--- a/app/src/components/amazonurl.js
+++ b/app/src/components/amazonurl.js
@@ -8,7 +8,7 @@ const getTargetURL = (book) => {
 export default ({ book }) => {
     return (
         <OutboundLink href={getTargetURL(book)} target="_blank">
-            <img alt="Amazon link" style={{ "width": "30px" }} src="https://img.icons8.com/color/48/000000/amazon.png"/>
+            <img alt="Amazon link" style={{ marginBottom: "-8px" }} src="https://img.icons8.com/color/48/000000/amazon.png"/>
         </OutboundLink>
     )
 }
diff --git a/app/src/components/bookcard.js b/app/src/components/bookcard.js
index 9c469ba..be16d3c 100644
--- a/app/src/components/bookcard.js
+++ b/app/src/components/bookcard.js
@@ -14,36 +14,39 @@ const truncateContent = (content) => {
 };
 
 const BookCard = ({ book }) => (
-  <Card style={{ width: "44rem", height: "21rem", marginBottom: "15px" }}>
+  <Card style={{ width: "44rem", height: "18rem", marginBottom: "15px" }}>
     <Row aria-label={book.title}>
       <Col xs={3}>
         <Card.Img
-          style={{ height: "12rem", width: "8rem", paddingLeft: "25px", paddingRight: "-15px", paddingTop: "30px" }}
+          style={{ width: "9rem", paddingLeft: "25px", paddingRight: "-15px", paddingTop: "30px" }}
           src={book.image_url}
           alt={book.title}
         />
       </Col>
       <Col>
-        <Card.Body>
+        <Card.Body style={{ marginLeft: "-30px"}}>
           <Card.Title>{book.title}</Card.Title>
           <Card.Subtitle className="mb-2 text-muted">
-            <StarRatings
-              rating={parseFloat(book.rating)}
-              numberOfStars={5}
-              starDimension="18px"
-              starSpacing="1px"
-              starRatedColor="#fa604a"
-            />
-            <br />
-            {book.author} <b>{book.year ? book.year: null}</b>
-            <br />
-            {book.amazon_url ? <AmazonURL book={book} />: null}
-            <br />
-            <a href={book.url} >
-              <GoodReadsImage />
-            </a>
+            <div>{book.author} <b>{book.year ? book.year: null}</b></div>
+            <div>
+              <StarRatings
+                rating={parseFloat(book.rating)}
+                numberOfStars={5}
+                starDimension="18px"
+                starSpacing="1px"
+                starRatedColor="#fa604a"
+              />
+            </div>
+            <div style={{ display: "flex", alignItems: "center", paddingTop: ".75rem" }}>
+              <div style= {{ width: "30px", height: "30px", marginRight: "5px" }}>
+                {book.amazon_url ? <AmazonURL book={book} />: null}
+              </div>
+              <div style= {{ width: "30px", height: "30px" }}>
+                <a href={book.url} ><GoodReadsImage /></a>
+              </div>
+            </div>
           </Card.Subtitle>
-          <p>
+          <p style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }}>
             {truncateContent(book.description)}
           </p>
         </Card.Body>