Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PetsPaws V.2 #3

Merged
merged 18 commits into from
Sep 20, 2022
Merged

PetsPaws V.2 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
679cbc3
Migrating to styled components, refactoring
andrewsolonets Sep 13, 2022
1e42742
styled-components + active fav icon on voting page
andrewsolonets Sep 13, 2022
2835e98
more styled-components implementation
andrewsolonets Sep 14, 2022
ebc091b
grid refactor
andrewsolonets Sep 15, 2022
41689c7
refactoring grid components + like action svg swap
andrewsolonets Sep 15, 2022
7a3691a
refactoring + mobile ui
andrewsolonets Sep 16, 2022
933bc86
fix: gallery + breeds page mobile
andrewsolonets Sep 16, 2022
09c21bd
Updated folder structure + tablet view
andrewsolonets Sep 17, 2022
994696a
Folder structure
andrewsolonets Sep 17, 2022
0897082
Responsive pages
andrewsolonets Sep 17, 2022
b92235b
grid fix
andrewsolonets Sep 17, 2022
f9dce7d
theme hook and provider
andrewsolonets Sep 17, 2022
c788196
fixed react select theme change
andrewsolonets Sep 19, 2022
bcd7123
Cleanup
andrewsolonets Sep 20, 2022
4bb4e6b
responsive fixes
andrewsolonets Sep 20, 2022
256e38d
Global font
andrewsolonets Sep 20, 2022
a8611e9
tablet burgermenu view
andrewsolonets Sep 20, 2022
5bedd95
Refactoring
andrewsolonets Sep 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
504 changes: 0 additions & 504 deletions src/App.css
View file
Open in desktop

This file was deleted.

237 changes: 40 additions & 197 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,222 +1,65 @@
import React, { useState } from "react";

import "./App.css";

import Button from "./Components/UI/Button";
import VoteTable from "./assets/vote-table.png";
import PetBreed from "./assets/pet-breeds.png";
import Gallery from "./assets/Gallery.png";
import HomePic from "./Components/UI/HomePic";

import { ReactComponent as Logo1 } from "./assets/logo2.svg";
import { ReactComponent as TextLogo } from "./assets/PetsPaw.svg";

import GalleryPage from "./pages/GalleryPage";

import BreedsPage from "./pages/BreedsPage";
import VotingApp from "./pages/VotingApp";
import FavouritesPage from "./Components/FavouritesPage";
import LikedPage from "./Components/LikedPage";
import SearchPage from "./Components/SearchPage";

import { NavLink, Route, Routes } from "react-router-dom";
import AppContainer from "./pages/AppContainerPage";
import SingleCat from "./pages/SingleCat";
import { RoutesContainer } from "./routes/Routes";
import { GlobalStyles } from "./Components/styles/globalstyles.styles";
import {
FixedMainContainer,
LogoContainerLink,
LogoSwitchContainer,
MainContainer,
SwitchContainer,
TextLogoContainer,
} from "./App.styles";
import { MainPageFixed } from "./Components/MainPageFixed/MainPageFixed";
import { ThemeProvider } from "styled-components";
import { darkTheme, lightTheme } from "./Components/styles/themes";
import { useThemeChange } from "./hooks/useThemeChange";

