fix bag modal

Oleksandra83 · Jun 24, 2023 · eda78bf · eda78bf
1 parent c98a858
commit eda78bf
Show file tree

Hide file tree

Showing 15 changed files with 64 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,6 @@
     "notiflix": "^3.2.6",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
-    "react-axios": "^2.0.6",
     "react-dom": "^18.2.0",
     "react-icons": "^4.9.0",
     "react-loader-spinner": "^5.3.4",

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
+
     <title>React App</title>
 
     <!-- Start Single Page Apps for GitHub Pages -->
@@ -60,6 +64,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+		<div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/assets/pbsh.png b/src/assets/pbsh.png
diff --git a/src/assets/pending-1.png b/src/assets/pending-1.png
diff --git a/src/assets/pending.png b/src/assets/pending.png
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -3,6 +3,7 @@ import { Searchbar } from "./Searchbar/Searchbar";
 import ImageGallery from "./ImageGallery/ImageGallery";
 import { ToastContainer, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { Layout } from "./Layout/Layout";
 
 
 export default class App extends Component {
@@ -17,13 +18,13 @@ export default class App extends Component {
 	render() {
 		const { textSearch } = this.state;
 		return (
-			<div>
+			<>
 				<Searchbar onSubmit={this.handleSubmit} />
-				<div>
+				<Layout>
 					<ImageGallery value={textSearch} />
-				</div>
-				<ToastContainer transition={Slide} draggable={60} />
-			</div>
+				</Layout>
+				<ToastContainer transition={Slide} draggablePercent={60} />
+			</>
 		);
 	}
 }
diff --git a/src/components/App.styled.jsx b/src/components/App.styled.jsx
diff --git a/src/components/ImageGallery/ImageGallery.jsx b/src/components/ImageGallery/ImageGallery.jsx
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import imagesAPI from 'services/getImages';
 import { ImageGallaryItem } from '../ImageGalleryItem/ImageGalleryItem';
 import DefaultImg from 'assets/tjer.png';
-import { Loader } from 'components/Loader/Loader';
+import { Loader } from '../Loader/Loader';
 import { List } from './ImageGallery.styled';
 import ImageError from '../ImageError/ImageError';
 import { InitialStateGallery } from '../InitialStateGallery/InitialStateGallery';
 import { Button } from '../Button/Button';
-import Modal from 'components/Modal/Modal';
+import Modal from '../Modal/Modal';
 
 const Status = {
 	IDLE: 'idle',
@@ -113,7 +113,7 @@ export default class ImageGallery extends Component {
 					{images.length > 0 && status !== 'pending' && page <= totalPages && (
 						<Button onClick={this.handleLoadMore}>Load More</Button>
 					)}
-
+					
 					{isShowModal && (
 						<Modal modalData={modalData} onModalClose={this.handleModalClose} />
 					)}

diff --git a/src/components/ImageGallery/ImageGallery.styled.jsx b/src/components/ImageGallery/ImageGallery.styled.jsx
@@ -5,7 +5,7 @@ export const List = styled.ul`
 	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 	grid-gap: 20px;
 	place-content: center;
-	max-width: calc()(100vw - 48px);
+	max-width: calc(100vw - 48px);
 	margin: 1vh auto;
 	padding: 4px 8px;
 `;
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Container } from './Layout.styled';
+import PropTypes from 'prop-types';
+
+export const Layout = ({ children }) => {
+	return (
+		<>
+			<Container>{children}</Container>
+		</>
+	);
+}
+
+Layout.propTypes = {
+	children: PropTypes.any.isRequired,
+};
diff --git a/src/components/Layout/Layout.styled.jsx b/src/components/Layout/Layout.styled.jsx
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 8px;
+	place-content: center;
+	margin: 1vh auto;
+	padding: 4px 8px;
+`;
diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx
@@ -1,18 +1,18 @@
-import {LoaderWrapper, StyledLoader} from './Loader.styled';
+import {LoaderWrapper, StyledLoader, PendingTjer} from './Loader.styled';
 
 export const Loader = () => {
 	return (
-	<LoaderWrapper>
-		<StyledLoader
-			visible={true}
-			height="80"
-			width="80"
-			ariaLabel="MagnifyingGlass-loading"
-			wrapperStyle={{}}
-			wrapperClass="MagnifyingGlass-wrapper"
-			glassColor = '#c0efff'
-			color = '#b95e13'
-		/>
-	</LoaderWrapper>
-	)
-}
+		<LoaderWrapper>
+			<StyledLoader
+				visible={true}
+				height="80"
+				width="80"
+				ariaLabel="MagnifyingGlass-loading"
+				wrapperStyle={{}}
+				wrapperClass="MagnifyingGlass-wrapper"
+				glassColor='#c0efff'
+				color='#b95e13'
+			/>
+		</LoaderWrapper>
+	);
+};
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import {ModalBackdrop, ModalContent, ModalPhoto, ModalDescr} from './Modal.styled';

diff --git a/src/components/Modal/Modal.styled.jsx b/src/components/Modal/Modal.styled.jsx
@@ -6,7 +6,7 @@ export const ModalBackdrop = styled.div`
 	left: 0;
 	width: 100vw;
 	height: 100vh;
-	background-color: rgba(0, 0, 0, 0.8);
+	background-color: rgba(0, 0, 0, 0.6);
 `;
 
 export const ModalContent = styled.div`
@@ -15,8 +15,8 @@ export const ModalContent = styled.div`
 	left: 50%;
 	transform: translate(-50%, -50%);
 	padding: 4px;
-	max-width: calc(100vw - 48px);
-	min-height: calc(100vh - 24px);
+	width: 65vw;
+	height: 650px;
 	background-color: #f8eed7;
 	border-radius: 2px;
 	box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
@@ -37,14 +37,14 @@ export const ModalDescr = styled.p`
 	align-items: center;
 	justify-content: center;
 	margin: 0 auto;
-	padding: 8px;
+	padding: 8px 0px;
 	width: 100%;
 	color: #3d3a3a;
-	text-shadow: 2px 2px 5px white;
+	text-shadow: 0px 1px 1px white;
 	background-color: rgba(185, 228, 201, 0.7);
 	box-shadow: 0px -2px 4px 1px rgba(0, 0, 0, 0.2), 0px -4px 5px 0px rgba(0, 0, 0, 0.14), 0px -1px 10px 0px rgba(0, 0, 0, 0.12);
 	backdrop-filter: blur(5.5px);
 	font-family: 'Dancing Script';
-	font-size: 20px;
+	font-size: 28px;
 	text-align: center;
 `;
diff --git a/src/index.css b/src/index.css
@@ -7,6 +7,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: #fdf0d9;
+  line-height: 1.5;
 }
 
 code {