Feature - Dark theme

src/App.css

@@ -119,6 +119,7 @@ button:active {
 
 .search-books-results {
  padding: 80px 10px 20px;
+ height: 100vh;
 }
 
 /* books grid */

src/App.js

@@ -4,15 +4,16 @@ import Navigation from './components/Navigation/Navigation'
 import Main from './components/Main/Main'
 import { StoreProvider } from './Store'
 import { getAll, update } from './BooksAPI'
-
 const BooksApp = () => {
  const [searchResults, setSearchResults] = useState([])
  const [books, setBooks] = useState([])
  const [shouldUpdate, setShouldUpdate] = useState(true)
+ const [darkTheme, setDarkTheme] = useState(true)
 
  const currentlyReading = books && books.filter((book) => book.shelf === 'currentlyReading')
  const wantToRead = books && books.filter((book) => book.shelf === 'wantToRead')
  const read = books && books.filter((book) => book.shelf === 'read')
+ const darkStyle = { background: '#313131' }
 
  useEffect(() => {
  if (shouldUpdate) {
@@ -49,24 +50,27 @@ const BooksApp = () => {
  }
 
  return (
- <div className='app'>
- <Navigation />
+ <StoreProvider
+ value={{
+ books,
+ handleShelf,
+ searchResults,
+ setSearchResults,
+ currentlyReading,
+ read,
+ wantToRead,
+ darkTheme,
+ setDarkTheme,
+ }}
+ >
+ <div style={darkTheme ? darkStyle : null} className='app'>
+ <Navigation />
+
+ {/* Pass books down to make it available for any consumer component within the provider */}
 
- {/* Pass books down to make it available for any consumer component within the provider */}
- <StoreProvider
- value={{
- books,
- handleShelf,
- searchResults,
- setSearchResults,
- currentlyReading,
- read,
- wantToRead,
- }}
- >
  <Main />
- </StoreProvider>
- </div>
+ </div>
+ </StoreProvider>
  )
 }
 

src/components/Book/Book.js

@@ -5,8 +5,9 @@ import placeholder from '../../assets/book-placeholder.jpeg'
 
 const Book = ({ book, search }) => {
  const { title, authors, shelf, id, imageLinks } = book
-
- const { books } = useContext(StoreContext)
+ const { books, darkTheme } = useContext(StoreContext)
+ const titleDarkStyle = { color: '#7dad7b' }
+ const authorDarkStyle = { color: '#abb3af' }
 
  // if book list coming from search results, check if book is already is in any shelf mybooks
  const isBook = () => {
@@ -34,8 +35,12 @@ const Book = ({ book, search }) => {
  <BookShelfChanger shelf={shelf} book={isBook() !== undefined ? isBook() : book} search={search} />
  </div>
  </div>
- <div className='book-title'>{title}</div>
- <div className='book-authors'>{bookAuthors}</div>
+ <div style={darkTheme ? titleDarkStyle : null} className='book-title'>
+ {title}
+ </div>
+ <div style={darkTheme ? authorDarkStyle : null} className='book-authors'>
+ {bookAuthors}
+ </div>
  </div>
  </li>
  )

src/components/BookShelf/BookShelf.js

@@ -1,9 +1,16 @@
+import { useContext } from 'react'
+import { StoreContext } from '../../Store'
 import BookList from '../BookList/BookList'
 
 const BookShelf = ({ name, books }) => {
+ const { darkTheme } = useContext(StoreContext)
+
+ const darkStyle = { color: '#7dad7b', borderBottomColor: 'rgb(97 92 92' }
  return (
  <section className='bookshelf'>
- <h2 className='bookshelf-title'>{name && name}</h2>
+ <h2 style={darkTheme ? darkStyle : null} className='bookshelf-title'>
+ {name && name}
+ </h2>
  <div className='bookshelf-books'>
  <BookList books={books} />
  </div>

src/components/Navigation/Navigation.js

@@ -1,7 +1,24 @@
+import { useContext } from 'react'
+import { StoreContext } from '../../Store'
+
 const Navigation = () => {
+ const { darkTheme, setDarkTheme } = useContext(StoreContext)
+ const buttonText = darkTheme ? 'Switch to light theme' : 'Switch to dark theme'
+
+ const style = { display: 'flex', justifyContent: 'space-between', padding: '10px 30px' }
+ const buttonLightStyle = { background: '#554e4e', color: '#f2f2f2' }
+
+ const handleClick = (e) => {
+ e.target.blur()
+ setDarkTheme(!darkTheme)
+ }
+
  return (
- <nav className='list-books-title'>
+ <nav style={style} className='list-books-title'>
  <h1>MyReads</h1>
+ <button style={!darkTheme ? buttonLightStyle : null} onClick={handleClick}>
+ {buttonText}
+ </button>
  </nav>
  )
 }

src/components/Search/Search.js

@@ -1,16 +1,23 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useContext } from 'react'
+import { StoreContext } from '../../Store'
 import { Link } from 'react-router-dom'
 import BookList from '../BookList/BookList'
 import { search } from '../../BooksAPI'
 import { useDebounce } from '../../hooks/useDebounce'
 
 const Search = () => {
+ const { darkTheme } = useContext(StoreContext)
+
  // APi query value (delayed)
  const [query, setQuery] = useState('')
  const [searchResults, setSearchResults] = useState([])
  const [message, setMessage] = useState('')
  // Inpute value
  const [value, setValue] = useState('')
+ const darkStyleInner = { background: '#bec2be' }
+ const darkStyleOuter = { background: '#4b514d' }
+ const msgDarkStyle = { color: '#1fcf17' }
+ //#4b514d
 
  // fetch api
  useEffect(() => {
@@ -26,7 +33,7 @@ const Search = () => {
  if (query.length && !searchResults.length) {
  setTimeout(() => {
  setMessage('Not found! Try another search term!')
- }, 800)
+ }, 1000)
  }
  }, [query, searchResults])
 
@@ -42,21 +49,26 @@ const Search = () => {
 
  return (
  <div className='search-books'>
- <div className='search-books-bar'>
+ <div style={darkTheme ? darkStyleOuter : null} className='search-books-bar'>
  <Link className='close-search' to='/'>
  Close
  </Link>
  <div className='search-books-input-wrapper'>
  <input
+ style={darkTheme ? darkStyleInner : null}
  type='text'
- placeholder='Search by title or author and add to your reads'
+ placeholder='Search by title or author'
  onChange={handleChange}
  value={value}
  />
  </div>
  </div>
  <div className='search-books-results'>
- {searchResults.length ? <BookList search={true} books={searchResults} /> : <strong>{message}</strong>}
+ {searchResults.length ? (
+ <BookList search={true} books={searchResults} />
+ ) : (
+ <strong style={darkTheme ? msgDarkStyle : null}>{message}</strong>
+ )}
  </div>
  </div>
  )