finished task

kr4chinin · Mar 23, 2023 · 11d213e · 11d213e
1 parent d438e88
commit 11d213e
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 44 deletions.
diff --git a/src/App.styles.jsx b/src/App.styles.jsx
@@ -1,7 +1,6 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-	background: linear-gradient(#7f9b7a, #542877);
 	min-height:100vh;
 	display: flex;
 	flex-direction: column;

diff --git a/src/assets/img/back.jpg b/src/assets/img/back.jpg
diff --git a/src/assets/img/backy.jpg b/src/assets/img/backy.jpg
diff --git a/src/components/button/index.styles.jsx b/src/components/button/index.styles.jsx
@@ -6,9 +6,9 @@ export const ContainerButton = styled.button`
 	min-height: 50px;
 	background-color: transparent;
 	border-radius: 10px;
-	border: 1px solid #000;
+	border: none;
 	padding: 5px 10px;
-	@media(max-width:560px){
+	@media (max-width: 560px) {
 		padding: 1px 1px;
 		min-height: 30px;
 	}
@@ -18,8 +18,7 @@ export const ContainerButton = styled.button`
 	}
 	:hover {
 		cursor: pointer;
-		background-color: #9f9999;
-		border: 1px solid #000;
+		background-color: #cfc3c3;
 		transition: all 500ms;
 	}
 `;
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -8,8 +8,8 @@ export const Button: FC<IPropsButton> = ({
 	className,
 }): JSX.Element => {
 	return (
-		<S.ContainerButton onClick={ onClick } className={ className }>
-			<span>{ buttonName }</span>
+		<S.ContainerButton onClick={onClick} className={className}>
+			<span>{buttonName}</span>
 		</S.ContainerButton>
 	);
 };
diff --git a/src/components/input/index.styles.jsx b/src/components/input/index.styles.jsx
@@ -8,7 +8,6 @@ export const ContainerInput = styled.input`
 	border-radius: 10px;
 	border: none;
 	font-size: 20px;
-	
 	::placeholder {
 		font-size: 20px;
 	}

diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,7 @@
 body {
+  background:url('./assets/img/backy.jpg');
+background-repeat: no-repeat;
+background-size: cover;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

diff --git a/src/pages/description/index.styles.jsx b/src/pages/description/index.styles.jsx
@@ -7,38 +7,80 @@ export const Container = styled.div`
 	justify-content: space-around;
 	align-items: center;
 	min-height: 700px;
-	background-color: #cdcdcd;
+	background: linear-gradient(#bfbab5, #353238);
 	border-radius: 20px;
+	.container__label {
+		margin: 0 40px 0 40px;
+	}
+	@media (max-width: 560px) {
+		max-width: 500px;
+		width: 100%;
+		min-height: 400px;
+	}
 	img {
 		max-width: 700px;
 		width: 100%;
 		height: 500px;
+		@media (max-width: 560px) {
+			max-width: 100px;
+			width: 100%;
+			height: 180px;
+		}
 	}
 	.container__label {
 		max-width: 400px;
 		width: 100%;
+		@media (max-width: 560px) {
+			display: flex;
+			justify-content: center;
+		}
 	}
 	.container__description {
 		max-width: 700px;
 		width: 100%;
+		@media (max-width: 560px) {
+			max-width: 300px;
+			width: 100%;
+		}
 		.name {
 			max-width: 300px;
 			width: 100%;
-			
+			@media (max-width: 560px) {
+				max-width: 100px;
+				width: 100%;
+				font-size: 10px;
+			}
 		}
 		.categories {
 			max-width: 300px;
 			width: 100%;
+			@media (max-width: 560px) {
+				max-width: 100px;
+				width: 100%;
+				font-size: 10px;
+			}
 		}
 		.authors {
 			max-width: 300px;
 			width: 100%;
+			@media (max-width: 560px) {
+				max-width: 100px;
+				width: 100%;
+				font-size: 10px;
+			}
 		}
-		.nameSpace{
+		.nameSpace {
 			font-weight: 900;
 		}
-		.namingBook{
-			font-family: 'Edu NSW ACT Foundation', cursive;
+		.namingBook {
+			font-family: "Edu NSW ACT Foundation", cursive;
+		}
+		.description {
+			@media (max-width: 560px) {
+				max-width: 350px;
+				width: 100%;
+				font-size: 9px;
+			}
 		}
 	}
 `;
diff --git a/src/pages/description/index.tsx b/src/pages/description/index.tsx
@@ -1,28 +1,28 @@
 import * as S from "./index.styles";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { Button } from "components/button";
 import { Link } from "react-router-dom";
 import { MagnifyingGlass } from "react-loader-spinner";
-import { ICurrentState, IState, localNumber } from "types";
-
+import { ICurrentState, IState } from "types";
 
 const DescriptionPage = () => {
 	const bookImage = useSelector(
-		(state:ICurrentState) => state.books.book.data?.volumeInfo.imageLinks.smallThumbnail,
+		(state: ICurrentState) =>
+			state.books.book.data?.volumeInfo.imageLinks.smallThumbnail,
 	);
 	const bookName = useSelector(
-		(state:ICurrentState) => state.books.book.data?.volumeInfo.title,
+		(state: ICurrentState) => state.books.book.data?.volumeInfo.title,
 	);
 	const bookCategories = useSelector(
-		(state:ICurrentState) => state.books.book.data?.volumeInfo.categories,
+		(state: ICurrentState) => state.books.book.data?.volumeInfo.categories,
 	);
 	const bookAuthors = useSelector(
-		(state:ICurrentState) => state.books.book.data?.volumeInfo.authors,
+		(state: ICurrentState) => state.books.book.data?.volumeInfo.authors,
 	);
 	const bookDescription = useSelector(
-		(state:ICurrentState) => state.books.book.data?.volumeInfo.description,
+		(state: ICurrentState) => state.books.book.data?.volumeInfo.description,
 	);
-	const isLoading = useSelector((state:IState) => state.books?.loading);
+	const isLoading = useSelector((state: IState) => state.books?.loading);
 
 	return (
 		<S.Container>
@@ -40,24 +40,27 @@ const DescriptionPage = () => {
 			) : (
 				<>
 					<Link to="/*">
-
 						<Button buttonName={"Back"} className={"backbutton"} />
 					</Link>
 					<div className="container__label">
 						<img src={bookImage} alt="label of book" />
 					</div>
 					<div className="container__description">
 						<p className="name">
-							<span className="nameSpace">Name:</span> <span className="namingBook">{bookName}</span>
+							<span className="nameSpace">Name:</span>{" "}
+							<span className="namingBook">{bookName}</span>
 						</p>
 						<p className="categories">
-						<span className="nameSpace">Categories: </span><span className="namingBook">{bookCategories}</span>
+							<span className="nameSpace">Categories: </span>
+							<span className="namingBook">{bookCategories}</span>
 						</p>
 						<p className="authors">
-						<span className="nameSpace">Authors:</span> <span className="namingBook">{bookAuthors}</span>
+							<span className="nameSpace">Authors:</span>{" "}
+							<span className="namingBook">{bookAuthors}</span>
 						</p>
 						<p className="description">
-						<span className="nameSpace">Description:</span> <span className="namingBook">{bookDescription}</span>
+							<span className="nameSpace">Description:</span>{" "}
+							<span className="namingBook">{bookDescription}</span>
 						</p>
 					</div>
 				</>

diff --git a/src/pages/items/index.styles.jsx b/src/pages/items/index.styles.jsx
@@ -15,7 +15,6 @@ export const Container = styled.div`
 		flex-wrap: wrap;
 		justify-content: center;
 		gap: 30px;
-		
 		a {
 			text-decoration: none;
 			color: #000;
@@ -25,5 +24,4 @@ export const Container = styled.div`
 			flex-wrap: wrap;
 		}
 	}
-
 `;
diff --git a/src/pages/items/index.tsx b/src/pages/items/index.tsx
@@ -16,9 +16,9 @@ import {
 } from "types";
 
 const Items: FC<IStateItemsProps> = ({ state, sortingField }): JSX.Element => {
-	const [ stateArray, setStateArray ] = useState<IPropsItems[]>([]);
-	const [ filteredArray, setFilteredArray ] = useState<IPropsItems[]>([]);
-	const [ visible, setVisible ] = useState<localNumber>(30);
+	const [stateArray, setStateArray] = useState<IPropsItems[]>([]);
+	const [filteredArray, setFilteredArray] = useState<IPropsItems[]>([]);
+	const [visible, setVisible] = useState<localNumber>(30);
 	const dispatch = useDispatch();
 	const isLoading = useSelector((state: IState) => state.books.loading);
 	const id = useSelector((state: IState) => state.books.id);

diff --git a/src/pages/items/item/index.styles.jsx b/src/pages/items/item/index.styles.jsx
@@ -14,7 +14,7 @@ export const Container = styled.div`
 	&:hover {
 		cursor: pointer;
 		background-color: #cdcdcd;
-		border: 1px solid #000;
+
 		transition: all 700ms;
 	}
 	img {

diff --git a/src/pages/items/item/index.tsx b/src/pages/items/item/index.tsx
@@ -2,7 +2,7 @@ import * as S from "./index.styles";
 import { FC } from "react";
 import { IPropsItem } from "types";
 
-export const Item: FC<IPropsItem> = ({ state, onClick }):JSX.Element => {
+export const Item: FC<IPropsItem> = ({ state, onClick }): JSX.Element => {
 	const label = state.volumeInfo.imageLinks?.smallThumbnail;
 	const name = state.volumeInfo.title;
 	const category = state.volumeInfo.categories?.[0];

diff --git a/src/pages/main/index.styles.jsx b/src/pages/main/index.styles.jsx
@@ -2,14 +2,13 @@ import styled from "styled-components";
 
 export const ContainerMain = styled.div`
 	flex-direction: column;
-	background: linear-gradient(#b7d1b1, #4d3a5c);
+	background: linear-gradient(#bfbab5, #353238);
 	max-width: 1200px;
 	width: 100%;
 	min-height: calc(100vh - 100px);
 	border-radius: 10px;
 	box-shadow: 5px 5px 5px 5px rgb(0, 0, 0, 0.5);
 	display: flex;
-
 	.header {
 		margin: 50px 0 20px 0;
 		display: flex;
@@ -33,12 +32,12 @@ export const ContainerMain = styled.div`
 		display: flex;
 		justify-content: space-between;
 		@media (max-width: 560px) {
-		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
-		grid-template-rows:30% 30% 30%;
-		gap:20px;
-		margin-bottom: 20px;
-		align-content: center;
+			display: grid;
+			grid-template-columns: 1fr 1fr 1fr;
+			grid-template-rows: 30% 30% 30%;
+			gap: 20px;
+			margin-bottom: 20px;
+			align-content: center;
 		}
 	}
 `;
diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
@@ -9,7 +9,7 @@ import { getBooks } from "redux/reducer";
 import { IStateBooksProperties, localString } from "types";
 import * as S from "./index.styles";
 
-const Main:FC = ():JSX.Element => {
+const Main: FC = (): JSX.Element => {
 	const state = useSelector(
 		(state: IStateBooksProperties) => state.books.books.data?.items,
 	);
@@ -21,7 +21,7 @@ const Main:FC = ():JSX.Element => {
 		dispatch(getBooks(value));
 	};
 
-	const triggerSortByKind = (name:localString): void => {
+	const triggerSortByKind = (name: localString): void => {
 		setSortingField(name);
 	};