diff --git a/src/App.js b/src/App.js index b9f2983..1e44669 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import { ReactComponent as Logo1 } from "./assets/logo2.svg"; import { RoutesContainer } from "./routes/Routes"; import { FixedMainContainer, + LogoContainerLink, LogoSwitchContainer, MainContainer, SwitchContainer, @@ -21,7 +22,11 @@ function App() { const [results, setResults] = useState([]); const [breed, setBreed] = useState(false); + // const defaultDarkTheme = + // window.matchMedia?.("(prefers-color-scheme:dark)")?.matches ?? false; + const toggleThemeHandler = () => { + console.log("theme"); if (theme === "light") { document.documentElement.style.setProperty( "--background", @@ -83,11 +88,14 @@ function App() { {/* Logo */} - - - + + + + + + - + diff --git a/src/App.styles.js b/src/App.styles.js index a8eef9b..6a9e1f9 100644 --- a/src/App.styles.js +++ b/src/App.styles.js @@ -20,7 +20,7 @@ export const FixedMainContainer = styled.div` } `; -export const LogoSwitchContainer = styled(Link)` +export const LogoSwitchContainer = styled.div` display: flex; gap: 0.5vw; justify-content: center; @@ -36,6 +36,13 @@ export const LogoSwitchContainer = styled(Link)` } `; +export const LogoContainerLink = styled(Link)` + display: flex; + gap: 0.5vw; + justify-content: center; + align-items: center; +`; + export const TextLogoContainer = styled(TextLogo)` path { fill: var(--textBlack); @@ -51,17 +58,16 @@ export const SwitchContainer = styled.label` input { opacity: 0; - width: 0; - height: 0; - &:checked + span { + width: 4.4rem; + &:checked ~ span { background-color: var(--btnColor); } - &:checked + span:before { + &:checked ~ span:before { -webkit-transform: translateX(1.4vw); -ms-transform: translateX(1.4vw); transform: translateX(1.4vw); } - &:focus + span { + &:focus ~ span { box-shadow: 0 0 1px var(--btnColor); } } @@ -90,3 +96,8 @@ export const SwitchContainer = styled.label` } } `; + +export const SearchParagraph = styled.p` + margin-left: 1vw; + align-self: flex-start; +`; diff --git a/src/Components/FavouritesPage.js b/src/Components/FavouritesPage.js index 8177512..2b3096e 100644 --- a/src/Components/FavouritesPage.js +++ b/src/Components/FavouritesPage.js @@ -1,16 +1,10 @@ -import classes from "./FavouritesPage.module.css"; -import Button from "./UI/Button"; -import CardButton from "./UI/CardButton"; - -import UserLogItem from "./UserLogItem"; import { MainContentContainer } from "./styles/globalstyles.styles"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { useFetch } from "../hooks/useFetch"; import Grid from "./UI/Grid"; -import { ReactComponent as Back } from "../assets/back.svg"; + import BounceLoader from "react-spinners/BounceLoader"; -import { useNavigate } from "react-router-dom"; -import { useCallback } from "react"; + import UserLog from "../pages/UserLog"; import { PageNavBar } from "./PageNavBar/PageNavBar"; @@ -32,14 +26,9 @@ const FavouritesPage = (props) => { postAction(`favourites/${id}`, {}, null, "delete"); }; - let navigate = useNavigate(); - const backHandler = () => { - navigate(-1); - }; - return ( - + { let finalMessage; // separate this logic to its own component @@ -10,34 +12,38 @@ export const FinalUploadMessage = ({ img, status, uploadingHandler }) => { status !== "failure" && status !== "loading" ) { - finalMessage = ; + finalMessage = ( + + UPLOAD PHOTO + + ); } if (status === "loading") { finalMessage = ( - + ); } if (status === "success") { finalMessage = ( -
+ asd

Thanks for the Upload - Cat found!

-
+ ); } if (status === "failure") { finalMessage = ( -
+ asd

No Cat found - try a different one

-
+ ); } - return { finalMessage }; + return finalMessage; }; diff --git a/src/Components/FinalUploadMessage/FinalUploadMessage.styles.js b/src/Components/FinalUploadMessage/FinalUploadMessage.styles.js index e69de29..aa9c7e2 100644 --- a/src/Components/FinalUploadMessage/FinalUploadMessage.styles.js +++ b/src/Components/FinalUploadMessage/FinalUploadMessage.styles.js @@ -0,0 +1,23 @@ +import styled from "styled-components"; + +export const FinalMessageWrapper = styled.div` + width: 97%; + padding: 1vw; + gap: 1vw; + background-color: white; + display: flex; + align-items: center; + border-radius: 10px; + + @media (max-width: 860px) { + width: 90%; + margin-left: 2vw; + padding: 1vw; + margin-top: 5vw; + gap: 1vw; + background-color: white; + display: flex; + align-items: center; + border-radius: 10px; + } +`; diff --git a/src/Components/LikedPage.js b/src/Components/LikedPage.js index 23802ae..d56cbd5 100644 --- a/src/Components/LikedPage.js +++ b/src/Components/LikedPage.js @@ -1,6 +1,4 @@ -import classes from "./FavouritesPage.module.css"; import Button from "./UI/Button"; -import CardButton from "./UI/CardButton"; import { useEffect } from "react"; import Grid from "./UI/GridLikes"; import { ReactComponent as Back } from "../assets/back.svg"; @@ -24,14 +22,9 @@ const LikedPage = (props) => { fetchData(); }, [props.value]); - let navigate = useNavigate(); - const backHandler = () => { - navigate(-1); - }; - return ( - + { - return
; -}; - -export default MainPic; diff --git a/src/Components/MainPic.module.css b/src/Components/MainPic.module.css deleted file mode 100644 index 56c0ce0..0000000 --- a/src/Components/MainPic.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.container { - position: relative; - width: 100%; - height: 25vw; - background-color: rgb(202, 202, 202); - border-radius: 20px; -} diff --git a/src/Components/ModalUpload.js b/src/Components/ModalUpload.js index c53fa36..fa80a5c 100644 --- a/src/Components/ModalUpload.js +++ b/src/Components/ModalUpload.js @@ -1,16 +1,13 @@ -import classes from "./ModalUpload.module.css"; import "./loader.css"; import classes1 from "./Backdrop.module.css"; -import imgSuccess from "../assets/success.png"; -import imgFailure from "../assets/failure.png"; import ReactDOM from "react-dom"; import { Fragment } from "react"; import { useState } from "react"; import DragDrop from "./DragDrop"; import { ReactComponent as Close } from "../assets/cross.svg"; -import { useCallback } from "react"; import { useFetch } from "../hooks/useFetch"; -import { useEffect } from "react"; +import { FinalUploadMessage } from "./FinalUploadMessage/FinalUploadMessage"; +import { CloseButton, ModalWrapper } from "./ModalUpload.styles"; const Backdrop = (props) => { return
; @@ -41,49 +38,11 @@ const ModalUpload = (props) => { setAdditional(""); }; - let finalMessage; // separate this logic to its own component - - if ( - img && - status !== "success" && - status !== "failure" && - status !== "loading" - ) { - finalMessage = ; - } - - if (status === "loading") { - finalMessage = ( - - ); - } - - if (status === "success") { - finalMessage = ( -
- asd -

Thanks for the Upload - Cat found!

-
- ); - } - if (status === "failure") { - finalMessage = ( -
- asd -

No Cat found - try a different one

-
- ); - } - return ( -
-
- -
+ + + +

Upload a .jpg or .png Cat Image

@@ -92,8 +51,12 @@ const ModalUpload = (props) => {

- {finalMessage} -
+ + ); }; diff --git a/src/Components/ModalUpload.styles.js b/src/Components/ModalUpload.styles.js new file mode 100644 index 0000000..c5a4875 --- /dev/null +++ b/src/Components/ModalUpload.styles.js @@ -0,0 +1,33 @@ +import styled from "styled-components"; +import { CardButton } from "./UI/Button.styles"; + +export const ModalWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + z-index: 30; + position: fixed; + top: 2%; + right: 2%; + gap: 1vw; + width: 50%; + /* height: 40vw; */ + bottom: 2%; + padding: 2vw; + + background: var(--background); + border-radius: 20px; +`; + +export const CloseButton = styled(CardButton)` + align-self: flex-end; + cursor: pointer; + position: relative; + right: 0%; + background: var(--backgroundBlock); + svg { + width: 1.7rem; + height: 1.7rem; + } +`; diff --git a/src/Components/PageNavBar/PageNavBar.js b/src/Components/PageNavBar/PageNavBar.js index 7932f7b..bc34aea 100644 --- a/src/Components/PageNavBar/PageNavBar.js +++ b/src/Components/PageNavBar/PageNavBar.js @@ -5,8 +5,13 @@ import { BackButton, MainNavWrapper, } from "./PageNavBar.styles"; +import { useNavigate } from "react-router-dom"; -export const PageNavBar = ({ backHandler, title, additional }) => { +export const PageNavBar = ({ title, additional }) => { + let navigate = useNavigate(); + const backHandler = () => { + navigate(-1); + }; return ( diff --git a/src/Components/SearchBar/SearchBar.js b/src/Components/SearchBar/SearchBar.js index 6b3a32a..dbd1566 100644 --- a/src/Components/SearchBar/SearchBar.js +++ b/src/Components/SearchBar/SearchBar.js @@ -1,29 +1,32 @@ -import CardButton from "../UI/CardButton"; -import { NavLink } from "react-router-dom"; +import { CardButton } from "../UI/Button.styles"; import { ReactComponent as Search } from "../../assets/search.svg"; +import { + SearchBarForm, + SearchButtonLink, + SearchInput, + SearchWrapper, +} from "./SearchBar.styles"; -export const SearchBar = ({ query, setQuery }) => { +export const SearchBar = ({ query, setQuery, onSearch }) => { return ( -
-
- + + setQuery(e.target.value)} placeholder="Search for breeds by name" - > - + - + - - -
+ + + ); }; diff --git a/src/Components/SearchBar/SearchBar.styles.js b/src/Components/SearchBar/SearchBar.styles.js index e69de29..993e5fb 100644 --- a/src/Components/SearchBar/SearchBar.styles.js +++ b/src/Components/SearchBar/SearchBar.styles.js @@ -0,0 +1,81 @@ +import { NavLink } from "react-router-dom"; +import styled from "styled-components"; +import { CardButton } from "../UI/Button.styles"; + +export const SearchWrapper = styled.div` + @media (max-width: 860px) { + width: 100%; + } +`; + +export const SearchBarForm = styled.form` + position: relative; + @media (max-width: 860px) { + width: 100%; + } +`; + +export const SearchInput = styled.input` + font-size: 1.8rem; + font-weight: 400; + width: 35vw; + padding: 1.1rem 2.8rem; + + background: var(--backgroundBlock); + border: 2px solid transparent; + border-radius: 20px; + color: #8c8c8c; + + &:focus { + outline-width: 0; + border: 2px solid var(--btnColor); + } + + &:active { + border-color: var(--main); + } + @media (max-width: 860px) { + font-size: 1.8rem; + font-weight: 400; + width: 88%; + padding: 1.3rem 2rem; + background: var(--backgroundBlock); + border: 2px solid transparent; + border-radius: 20px; + } + + ${(props) => (props.styleChange ? "border-color: var(--main)" : "")} +`; + +export const SearchButtonLink = styled(NavLink)` + position: absolute; + bottom: 13%; + right: 1vw; + + img { + width: 1.39vw; + height: 1.39vw; + } + + svg { + width: 1.85rem; + height: 1.85rem; + } + + @media (max-width: 860px) { + position: absolute; + + bottom: 16%; + right: 2.5vw; + + svg { + padding: 0.6rem; + width: 1.9rem; + height: 1.9rem; + } + } + + ${CardButton} { + padding: 1rem; + } +`; diff --git a/src/Components/SearchPage.js b/src/Components/SearchPage.js index 3c99dda..7ae18f0 100644 --- a/src/Components/SearchPage.js +++ b/src/Components/SearchPage.js @@ -1,6 +1,4 @@ -import classes from "./FavouritesPage.module.css"; import Button from "./UI/Button"; -import CardButton from "./UI/CardButton"; import { useEffect } from "react"; import Grid from "./UI/GridLikes"; import { ReactComponent as Back } from "../assets/back.svg"; @@ -9,6 +7,9 @@ import { useFetch } from "../hooks/useFetch"; import { MainContentContainer } from "./styles/globalstyles.styles"; import BounceLoader from "react-spinners/BounceLoader"; +import { CardButton } from "./UI/Button.styles"; +import { PageNavBar } from "./PageNavBar/PageNavBar"; +import { SearchParagraph } from "../App.styles"; const SearchPage = (props) => { const params = useParams(); @@ -31,26 +32,17 @@ const SearchPage = (props) => { fetchData(); }, [params.searchItem]); - let navigate = useNavigate(); - const backHandler = () => { - navigate(-1); - }; - const singleSearch = () => { props.onClick({ results: searchItems, breed: true, search: true }); }; return ( -
- - - - -
-

