Skip to content

Commit

Permalink
Migrating to styled components, refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrewsolonets
andrewsolonets committed Sep 13, 2022
1 parent 645b2ab commit 679cbc3
Show file tree
Hide file tree
Showing 36 changed files with 941 additions and 802 deletions.
69 changes: 33 additions & 36 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

a {
color: inherit;

text-decoration: none;
}

Expand All @@ -19,17 +20,18 @@ body {
box-sizing: border-box;
}
h1 {
font-size: 4.4rem;
font-weight: 500;
font-style: normal;
line-height: 4vw;
line-height: 5.8rem;
color: var(--textBlack);
margin-bottom: 0.694vw;
}
.greetings p {
font-style: normal;
font-weight: 400;
font-size: 1.38vw;
line-height: 2vw;
font-size: 2rem;
line-height: 2.9rem;
color: #8c8c8c;
}
.burgerMenu {
Expand All @@ -45,14 +47,16 @@ h1 {
}
.options-container p {
font-weight: 500;
font-size: 1.38vw;
font-size: 2rem;
line-height: 2vw;
margin-bottom: 1.389vw;
margin-bottom: 2.9rem;
color: var(--textBlack);
}

.parent {
position: fixed;
top: 13rem;
left: 7rem;
}

.logo {
Expand All @@ -61,14 +65,8 @@ h1 {
justify-content: center;
align-items: center;
position: fixed;
width: 15vw;
left: 9vw;
top: 3vw;
}
.logo {
width: 7.222vw;
position: fixed;
left: 6vw;
left: 7rem;
top: 2vw;
}
.logotext path {
Expand All @@ -77,19 +75,20 @@ h1 {
section {
display: flex;
flex-direction: column;
padding-top: 11vw;
padding-left: 14vw;
/* padding-top: 11vw;
padding-left: 14vw; */
}
.options {
display: flex;
gap: 0.694vw;
}
.option-button div {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 16vw;
height: 20vw;
height: 20rem;
width: 14rem;
border: 4px solid rgba(255, 255, 255, 0.6);
border-radius: 20px;
}
Expand Down Expand Up @@ -121,6 +120,7 @@ section {

.option-button {
display: flex;

flex-direction: column;
gap: 0.694vw;
cursor: pointer;
Expand All @@ -140,17 +140,17 @@ section {

.voting-container img {
position: relative;
width: 10vw;
height: 12vw;
width: 10rem;
height: auto;
}

.breed-container {
background: #97eab9;
}
.breed-container img {
position: relative;
width: 10.778vw;
height: 16.194vw;
width: 12rem;
height: auto;
}

.gallery-container {
Expand All @@ -159,8 +159,8 @@ section {

.gallery-container img {
position: relative;
width: 10.778vw;
height: 16.194vw;
width: 11.8rem;
height: auto;
}

.hidden {
Expand All @@ -180,12 +180,11 @@ section {
}

.switch {
position: relative;
top: 2.3vw;
left: 40vw;
position: fixed;
left: 40%;
display: inline-block;
width: 3.056vw;
height: 1.667vw;
width: 4.4rem;
height: 2.4rem;
}

.switch input {
Expand Down Expand Up @@ -345,8 +344,8 @@ input:checked + .slider:before {
transform: translateX(4.5vw);
}
}
@media (min-width: 764px) and (max-width: 1023px) {
.main {
@media (min-width: 550px) and (max-width: 1023px) {
/* .main {
padding: 2vw;
}
.greetings p {
Expand Down Expand Up @@ -398,8 +397,6 @@ input:checked + .slider:before {
top: 0;
gap: 2vw;
width: 100%;
/* margin-left: 3.6vw;
margin-right: 3.6vw; */
position: relative;
left: 0;
height: auto;
Expand Down Expand Up @@ -430,11 +427,11 @@ input:checked + .slider:before {
-webkit-transform: translateX(2.8vw);
-ms-transform: translateX(2.8vw);
transform: translateX(2.8vw);
}
} */
}

@media (min-width: 1024px) {
.option-button div {
/* .option-button div {
width: 9.583vw;
height: 13.75vw;
}
Expand Down Expand Up @@ -462,11 +459,11 @@ input:checked + .slider:before {
section {
padding-top: 7vw;
padding-left: 6vw;
}
} */
}

@media (min-width: 1440px) {
.logo {
/* .logo {
position: fixed;
left: 8vw;
top: 2vw;
Expand Down Expand Up @@ -497,7 +494,7 @@ input:checked + .slider:before {
section {
padding-top: 8vw;
padding-left: 8vw;
}
} */
.hidden {
display: none;
}
Expand Down
170 changes: 32 additions & 138 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,25 @@
import React, { useState } from "react";

import { GlobalStyles } from "./Components/styles/globalstyles.styles";
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 { NavLink } from "react-router-dom";
import { RoutesContainer } from "./routes/Routes";
import {
FixedMainContainer,
LogoSwitchContainer,
MainContainer,
SwitchContainer,
TextLogoContainer,
} from "./App.styles";
import { MainPageFixed } from "./Components/MainPageFixed/MainPageFixed";

let subId = Math.random().toString(36).substring(7);
function App() {
Expand Down Expand Up @@ -89,134 +87,30 @@ function App() {

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">
<MainContainer>
{/* <img className="logo" src={logo} alt="Logo"></img> */}
<LogoSwitchContainer>
<Logo1></Logo1>
<TextLogoContainer />
<SwitchContainer>
<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>
<span></span>
</SwitchContainer>
</LogoSwitchContainer>
<FixedMainContainer>
<MainPageFixed />
</FixedMainContainer>

{/* {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>
}
/>
</Routes>
</div>
<RoutesContainer
subId={subId}
catHandler={catHandler}
results={results}
breed={breed}
searchClickHandler={searchClickHandler}
/>
</MainContainer>
<GlobalStyles />
</React.Fragment>
);
}
Expand Down
Loading

0 comments on commit 679cbc3

Please sign in to comment.