adjust style

public/index.html

@@ -5,6 +5,7 @@
     <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 rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -11,7 +11,7 @@ body, .app {
 /* main page */
 
 .list-books-title {
-  padding: 10px 0;
+  padding: 16px 0;
   background: #2e7c31;
   text-align: center;
 }
@@ -50,16 +50,21 @@ body, .app {
 }
 .open-search a {
   display: block;
-  width: 50px;
+  width: 200px;
   height: 50px;
-  border-radius: 50%;
+  border-radius: 25px;
   background: #2e7d32;
-  background-image: url('./icons/add.svg');
+  /*background-image: url('./icons/add.svg');*/
+  background-image: url('./icons/search.svg');
   background-repeat: no-repeat;
-  background-position: center;
+  background-position: 20px;
-  background-size: 28px;
+  background-size: 14px;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-  font-size: 0;
+  font-size: 14px;
+  color: white;
+  text-decoration: none;
+  text-align: center;
+  padding-top: 14px;
 }
 
 /* search page */
@@ -172,3 +177,15 @@ body, .app {
   text-align: center;
   font-size: 0.8em;
 }
+
+
+/* logo */
+.logo {
+  width: 30px;
+  height: 30px;
+  background-image: url('./icons/logo.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  display: inline-block;
+  margin-right: 10px;
+}

src/App.js

@@ -78,7 +78,7 @@ class BooksApp extends React.Component {
             )}/>
 
             <div className="open-search">
-              <Link to="/search">Add a book</Link>
+              <Link to="/search">Search for Books</Link>
             </div>
 
         </div>

src/Bookshelf.css

@@ -0,0 +1,69 @@
+.current {
+	padding: 30px 0 !important;
+	background: #f9f8f2;
+	background-image: url('./icons/bg.png');
+  	background-repeat: no-repeat;
+  	background-position: top center;
+  	background-size: cover;
+	border: 0;
+	border-bottom: 1px solid #eaeaea;
+}
+
+.read {
+	padding: 30px 0 !important;
+	border: 0;
+	border-bottom: 1px solid #eaeaea;
+}
+
+.bookshelf-title {
+	width: 1024px;
+	margin: 20px auto;
+	border: 0 !important; 
+	font-family: 'Montserrat', sans-serif;
+	font-weight: 600;
+}
+
+@media screen and (max-width: 480px) {
+	.bookshelf-title {
+		text-align: center;
+	}
+}
+
+.bookshelf-books {
+	width: 1024px;
+	margin: 20px auto;
+}
+
+.book-title {
+	font-family: 'Montserrat', sans-serif;
+	font-weight: 600;
+	margin-top: 15px;
+    margin-bottom: 1px;
+    line-height: 17px;
+}
+
+.book-authors {
+	font-family: 'Montserrat', sans-serif;
+	font-weight: 300;
+	font-size: 12px;
+}
+
+.list-books-title > h1 {
+	font-family: 'Montserrat', sans-serif;
+	font-weight: 600;
+	font-size: 24px;
+    margin: 3px 0;
+    vertical-align: super;
+    display: inline-block;
+}
+
+@media screen and (max-width: 1024px) {
+	.bookshelf-title {
+		width: 100%;
+		padding-left: 30px;
+		padding-right: 30px;
+	}
+	.bookshelf-books {
+		width: 100%;
+	}
+}

src/Bookshelf.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import './Bookshelf.css'
 
 class Bookshelf extends Component {
 
@@ -9,11 +10,12 @@ class Bookshelf extends Component {
 
       <div className="list-books">
         <div className="list-books-title">
+          <span className="logo"></span>
           <h1>MyReads</h1>
         </div>
         <div className="list-books-content">
           <div>
-            <div className="bookshelf">
+            <div className="bookshelf current">
               <h2 className="bookshelf-title">Currently Reading</h2>
               <div className="bookshelf-books">
                 <ol className="books-grid">
@@ -45,7 +47,7 @@ class Bookshelf extends Component {
                 </ol>
               </div>
             </div>
-            <div className="bookshelf">
+            <div className="bookshelf read">
               <h2 className="bookshelf-title">Want to Read</h2>
               <div className="bookshelf-books">
                 <ol className="books-grid">
@@ -77,7 +79,7 @@ class Bookshelf extends Component {
                 </ol>
               </div>
             </div>
-            <div className="bookshelf">
+            <div className="bookshelf read">
               <h2 className="bookshelf-title">Read</h2>
               <div className="bookshelf-books">
                 <ol className="books-grid">

src/icons/logo.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 45.7 38.1" style="enable-background:new 0 0 45.7 38.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#5DA05C;}
+	.st1{fill:#4E934D;}
+	.st2{fill:#FFDE56;}
+	.st3{fill:#FFD523;}
+	.st4{fill:#FFF0B3;}
+	.st5{fill:#FFF4CA;}
+</style>
+<g id="Layer_1">
+</g>
+<g id="Layer_2">
+	<g>
+		<path class="st0" d="M42.8,5.7c-20.9-4.2-19.7-4-19.9-4c0,0,0,0,0,0c-0.2,0,1-0.2-19.3,4C2.9,5.9,2.5,6.4,2.5,7.1v29.7
+			c0,0.9,0.8,1.5,1.6,1.3l14.3-2.7c1.8,3.7,7.1,3.7,8.9-0.1c0,0,0,0,0,0l15,2.8c0.8,0.2,1.6-0.5,1.6-1.3V7.1
+			C43.8,6.4,43.4,5.9,42.8,5.7z"/>
+		<path class="st1" d="M42.8,5.7c-21-4.2-19.7-4-19.9-4v36.4c1.9,0,3.6-1.1,4.4-2.8l15,2.8c0.8,0.2,1.6-0.5,1.6-1.3V7.1
+			C43.8,6.4,43.4,5.9,42.8,5.7z"/>
+		<path class="st2" d="M45.7,3.1v27.8c0,0.9-0.9,1.6-1.8,1.3c-0.1,0-4.7-1.7-10.3-1.7c-5.6,0-10.2,1.6-10.3,1.7
+			c-0.3,0.1-0.6,0.1-0.9,0c-0.1,0-4.7-1.7-10.3-1.7c-5.6,0-10.2,1.6-10.3,1.7C0.9,32.5,0,31.8,0,30.9V3.1C0,2.5,0.4,2,0.9,1.8
+			C1.1,1.7,6.1,0,12.1,0c5.1,0,9.4,1.2,10.7,1.7C24.2,1.2,28.5,0,33.6,0c6,0,11,1.7,11.2,1.8C45.3,2,45.7,2.5,45.7,3.1z"/>
+		<path class="st3" d="M45.7,3.1v27.8c0,0.9-0.9,1.6-1.8,1.3c-0.1,0-4.7-1.7-10.3-1.7c-5.6,0-10.2,1.6-10.3,1.7
+			c-0.2,0.1-0.3,0.1-0.5,0.1V1.7C24.2,1.2,28.5,0,33.6,0c6,0,11,1.7,11.2,1.8C45.3,2,45.7,2.5,45.7,3.1z"/>
+		<g>
+			<path class="st4" d="M39.3,8.8c-0.2,0.6-0.7,0.9-1.3,0.9c-0.2,0-0.3,0-0.5-0.1c-1.3-0.5-2.6-0.7-4-0.7c-1.2,0-2.4,0.2-3.6,0.6
+				l-0.4,0.1c-0.7,0.2-1.5-0.2-1.7-0.9C27.6,8,28,7.3,28.7,7.1l0.4-0.1c1.4-0.5,2.9-0.7,4.4-0.7c1.7,0,3.3,0.3,4.9,0.8
+				C39.2,7.3,39.6,8.1,39.3,8.8z"/>
+			<path class="st4" d="M39.3,16.2c-0.2,0.6-0.7,0.9-1.3,0.9c-0.2,0-0.3,0-0.5-0.1c-1.3-0.5-2.6-0.7-4-0.7c-1.2,0-2.4,0.2-3.6,0.6
+				l-0.4,0.1c-0.7,0.2-1.5-0.2-1.7-0.9c-0.2-0.7,0.2-1.5,0.9-1.7l0.4-0.1c1.4-0.5,2.9-0.7,4.4-0.7c1.7,0,3.3,0.3,4.9,0.8
+				C39.2,14.7,39.6,15.5,39.3,16.2z"/>
+			<path class="st4" d="M39.3,23.6c-0.2,0.6-0.7,0.9-1.3,0.9c-0.2,0-0.3,0-0.5-0.1c-1.3-0.5-2.6-0.7-4-0.7c-1.2,0-2.4,0.2-3.6,0.6
+				l-0.4,0.1c-0.7,0.2-1.5-0.2-1.7-0.9c-0.2-0.7,0.2-1.5,0.9-1.7l0.4-0.1c1.4-0.5,2.9-0.7,4.4-0.7c1.7,0,3.3,0.3,4.9,0.8
+				C39.2,22.2,39.6,22.9,39.3,23.6z"/>
+		</g>
+		<g>
+			<path class="st5" d="M17.8,8.8c-0.2,0.6-0.7,0.9-1.3,0.9c-0.2,0-0.3,0-0.5-0.1c-1.3-0.5-2.6-0.7-4-0.7c-1.2,0-2.4,0.2-3.6,0.6
+				L8.1,9.6C7.4,9.9,6.6,9.5,6.4,8.8C6.1,8,6.5,7.3,7.2,7.1l0.4-0.1c1.4-0.5,2.9-0.7,4.4-0.7c1.7,0,3.3,0.3,4.9,0.8
+				C17.7,7.3,18.1,8.1,17.8,8.8z"/>
+			<path class="st5" d="M17.8,16.2c-0.2,0.6-0.7,0.9-1.3,0.9c-0.2,0-0.3,0-0.5-0.1c-1.3-0.5-2.6-0.7-4-0.7c-1.2,0-2.4,0.2-3.6,0.6
+				l-0.4,0.1c-0.7,0.2-1.5-0.2-1.7-0.9c-0.2-0.7,0.2-1.5,0.9-1.7l0.4-0.1c1.4-0.5,2.9-0.7,4.4-0.7c1.7,0,3.3,0.3,4.9,0.8
+				C17.7,14.7,18.1,15.5,17.8,16.2z"/>
+			<path class="st5" d="M17.8,23.6c-0.2,0.6-0.7,0.9-1.3,0.9c-0.2,0-0.3,0-0.5-0.1c-1.3-0.5-2.6-0.7-4-0.7c-1.2,0-2.4,0.2-3.6,0.6
+				l-0.4,0.1c-0.7,0.2-1.5-0.2-1.7-0.9c-0.2-0.7,0.2-1.5,0.9-1.7l0.4-0.1c1.4-0.5,2.9-0.7,4.4-0.7c1.7,0,3.3,0.3,4.9,0.8
+				C17.7,22.2,18.1,22.9,17.8,23.6z"/>
+		</g>
+	</g>
+</g>
+</svg>

src/icons/search.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
+<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" fill="#FFFFFF"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>