+ + + Search results for:{` ${params.searchItem}`} -

+ { - return ( -
- {props.children} -
- ); -}; - -export default CardButton; diff --git a/src/Components/UI/CardButton.module.css b/src/Components/UI/CardButton.module.css deleted file mode 100644 index 3df19fa..0000000 --- a/src/Components/UI/CardButton.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.cardbutton { - background: var(--btnColor); - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - - cursor: pointer; - padding: 0.8vw; -} - -.cardbutton:hover { - background: var(--main); -} - -.cardbutton:hover svg path { - fill: white; -} - -.cardbutton:hover img { - filter: brightness(100); -} diff --git a/src/Components/UI/Header.js b/src/Components/UI/Header.js index 6bae806..042bb66 100644 --- a/src/Components/UI/Header.js +++ b/src/Components/UI/Header.js @@ -1,71 +1,43 @@ -import classes from "./Header.module.css"; -import CardButton from "./CardButton"; import { useState } from "react"; import { ReactComponent as Fav } from "../../assets/fav.svg"; import { ReactComponent as Like } from "../../assets/like.svg"; import { ReactComponent as DisLike } from "../../assets/dislike.svg"; -import { ReactComponent as Search } from "../../assets/search.svg"; -import { NavLink } from "react-router-dom"; +import { useEffect } from "react"; +import { SearchBar } from "../SearchBar/SearchBar"; +import { + BurgerWrapper, + HeaderWrapper, + NavLinkHeader, + NavLinksWrapper, + NavLinksWrapperSecondary, +} from "./Header.styles"; const Header = (props) => { const [query, setQuery] = useState(""); - let style; - style = props.onSearch ? { borderColor: " var(--main)" } : {}; - + useEffect(() => { + if (!props.onSearch) { + setQuery(""); + } + }, [props.onSearch]); return ( -
-
-
- setQuery(e.target.value)} - placeholder="Search for breeds by name" - > - - - - - -
-
-
-
{props.children}
-
- { - return state.isActive ? classes.activeIcon : classes["like-icon"]; - }} - to="/liked" - > - - - { - return state.isActive ? classes.activeIcon : classes["like-icon"]; - }} - to="/favourites" - > - - - { - return state.isActive ? classes.activeIcon : classes["like-icon"]; - }} - to="/disliked" - > - - -
-
-
+ + + + {props.children} + + + + + + + + + + + + + ); }; export default Header; diff --git a/src/Components/UI/Header.module.css b/src/Components/UI/Header.module.css deleted file mode 100644 index 77405ed..0000000 --- a/src/Components/UI/Header.module.css +++ /dev/null @@ -1,279 +0,0 @@ -.searchInput { - font-size: 1.3vw; - font-weight: 400; - width: 35vw; - padding-top: 0.8vw; - padding-right: 2vw; - padding-bottom: 0.8vw; - padding-left: 2vw; - background: var(--backgroundBlock); - border: 2px solid transparent; - border-radius: 20px; - color: #8c8c8c; -} - -.searchInput:focus { - outline-width: 0; - border: 2px solid var(--btnColor); -} - -.searchInput:active { - border-color: var(--main); -} -::placeholder { - color: #8c8c8c; -} - -.searchBar { - position: relative; -} - -.searchBtn { - position: absolute; - bottom: 10%; - right: 1vw; -} - -.searchBtn img { - width: 1.39vw; - height: 1.39vw; -} - -.searchIcon { - width: 1.39vw; - height: 1.39vw; -} -.userPages { - display: flex; - gap: 0.5vw; -} - -.activeIcon { - display: flex; - background: var(--backgroundBlock); - border-radius: 20px; - cursor: pointer; - - padding: 0.8vw; -} - -.header { - display: flex; - align-items: center; - justify-content: flex-start; - gap: 1vw; -} - -.userPages2 { - display: flex; - gap: 0.5vw; -} -.like-icon { - display: flex; - background: var(--backgroundBlock); - border-radius: 20px; - cursor: pointer; - - padding: 0.8vw; - align-items: center; - justify-content: center; -} - -.burgerMenu { - display: none; -} - -.iconSvgHead { - /* width: 2.083vw; - height: 2.083vw; */ - align-items: center; - justify-content: center; -} - -.iconSvgHead path { - fill: var(--main); -} - -.like-icon:hover { - background: var(--btnColor); -} - -.like-icon:active { - background: var(--main); -} -.like-icon:active .iconSvgHead path { - fill: var(--textWhite); -} -.activeIcon { - display: flex; - background: var(--main); - border-radius: 20px; - cursor: pointer; - - padding: 0.8vw; -} - -.activeIcon .iconSvgHead path { - fill: var(--textWhite); -} - -@media (max-width: 764px) { - .header { - margin-top: 3vw; - display: flex; - flex-direction: column-reverse; - align-items: center; - justify-content: center; - gap: 2vw; - - width: 100%; - } - .userPages2 { - display: flex; - gap: 2vw; - } - .userPages { - align-self: flex-end; - width: 100%; - justify-content: space-between; - gap: 2vw; - } - .like-icon { - display: flex; - background: var(--backgroundBlock); - border-radius: 20px; - cursor: pointer; - - padding: 3vw; - } - .searchBar { - width: 100%; - position: relative; - } - .searchContainer { - width: 100%; - } - .searchInput { - font-size: 4.5vw; - font-weight: 400; - width: 95%; - padding-top: 2.5vw; - padding-right: 2vw; - padding-bottom: 2.5vw; - padding-left: 2vw; - background: var(--backgroundBlock); - border: 2px solid transparent; - border-radius: 20px; - } - .searchIcon { - width: 5.5vw; - height: 5.5vw; - padding: 1.2vw; - } - .searchBtn { - position: absolute; - bottom: 12%; - right: 2.5vw; - } - .burgerMenu { - display: block; - } - .ham { - display: flex; - background: var(--backgroundBlock); - border-radius: 20px; - cursor: pointer; - justify-self: flex-start; - padding: 3vw; - } - .activeIcon { - display: flex; - background: var(--main); - border-radius: 20px; - cursor: pointer; - - padding: 3vw; - } -} -@media (min-width: 765px) and (max-width: 860px) { - .header { - display: flex; - flex-direction: column-reverse; - align-items: center; - justify-content: center; - gap: 2vw; - - width: 100%; - } - .userPages2 { - display: flex; - gap: 2vw; - } - .userPages { - align-self: flex-end; - width: 100%; - justify-content: space-between; - gap: 2vw; - } - .like-icon { - display: flex; - background: var(--backgroundBlock); - border-radius: 20px; - cursor: pointer; - - padding: 1.5vw; - } - .searchBar { - width: 100%; - position: relative; - } - .searchContainer { - width: 100%; - } - .searchInput { - font-size: 2.5vw; - font-weight: 400; - width: 95%; - - padding-right: 2vw; - - padding-left: 2vw; - background: var(--backgroundBlock); - border: 2px solid transparent; - border-radius: 20px; - } - .searchIcon { - width: 2.5vw; - height: 2.5vw; - padding: 0.2vw; - } - .searchBtn { - position: absolute; - bottom: 12%; - right: 2.5vw; - } - .burgerMenu { - display: block; - } - .ham { - display: flex; - background: var(--backgroundBlock); - border-radius: 20px; - cursor: pointer; - justify-self: flex-start; - padding: 1.5vw; - } - .activeIcon { - display: flex; - background: var(--main); - border-radius: 20px; - cursor: pointer; - - padding: 1.5vw; - } -} -@media (min-width: 1440px) { - ::placeholder { - font-size: 20px; - } -} diff --git a/src/Components/UI/Header.styles.js b/src/Components/UI/Header.styles.js new file mode 100644 index 0000000..3479af4 --- /dev/null +++ b/src/Components/UI/Header.styles.js @@ -0,0 +1,84 @@ +import { NavLink } from "react-router-dom"; +import styled from "styled-components"; + +export const HeaderWrapper = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + gap: 1vw; + + @media (max-width: 764px) { + margin-top: 3vw; + flex-direction: column-reverse; + justify-content: center; + gap: 2vw; + + width: 100%; + } +`; + +export const NavLinksWrapper = styled.div` + display: flex; + gap: 0.5vw; + + @media (max-width: 860px) { + align-self: flex-end; + width: 100%; + justify-content: space-between; + gap: 2vw; + } +`; + +export const BurgerWrapper = styled.div` + @media (max-width: 860px) { + display: flex; + background: var(--backgroundBlock); + border-radius: 20px; + cursor: pointer; + justify-self: flex-start; + padding: 3vw; + } +`; + +export const NavLinksWrapperSecondary = styled.div` + display: flex; + gap: 0.5vw; +`; + +export const NavLinkHeader = styled(NavLink)` + display: flex; + background: var(--backgroundBlock); + border-radius: 2rem; + cursor: pointer; + + padding: 1rem; + align-items: center; + justify-content: center; + + svg { + align-items: center; + justify-content: center; + + path { + fill: var(--main); + } + } + + &:hover { + background: var(--btnColor); + } + + &:active { + background: var(--main); + } + &:active svg path { + fill: var(--textWhite); + } + + &.active { + background: var(--main); + svg path { + fill: var(--textWhite); + } + } +`; diff --git a/src/Components/UI/Slider.js b/src/Components/UI/Slider.js index c7f2d52..9bdee4d 100644 --- a/src/Components/UI/Slider.js +++ b/src/Components/UI/Slider.js @@ -1,8 +1,10 @@ import { Swiper, SwiperSlide } from "swiper/react"; import { Navigation, Pagination } from "swiper"; import "swiper/css"; + // import "./slider.css"; import "swiper/css/pagination"; +import { GlobalStyles } from "../styles/globalstyles.styles"; const Carousel = (props) => { console.log(props.images); @@ -25,6 +27,7 @@ const Carousel = (props) => { ); })} + ); } diff --git a/src/Components/UI/slider.css b/src/Components/UI/slider.css new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/styles/globalstyles.styles.js b/src/Components/styles/globalstyles.styles.js index 5b08411..cba642b 100644 --- a/src/Components/styles/globalstyles.styles.js +++ b/src/Components/styles/globalstyles.styles.js @@ -48,6 +48,9 @@ h2 { line-height: ${lineHeights[5]}rem; color: var(--textBlack); } + + + :root { --swiper-theme-color: var(--main); --swiper-pagination-bullet-inactive-color: var(--swiper-theme-color); diff --git a/src/pages/BreedsPage.js b/src/pages/BreedsPage.js index ba4d201..eefdf81 100644 --- a/src/pages/BreedsPage.js +++ b/src/pages/BreedsPage.js @@ -1,14 +1,6 @@ -import classes from "./BreedsPage.module.css"; -import CardButton from "../Components/UI/CardButton"; -import Button from "../Components/UI/Button"; import Grid from "../Components/UI/GridBreeds"; -import { useCallback, useEffect, useRef, useState } from "react"; -import { ReactComponent as DescendingIcon } from "../assets/desc.svg"; -import { ReactComponent as AscendingIcon } from "../assets/asc.svg"; -import { ReactComponent as PageRight } from "../assets/arrowRight.svg"; -import { ReactComponent as Back } from "../assets/back.svg"; +import { useEffect, useState } from "react"; import { MainContentContainer } from "../Components/styles/globalstyles.styles"; -import Select from "react-select"; import BounceLoader from "react-spinners/BounceLoader"; import { useNavigate } from "react-router-dom"; import { useFetch } from "../hooks/useFetch"; @@ -93,7 +85,6 @@ const BreedsPage = (props) => { return ( { )} diff --git a/src/pages/SingleCat.js b/src/pages/SingleCat.js index 58dd3df..6727011 100644 --- a/src/pages/SingleCat.js +++ b/src/pages/SingleCat.js @@ -1,22 +1,26 @@ import Carousel from "../Components/UI/Slider"; -import { useState, useEffect, useCallback } from "react"; +import { useEffect } from "react"; import { MainContentContainer } from "../Components/styles/globalstyles.styles"; import { useParams } from "react-router-dom"; import classes from "./BreedsPage.module.css"; -import CardButton from "../Components/UI/CardButton"; -import Button from "../Components/UI/Button"; -import { ReactComponent as Back } from "../assets/back.svg"; import { useNavigate } from "react-router-dom"; import { useFetch } from "../hooks/useFetch"; import { PageNavBar } from "../Components/PageNavBar/PageNavBar"; +import { + MainDescrWrapper, + ParentImgContainer, + SecondaryDescr, + SecondaryDescrItem, + SingleCatContent, + SingleCatDescription, + SingleCatHeading, + SingleCatId, + SingleCatWrapper, +} from "./SingleCat.styles"; const SingleCat = ({ items, breed, search = false }) => { const params = useParams(); // const [images, setImages] = useState(); - let navigate = useNavigate(); - const backHandler = () => { - navigate(-1); - }; console.log(items, search); @@ -42,30 +46,29 @@ const SingleCat = ({ items, breed, search = false }) => { return ( {params.cat}} + additional={{params.cat}} /> -
-
-
+ + +
-
-
-
+ + + {breed ? items[params.id].breeds[0].name : items[params.id].name} -
+ -
-
+ + {breed ? items[params.id].breeds[0].description : items[params.id].description} -
-
-
+ + +

Temperament:

@@ -73,9 +76,9 @@ const SingleCat = ({ items, breed, search = false }) => { ? items[params.id].breeds[0].temperament : items[params.id].temperament}

-
+ -
+

Origin:{" "} {breed @@ -96,11 +99,11 @@ const SingleCat = ({ items, breed, search = false }) => { : items[params.id].life_span } years`}

-
-
-
-
-
+ + + + + ); }; diff --git a/src/pages/SingleCat.styles.js b/src/pages/SingleCat.styles.js new file mode 100644 index 0000000..4be958b --- /dev/null +++ b/src/pages/SingleCat.styles.js @@ -0,0 +1,187 @@ +import styled from "styled-components"; + +export const SingleCatWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 4vw; + + @media (max-width: 425px) { + gap: 13vw; + + width: 100%; + } +`; + +export const ParentImgContainer = styled.div` + height: 25vw; + width: 44.444vw; + align-self: center; + position: relative; + border-radius: 20px; + + div { + align-self: center; + justify-self: center; + width: 100%; + + border-radius: 20px; + img { + object-fit: contain; + width: 100%; + height: 25vw; + } + } + + @media (max-width: 425px) { + height: 60vw; + width: 100%; + align-self: center; + position: relative; + border-radius: 20px; + + div { + align-self: center; + justify-self: center; + width: 100%; + + border-radius: 20px; + img { + height: 60vw; + } + } + } +`; + +export const SingleCatContent = styled.div` + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 3vw; +`; + +export const SingleCatHeading = styled.div` + position: absolute; + top: -12%; + padding-left: 3.5vw; + padding-right: 3.5vw; + padding-top: 0.7vw; + padding-bottom: 0.7vw; + color: var(--textBlack); + background: var(--backgroundBlock); + border-radius: 20px; + font-family: "Jost"; + font-style: normal; + font-weight: 500; + font-size: 3.4rem; + line-height: 3.611vw; + @media (max-width: 425px) { + top: -4%; + padding-left: 3.5vw; + padding-right: 3.5vw; + padding-top: 0.7vw; + padding-bottom: 0.7vw; + color: var(--textBlack); + background: var(--backgroundBlock); + border-radius: 20px; + font-family: "Jost"; + font-style: normal; + font-weight: 500; + font-size: 2rem; + } +`; + +export const SingleCatDescription = styled.div` + border: 2px solid var(--btnColor); + border-radius: 20px; + width: 44.444vw; + height: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 1vw; + + @media (max-width: 425px) { + border: 2px solid var(--btnColor); + border-radius: 20px; + width: 100%; + height: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 5vw; + padding-bottom: 5vw; + } +`; + +export const MainDescrWrapper = styled.div` + margin-top: 3vw; + margin-left: 1.6vw; + font-weight: 500; + font-size: 1.389vw; + margin-right: 1.6vw; + /* identical to box height */ + + color: #8c8c8c; + + @media (max-width: 425px) { + margin-top: 8vw; + margin-left: 5vw; + margin-right: 5vw; + font-style: normal; + font-weight: 500; + font-size: 4.267vw; + /* identical to box height */ + + color: #8c8c8c; + } +`; + +export const SecondaryDescr = styled.div` + display: flex; + align-items: center; + gap: 1vw; + justify-content: center; + margin-bottom: 2vw; + + @media (max-width: 425px) { + gap: 3vw; + justify-content: flex-start; + margin-bottom: 2vw; + margin-left: 5vw; + margin-right: 5vw; + } +`; + +export const SecondaryDescrItem = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 20vw; + gap: 3vw; + p { + font-size: 1.8rem; + color: #8c8c8c; + } + @media (max-width: 425px) { + justify-content: flex-start; + width: 100%; + gap: 4vw; + } +`; + +export const SingleCatId = styled.div` + color: var(--textWhite); + background: var(--main); + padding-left: 2vw; + padding-right: 2vw; + font-size: 1.389vw; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; +`; diff --git a/src/pages/VotingApp.js b/src/pages/VotingApp.js index ed4352f..9f990bb 100644 --- a/src/pages/VotingApp.js +++ b/src/pages/VotingApp.js @@ -1,5 +1,4 @@ import React, { useEffect, useState } from "react"; -import CardButton from "../Components/UI/CardButton"; import Button from "../Components/UI/Button"; import classes from "./VotingApp.module.css"; @@ -10,6 +9,7 @@ import { useFetch } from "../hooks/useFetch"; import UserLog from "./UserLog"; import { PageNavBar } from "../Components/PageNavBar/PageNavBar"; import { UserActions } from "./UserActions/UserActions"; +import { ContainerImg, ImgWrapper } from "./VotingApp.styles"; const VotingApp = (props) => { const { apiData, fetchData, additional, isLoading, postAction, logAction } = @@ -51,19 +51,14 @@ const VotingApp = (props) => { postAction("votes", {}, catJson); }; - let navigate = useNavigate(); - const backHandler = () => { - navigate(-1); - }; - return ( - + -
-
+ + {isLoading ? "" : testImg} -
+ { addFavouriteHandler={addFavouriteHandler} img={apiData} /> -
+ diff --git a/src/pages/VotingApp.styles.js b/src/pages/VotingApp.styles.js new file mode 100644 index 0000000..c9a0531 --- /dev/null +++ b/src/pages/VotingApp.styles.js @@ -0,0 +1,60 @@ +import styled from "styled-components"; + +export const ContainerImg = styled.div` + height: 25vw; + width: 43vw; + align-self: center; + position: relative; + border-radius: 20px; + margin-bottom: 3vw; + + @media (max-width: 425px) { + height: 50vw; + width: 100%; + align-self: center; + position: relative; + border-radius: 20px; + margin-bottom: 10vw; + } + + @media (min-width: 430px) and (max-width: 860px) { + height: 25vw; + width: 43vw; + align-self: center; + position: relative; + border-radius: 20px; + margin-bottom: 3vw; + } +`; + +export const ImgWrapper = styled.div` + align-self: center; + justify-self: center; + width: 100%; + height: 25vw; + + border-radius: 20px; + + img { + object-fit: contain; + width: 100%; + height: 25vw; + border-radius: 20px; + } + + @media (max-width: 425px) { + align-self: center; + justify-self: center; + width: 100%; + height: 50vw; + + border-radius: 20px; + + img { + object-fit: contain; + width: 100%; + height: 50vw; + border-radius: 20px; + } + } +`;