From 558f0ec4e7fc76dc63dd0fe8c8331f6202b3e844 Mon Sep 17 00:00:00 2001
From: John Mantas <mantasjohn67@gmail.com>
Date: Sun, 12 Aug 2018 19:03:09 +0300
Subject: [PATCH] feat: Apply some new styling

---
 public/index.html     |  2 +-
 src/App.css           | 83 +++++++++++++++++++++++++++++++------------
 src/Book.js           |  8 ++++-
 src/icons/sort.svg    |  4 +++
 src/icons/zoom-in.svg |  5 +++
 src/index.css         |  3 +-
 src/list-books.js     |  2 +-
 7 files changed, 81 insertions(+), 26 deletions(-)
 create mode 100644 src/icons/sort.svg
 create mode 100644 src/icons/zoom-in.svg

diff --git a/public/index.html b/public/index.html
index 9da2a81..ddea326 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.css b/src/App.css
index 31ad511..52267a7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,20 +5,22 @@ body {
   line-height: 1.5;
 }
 body, .app {
-  background: white;
+  background: #A9BCD0;
 }
 
 /* main page */
 
 .list-books-title {
-  padding: 10px 0;
-  background: #2e7c31;
+  padding: 15px 0;
+  margin-bottom: 30px;
+  background: #1b1b1e;
   text-align: center;
+  text-transform: uppercase;
 }
 .list-books-title h1 {
   font-weight: 400;
   margin: 0;
-  color: white;
+  color: #58A4B0;
 }
 
 .list-books-content {
@@ -27,20 +29,26 @@ body, .app {
 }
 
 .bookshelf {
-  padding: 0 10px 20px;
+  margin: 0 5px;
+  padding-bottom: 25px;
+  background: linear-gradient(to bottom, #373F5132, #00000000);
+  border-radius: 20px;
 }
 
 @media (min-width: 600px) {
   .bookshelf {
-    padding: 0 20px 40px;
+    margin: 0 20px;
+    padding-bottom: 60px;
   }
 }
 
 .bookshelf-title {
-  border-bottom: 1px solid #dedede;
+  padding: 10px 0 0 20px;
+  margin-bottom: 0;
 }
 .bookshelf-books {
   text-align: center;
+  padding-top: 15px;
 }
 
 .open-search {
@@ -53,15 +61,18 @@ body, .app {
   width: 50px;
   height: 50px;
   border-radius: 50%;
-  background: #2e7d32;
+  background: #58A4B0;
   background-image: url('./icons/add.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 28px;
-  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  box-shadow: 0 5px 18px -7px #1b1b1e; 
   font-size: 0;
 }
-
+.open-search:hover a{
+  transform: scale(1.1);
+  box-shadow: 0 4px 18px -8px #1b1b1e;
+}
 /* search page */
 
 .search-books-bar {
@@ -90,7 +101,6 @@ body, .app {
   top: 20px;
   left: 15px;
   width: 50px;
-  height: 53px;
   background: white;
   background-image: url('./icons/arrow-back.svg');
   background-position: center;
@@ -115,44 +125,72 @@ body, .app {
   flex-wrap: wrap;
 }
 .books-grid li {
-  padding: 10px 15px;
+  margin: 10px 10px;
   text-align: left;
+  background-color: #eee;
+  border-radius: 7px;
 }
 
 .book {
-  width: 140px;
+  display: grid;
+  width: 150px;
+  height: 100%;
+  padding: 10px 10px 5px 10px;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+  border-radius: 7px;
 }
 .book-title,
 .book-authors {
   font-size: 0.8em;
 }
 .book-title {
-  margin-top: 10px;
+  margin-top: 13px;
+  align-self: center;
+}
+.book-details {
+  align-self: end;
+}
+.book-shelf {
+  margin: 10px 0 3px 0;
+  text-align: right;
+  font-size: 0.55em;
+  font-weight: 700;
+  color: #58A4B0;
 }
 .book-authors {
+  font-size: 0.65em;
+  border-top: 1px solid #58A4B0;
   color: #999;
 }
+.book-authors span {
+  font-weight: 700;
+}
 
 .book-top {
   position: relative;
   height: 200px;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
+  justify-content: center;
 }
 
 .book-shelf-changer {
   position: absolute;
-  right: 0;
-  bottom: -10px;
+  right: -5px;
+  bottom: -17px;
   width: 40px;
   height: 40px;
+  box-sizing: content-box;
+  border: 7px solid #eee;
   border-radius: 50%;
-  background: #60ac5d;
-  background-image: url('./icons/arrow-drop-down.svg');
+  background: #58A4B0;
+  background-image: url('./icons/sort.svg');
   background-repeat: no-repeat;
   background-position: center;
-  background-size: 20px;
-  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  background-size: 25px;
+}
+.book-shelf-changer:hover {
+  transform: scale(1.05);
 }
 .book-shelf-changer select {
   width: 100%;
@@ -164,8 +202,9 @@ body, .app {
 /* book cover */
 
 .book-cover {
-  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  box-shadow: 0 0 15px -5px #373F51; 
   background: #eee;
+  border-radius: 7px 7px 0 0;
 }
 .book-cover-title {
   padding: 20px 10px 0;
diff --git a/src/Book.js b/src/Book.js
index 3e800f1..ba66cec 100644
--- a/src/Book.js
+++ b/src/Book.js
@@ -45,7 +45,13 @@ class Book extends React.Component {
           </div>
         </div>
         <div className="book-title">{title}</div>
-        <div className="book-authors">{authors}</div>
+
+        <div className="book-details">
+          {(this.state.shelf && this.state.shelf !== "none") && (
+            <div className="book-shelf">You {this.state.shelf} it!</div>
+          )}
+          <div className="book-authors">by <span>{authors}</span></div>
+        </div>
       </div>
     );
   }
diff --git a/src/icons/sort.svg b/src/icons/sort.svg
new file mode 100644
index 0000000..f4b70a1
--- /dev/null
+++ b/src/icons/sort.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="white" d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
diff --git a/src/icons/zoom-in.svg b/src/icons/zoom-in.svg
new file mode 100644
index 0000000..af65bac
--- /dev/null
+++ b/src/icons/zoom-in.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>
+</svg>
diff --git a/src/index.css b/src/index.css
index e2370ce..633b4df 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,9 +3,10 @@ html {
 }
 *, *:before, *:after {
   box-sizing: inherit;
+  transition: 0.1s;
 }
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
diff --git a/src/list-books.js b/src/list-books.js
index 38ec0a1..6471804 100644
--- a/src/list-books.js
+++ b/src/list-books.js
@@ -11,7 +11,7 @@ class ListBooks extends React.Component {
     return (
       <div className="list-books">
         <div className="list-books-title">
-          <h1>MyReads</h1>
+          <h1>My Reads</h1>
         </div>
         <div className="list-books-content">
           <div>