Merge branch 'development' into feature/results-loading-notification

package.json

@@ -10,7 +10,7 @@
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.4"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -23,6 +23,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
   <link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
+    integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
   <title>Books Plus</title>
 </head>
 

src/App.jsx

@@ -48,12 +48,8 @@ export default function App() {
     <div className="App">
       <Navbar />
       <Header />
-      <Search
-        handleSubmit={handleSubmit}
-        error={error}
-        queryHistory={queryHistory}
-      />
-      <CardList books={books.map(googleBookToAppBook)} />
+      <Search handleSubmit={handleSubmit} error={error} queryHistory={queryHistory} />
+      <CardList books={books.map(googleBookToAppBook)} isLastPage={isLastPage} />
       <div>{areResultsLoading ? "Loading" : ""}</div>
       <Footer />
     </div>

src/components/CardList.jsx

@@ -1,8 +1,17 @@
-import React from "react";
+import React, { Fragment } from "react";
 import Card from "./Card";
 
 export default function CardList(props) {
   const volumes = props.books;
   const card = (volume, index) => <Card {...volume} key={index} />;
-  return <div>{volumes.map(card)}</div>;
+  return (
+    <Fragment>
+      <div>{volumes.map(card)}</div>
+      {props.isLastPage && props.books.length > 3 && (
+        <div className="scroll-end-message">
+          <em>No more results!</em>
+        </div>
+      )}
+    </Fragment>
+  );
 }

src/components/Footer.jsx

@@ -1,9 +1,27 @@
-import React from "react";
+import React from "react"
+import logo from '../assets/img/logo.svg'
+import '../css/Footer.css'
 
 export default function Footer() {
+  const styles = {
+    height: 70,
+    padding: 10
+  }
+
   return (
-    <footer>
-      <p>*Footer info goes here*</p>
+    <footer className="footer bg-dark">
+      <img src={logo} style={styles} alt="logo" />
+      <div class="social">
+        <a target='_blank' href="https://twitter.com/ChinguCollabs?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="fab fa-twitter fa-2x"></i></a>
+        <a target='_blank' href="https://www.youtube.com/channel/UCS7zmJXbe7FgTC3sHlUf4jw"><i class="fab fa-youtube fa-2x"></i></a>
+      </div>
+      <p>Copyright &copy; 2020 - BooksPlus</p>
+
+      {/* <div class="social">
+        <a target='_blank' href="https://twitter.com/ChinguCollabs?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="fab fa-twitter fa-2x"></i></a>
+        <a target='_blank' href="https://www.youtube.com/channel/UCS7zmJXbe7FgTC3sHlUf4jw"><i class="fab fa-youtube fa-2x"></i></a>
+      </div>
+      <p>Copyright &copy; 2020 - BooksPlus</p> */}
     </footer>
   );
 }

src/components/Navbar.jsx

@@ -1,20 +1,18 @@
 import React from "react";
+import logo from '../assets/img/logo.svg'
 import '../css/Navbar.css'
 
 export default function Navbar() {
   const styles = {
-    height: 100,
+    height: 70,
     padding: 10
   }
 
   return (
     <nav>
-      <img src={require("../assets/img/logo.svg")} style={styles} alt="logo" />
+      <img src={logo} style={styles} alt="logo" />
       <ul className="nav-links">
-        {/* <li><a href="#">Home</a></li>
-        <li><a href="#">Team</a></li>
-        <li><a href="#">Contacts</a></li>
-        <li><a href="#">Logout</a></li> */}
+        <li><a target='_blank' href="https://github.com/chingu-voyages/v24-geckos-team-02/graphs/contributors">About</a></li>
       </ul>
     </nav>
   )

src/css/Footer.css

@@ -0,0 +1,30 @@
+.footer {
+    display: flex;
+    justify-content: space-around;
+    min-height: 10vh;
+    align-items: center;
+    position: fixed;
+    bottom: 0px;
+    width: 100vw;
+}
+
+.footer a {
+    color: #fff;
+}
+
+.footer a:hover {
+    color: #34AAE6;
+}
+
+.footer .social > * {
+    margin-right: 30px;
+}
+
+.social {
+  margin-bottom: 10px;
+}
+
+.bg-dark {
+   background: #333;
+   color: #fff;
+}

src/css/Navbar.css

@@ -17,6 +17,7 @@ nav {
   justify-content: space-around;
   min-height: 10vh;
   align-items: center;
+  background-color: rgb(238, 236, 236);
 }
 
 nav .nav-links {