let subId = Math.random().toString(36).substring(7);
function App() {
const [theme, setTheme] = useState("light");
const [results, setResults] = useState([]);
const [breed, setBreed] = useState(false);
const [theme, themeToggler] = useThemeChange();

const toggleThemeHandler = () => {
if (theme === "light") {
document.documentElement.style.setProperty(
"--background",
"var(--darkBg)"
);
document.documentElement.style.setProperty("--textBlack", "var(--white)");
document.documentElement.style.setProperty(
"--backgroundBlock",
"var(--dark)"
);
document.documentElement.style.setProperty(
"--backgroundBlock2",
"var(--dark2)"
);
document.documentElement.style.setProperty(
"--btnColor",
"var(--btnColorDark)"
);
setTheme("dark");
}
if (theme === "dark") {
document.documentElement.style.setProperty(
"--background",
"var(--whiteBg)"
);
document.documentElement.style.setProperty(
"--textBlack",
"var(--darkBg)"
);
document.documentElement.style.setProperty(
"--backgroundBlock",
"var(--white)"
);
document.documentElement.style.setProperty(
"--backgroundBlock2",
"var(--whiteBg)"
);
document.documentElement.style.setProperty(
"--btnColor",
"var(--btnColorLight)"
);
setTheme("light");
}
};
const themeMode = theme === "light" ? lightTheme : darkTheme;

const catHandler = ({ results, breed }) => {
console.log(results);
setResults(results);
setBreed(breed);
};

const searchClickHandler = ({ results, breed }) => {
console.log(results);
setResults([results]);
setBreed(breed);
};

return (
<React.Fragment>
<div className="main">
<div className="parent">
{/* <img className="logo" src={logo} alt="Logo"></img> */}
<div className="logo">
<Logo1></Logo1>
<TextLogo className="logotext"></TextLogo>
</div>
<label className="switch">
<input type="checkbox" onClick={toggleThemeHandler}></input>
<span className="slider round"></span>
</label>
<section>
<div className="greetings">
<h1>Hi intern!</h1>
<p>Welcome to MI 2022 Front-end test</p>
</div>

<div className="options-container">
<p>Lets start using The Cat API</p>
<div className="options">
<NavLink
className={(state) =>
`${"option-button"} ${state.isActive ? "active" : ""}`
}
to="/voting"
>
<div className="voting-container">
<img src={VoteTable} alt="VoteTable"></img>
</div>
<Button>VOTING</Button>
</NavLink>
<NavLink
className={(state) =>
`${"option-button"} ${state.isActive ? "active" : ""}`
}
to="/breeds"
>
<div className="breed-container">
<img src={PetBreed} alt="PetBreed"></img>
</div>
<Button>BREEDS</Button>
</NavLink>
<NavLink
className={(state) =>
`${"option-button"} ${state.isActive ? "active" : ""}`
}
to="/gallery"
>
<div className="gallery-container">
<img src={Gallery} alt="Gallery"></img>
</div>
<Button>GALLERY</Button>
</NavLink>
</div>
</div>
</section>
</div>

{/* {contentApp} */}
<Routes>
<Route path="/" element={<HomePic />} />
<Route
path="/voting"
element={
<AppContainer>
<VotingApp subId={subId} />
</AppContainer>
}
/>
<Route
path="/breeds"
element={
<AppContainer>
<BreedsPage oneCat={catHandler}></BreedsPage>
</AppContainer>
}
/>
<Route
path="/breeds/:cat/:id"
exact="true"
element={
<AppContainer>
<SingleCat items={results} breed={breed} />
</AppContainer>
}
/>
<Route
path="/gallery"
element={
<AppContainer>
<GalleryPage subId={subId}></GalleryPage>
</AppContainer>
}
/>
<Route
path="/search/:searchItem"
element={
<AppContainer search={true}>
<SearchPage onClick={searchClickHandler} text={"SEARCH"} />
</AppContainer>
}
/>
<Route
path="/liked"
element={
<AppContainer>
<LikedPage value={1} text={"LIKES"} />
</AppContainer>
}
/>
<Route
path="/disliked"
element={
<AppContainer>
<LikedPage value={0} text={"DISLIKES"} />
</AppContainer>
}
/>
<Route
path="/favourites"
element={
<AppContainer>
<FavouritesPage />
</AppContainer>
}
<ThemeProvider theme={themeMode}>
<MainContainer>
<LogoSwitchContainer>
<LogoContainerLink to={"/"}>
<Logo1></Logo1>
<TextLogoContainer />
</LogoContainerLink>
<SwitchContainer>
<input type="checkbox" onClick={themeToggler} />
<span></span>
</SwitchContainer>
</LogoSwitchContainer>
<FixedMainContainer>
<MainPageFixed />
</FixedMainContainer>
<RoutesContainer
subId={subId}
catHandler={catHandler}
results={results}
breed={breed}
searchClickHandler={searchClickHandler}
/>
</Routes>
</div>
</MainContainer>
<GlobalStyles />
</ThemeProvider>
</React.Fragment>
);
}
Expand Down
121 changes: 121 additions & 0 deletions src/App.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import styled from "styled-components";
import { Link } from "react-router-dom";
import { ReactComponent as TextLogo } from "./assets/PetsPaw.svg";

export const MainContainer = styled.div`
display: flex;
@media (max-width: 37.5em) {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
`;

export const FixedMainContainer = styled.div`
position: fixed;
top: 13rem;
left: 7rem;
@media (max-width: 37.5em) {
position: initial;
width: 100%;
top: 8rem;
left: 3rem;
}
`;

export const LogoSwitchContainer = styled.div`
display: flex;
gap: 0.5vw;
justify-content: center;
align-items: center;
position: fixed;
width: auto;
left: 7rem;
top: 2.8rem;
@media (max-width: 37.5em) {
left: 2.2rem;
width: 25vw;
top: 1.7rem;
}
`;

export const LogoContainerLink = styled(Link)`
svg:first-child {
width: 2.4rem;
}

display: flex;
gap: 0.5vw;
justify-content: center;
align-items: center;

@media (max-width: 37.5em) {
gap: 0.5rem;
}
`;

export const TextLogoContainer = styled(TextLogo)`
width: 7.5rem;
path {
fill: ${({ theme }) => theme.textMain};
}
`;

export const SwitchContainer = styled.label`
position: fixed;
left: 40%;
display: inline-block;
width: 4.4rem;
height: 2.4rem;

@media (max-width: 62em) {
left: 80%;
}

input {
opacity: 0;
width: 4.4rem;
&:checked ~ span {
background-color: ${({ theme }) => theme.btnColor};
}
&:checked ~ span:before {
-webkit-transform: translateX(2rem);
-ms-transform: translateX(2rem);
transform: translateX(2rem);
}
&:focus ~ span {
box-shadow: 0 0 1px ${({ theme }) => theme.btnColor};
}
}
span {
border-radius: 3.4rem;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: ${({ theme }) => theme.btnColor};
-webkit-transition: 0.4s;
transition: 0.4s;
&:before {
position: absolute;
content: "";
height: 1.6rem;
width: 1.6rem;
left: 0.4rem;
bottom: 0.4rem;
background-color: ${({ theme }) => theme.main};
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 50%;
}
}
`;

export const SearchParagraph = styled.p`
margin-left: 1vw;
align-self: flex-start;
`;
8 changes: 0 additions & 8 deletions src/App.test.js
View file
Open in desktop

This file was deleted.

Loading