diff --git a/src/components/App.jsx b/src/components/App.jsx index baa69ff..cfbf2c8 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -7,7 +7,7 @@ import { SearchResultInfo } from './SearchResultInfo'; import ErrorAlert from './ErrorAlert'; import NoResultsAlert from './NoResultsAlert'; -import { Container, Row } from 'react-bootstrap'; +import { Container } from 'react-bootstrap'; import fetchImages from 'services/api'; @@ -93,25 +93,19 @@ class App extends Component { {error && } {images.length > 0 && !error ? ( <> - - - - - - - - {totalHits > images.length && ( - - )} - + + + + + {totalHits > images.length && ( + + )} ) : images.length === 0 && searchQuery && !error ? ( - - - + ) : ( !error && )} diff --git a/src/components/Button.jsx b/src/components/Button.jsx index e4b2f2d..3d7ba4d 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -3,14 +3,16 @@ import Button from 'react-bootstrap/Button'; export const LoadMoreBtn = ({ onClick }) => { return ( - - - - - - - + + + + + + + + + ); }; diff --git a/src/components/ImageGallery.jsx b/src/components/ImageGallery.jsx index 8e0e95a..c4d6757 100644 --- a/src/components/ImageGallery.jsx +++ b/src/components/ImageGallery.jsx @@ -31,33 +31,35 @@ class ImageGallery extends Component { const { showModal, selectedImage } = this.state; return ( - - - {images.map( - ( - { id, webformatURL, largeImageURL, tags, user, userImageURL }, - index - ) => ( - - ) - )} - + + + + {images.map( + ( + { id, webformatURL, largeImageURL, tags, user, userImageURL }, + index + ) => ( + + ) + )} + - - + + + ); } } diff --git a/src/components/NoResultsAlert.jsx b/src/components/NoResultsAlert.jsx index 1adbab3..4f2064c 100644 --- a/src/components/NoResultsAlert.jsx +++ b/src/components/NoResultsAlert.jsx @@ -2,21 +2,23 @@ import { Container, Row, Col, Alert } from 'react-bootstrap'; function NoResultsAlert({ searchQuery }) { return ( - - - - - Oops! -

- We couldn't find any results for{' '} - {searchQuery}. -

-
-

Please try a different search term.

-
- -
-
+ + + + + + Oops! +

+ We couldn't find any results for{' '} + {searchQuery}. +

+
+

Please try a different search term.

+
+ +
+
+
); } diff --git a/src/components/SearchResultInfo.jsx b/src/components/SearchResultInfo.jsx index 52e7757..bf285d7 100644 --- a/src/components/SearchResultInfo.jsx +++ b/src/components/SearchResultInfo.jsx @@ -1,14 +1,16 @@ import { Container, Row, Col, Alert } from 'react-bootstrap'; export const SearchResultInfo = ({ searchQuery, totalHits }) => ( - - - - - Showing {totalHits} results for - {searchQuery} - - - - + + + + + + Showing {totalHits} results for + {searchQuery} + + + + + );