style(ui): update styles and add search results message

Valik3201 · Valik3201 · commit 09563e7ff1f4 · 2024-01-26T23:20:18.000+01:00
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="light">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -35,7 +35,7 @@
     </script>
     <!-- End Single Page Apps for GitHub Pages -->
   </head>
-  <body>
+  <body class="bg-light">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -3,6 +3,8 @@ import Searchbar from './Searchbar';
 import { ImageGallery } from './ImageGallery';
 import ImagePortalWelcome from './ImagePortalWelcome';
 
+import { Container, Row, Col, Alert } from 'react-bootstrap';
+
 import axios from 'axios';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -17,6 +19,7 @@ class App extends Component {
 
     this.state = {
       images: [],
+      searchQuery: '',
     };
   }
 
@@ -25,7 +28,7 @@ class App extends Component {
       const response = await axios.get(
         `/?q=${searchQuery}&page=1&key=${API_KEY}&image_type=photo&orientation=horizontal&per_page=12`
       );
-      this.setState({ images: response.data.hits });
+      this.setState({ images: response.data.hits, searchQuery });
     } catch (error) {
       console.error('Error searching for images:', error);
     } finally {
@@ -40,18 +43,29 @@ class App extends Component {
   }
 
   render() {
-    const { images } = this.state;
+    const { images, searchQuery } = this.state;
 
     return (
       <>
         <Searchbar onSearch={this.getImages} />
-        <div>
+        <Container>
           {images.length > 0 ? (
-            <ImageGallery images={images} />
+            <Row className="d-flex justify-content-center mb-5 mx-auto">
+              <Alert
+                variant="primary"
+                as={Col}
+                style={{ width: 'fit-content' }}
+              >
+                Showing results for
+                <span className="fw-bold"> {searchQuery}</span>
+              </Alert>
+
+              <ImageGallery images={images} />
+            </Row>
           ) : (
             <ImagePortalWelcome />
           )}
-        </div>
+        </Container>
       </>
     );
   }
diff --git a/src/components/ImageGallery.jsx b/src/components/ImageGallery.jsx
@@ -1,7 +1,7 @@
 import { Container, Col, Row, Image } from 'react-bootstrap';
 
 export const ImageGallery = ({ images }) => (
-  <Container className="justify-content-center pt-4 mt-5 mb-5">
+  <Container className="justify-content-center">
     <Row xs={1} sm={2} md={3} lg={4} className="g-4">
       <ImageGalleryItem images={images} />
     </Row>
diff --git a/src/components/ImagePortalWelcome.jsx b/src/components/ImagePortalWelcome.jsx
@@ -3,8 +3,8 @@ import { Container, Row, Col, Alert } from 'react-bootstrap';
 function ImagePortalWelcome() {
   return (
     <Container>
-      <Row className="d-flex align-items-center justify-content-center vh-100">
-        <Col xs={12} md={6}>
+      <Row className="d-flex align-items-center justify-content-center vh-100 position-absolute top-0 start-0">
+        <Col xs={8} md={6}>
           <Alert variant="success">
             <Alert.Heading>Hey, nice to see you!</Alert.Heading>
             <p>
diff --git a/src/components/Searchbar.jsx b/src/components/Searchbar.jsx
@@ -29,6 +29,7 @@ class Searchbar extends Component {
     this.setState({ theme: selectedTheme });
 
     document.documentElement.setAttribute('data-bs-theme', selectedTheme);
+    document.body.className = `bg-${selectedTheme}`;
   };
 
   handleInputChange = e => {
diff --git a/src/index.css b/src/index.css
@@ -7,6 +7,13 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  margin-top: 116px;
+}
+
+@media screen and (min-width: 768px) {
+  body {
+    margin-top: 64px;
+  }
 }
 
 code {
