Gabrielgarg · Gabrielgarg · Mar 16, 2023 · Mar 16, 2023
diff --git a/projeto-pokedex/src/Componentes/Header/HeaderPagCap/HeaderPagCap.js b/projeto-pokedex/src/Componentes/Header/HeaderPagCap/HeaderPagCap.js
@@ -1,8 +1,8 @@
 import { useNavigate } from "react-router-dom"
 import { HeaderPagListaCss, HeaderPagListaDireita, HeaderPagListaEsquerda, HeaderPagListaMeio } from "../HeaderPagLista/Style"
-import { Button, ButtonGroup } from '@chakra-ui/react'
+import { Button} from '@chakra-ui/react'
 import logo from "../../../Imagens/image2.png"
-import { ToastContainer, toast } from 'react-toastify';
+import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 export const HeaderPagCap = (props) =>{

diff --git a/projeto-pokedex/src/Componentes/Header/HeaderPagDetalhe/HeaderPagDetalhe.js b/projeto-pokedex/src/Componentes/Header/HeaderPagDetalhe/HeaderPagDetalhe.js
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom"
-import { HeaderPagListaCss, HeaderPagListaDireita, HeaderPagListaEsquerda, HeaderPagListaMeio } from "../HeaderPagLista/Style"
+import { HeaderPagListaCss, HeaderPagListaEsquerda, HeaderPagListaMeio } from "../HeaderPagLista/Style"
 import logo from "../../../Imagens/image2.png"
-import { Button, ButtonGroup } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 
 
 export const HeaderPagDetalhe = () =>{

diff --git a/projeto-pokedex/src/Componentes/Header/HeaderPagLista/HeaderPagLista.js b/projeto-pokedex/src/Componentes/Header/HeaderPagLista/HeaderPagLista.js
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom"
-import { HeaderPagListaCss, HeaderPagListaCss2, HeaderPagListaDireita, HeaderPagListaEsquerda, HeaderPagListaMeio } from "./Style"
+import { HeaderPagListaCss, HeaderPagListaDireita, HeaderPagListaMeio } from "./Style"
 import logo from "../../../Imagens/image2.png"
-import { Button, ButtonGroup } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 
 
 

diff --git a/projeto-pokedex/src/Componentes/Header/HeaderPagLista/Style.js b/projeto-pokedex/src/Componentes/Header/HeaderPagLista/Style.js
@@ -6,6 +6,15 @@ export const HeaderPagListaCss = styled.header`
     grid-row: 1/2;
     grid-template-columns: 1fr 3fr 1fr;
     grid-template-rows: 160px;
+    @media screen and (max-width:768px) {
+        display: flex;
+        margin-top: 20px;
+    }
+    /* @media screen and (max-width:600px) {
+        display: flex;
+        align-items: center;
+        width: 600px;
+    } */
 
 `
 export const HeaderPagListaCss2 = styled.header`
@@ -15,6 +24,17 @@ export const HeaderPagListaCss2 = styled.header`
     background-color: #DDDDDD;
     color: white;
     align-items: center;
+    padding-left: 20px;
+        @media screen and (max-width:768px) {
+        display: flex;
+        align-items: center;
+
+    }
+    @media screen and (min-width:769px) and (max-width:900px) {
+        display: flex;
+        align-items: center;
+
+    }
 
 `
 
@@ -25,6 +45,22 @@ export const HeaderPagListaEsquerda = styled.header`
     justify-items: center;
     margin-bottom: 40px;
 
+   @media screen and (min-width:769px) and (max-width:1040px) {
+        display: flex;
+        align-items: center;
+        /* align-content: center;
+        justify-content: center;
+        justify-items: center; */
+        margin-left: 10px;
+    }
+    @media screen and (min-width:380px) and (max-width:768px) {
+        display: flex;
+        align-items: center;
+        /* align-content: center;
+        justify-content: center;
+        justify-items: center; */
+        margin-left: 10px;
+    }
 
 `
 
@@ -33,7 +69,18 @@ export const HeaderPagListaMeio = styled.header`
     grid-column: 2/3;
     align-items: center;
     justify-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 40px;
+    @media screen and (min-width:769px) and (max-width:900px) {
+        margin-bottom: 40px;
+
+    }
+    @media screen and (min-width:380px) and (max-width:768px) {
+        display: flex;
+        align-items: center;
+        margin-left: 10px;
+        margin-top: -20px;
+    }
+
 
 
 `
@@ -44,6 +91,20 @@ export const HeaderPagListaDireita = styled.header`
     align-items: center;
     justify-items: center;
     margin-bottom: 50px;
+    @media screen and (max-width:768px) and (min-width: 601px ) {
+        display: flex;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        margin-top: 30px;
+        margin-left: 270px;
+    }
+    @media screen and (min-width:380px) and (max-width:768px) {
+        display: flex;
+        align-items: center;
+        margin-top: -1px;
+        margin-left: 80px;
+    }
 
 
 `
@@ -55,7 +116,9 @@ export const Titulodapagina = styled.header`
 
 export const Centralizarcapturadetalhe = styled.body`
     display: grid;
-    align-items: center;
-    justify-items: center;
+    align-content: center;
+    justify-content: start;
+    margin-top: 10vh;
+    margin-left: 40vw;
 
 `
diff --git a/projeto-pokedex/src/Componentes/PegaImagens/Pegaimagens.js b/projeto-pokedex/src/Componentes/PegaImagens/Pegaimagens.js
@@ -12,16 +12,6 @@ import bug from "../../Imagens/Frame 8.png"
 
 import normal from "../../Imagens/Frame 9.png"
 
-import backgrass from "../../Imagens/grass.jpeg"
-
-import backfire from "../../Imagens/fire.jpeg"
-
-import backwater from "../../Imagens/water.jpeg"
-
-import backbug from "../../Imagens/bug.jpeg"
-
-import backnormal from "../../Imagens/normal.jpeg"
-
 export const obj = {
     poison: poison,
     grass: grass,

diff --git a/projeto-pokedex/src/Componentes/PokemonCard/Card2.js b/projeto-pokedex/src/Componentes/PokemonCard/Card2.js
@@ -1,57 +1,34 @@
 import {
-    Badge,
     Button,
-    Center,
     Flex,
     Heading,
-    Image,
-    Link,
-    Stack,
-    Text,
-    useColorModeValue,
-    useDisclosure,
+    Stack
   } from '@chakra-ui/react';
-import { wrap } from 'framer-motion';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Diminiumargemdaimagem, Pokebola } from './Style';
-import {
-  Alert,
-  AlertIcon,
-  AlertTitle,
-  AlertDescription,
-} from '@chakra-ui/react'
-import { ToastContainer, toast } from 'react-toastify';
+import { Cardresponsivo, Diminiumargemdaimagem, Headerdocardresponsivo, Pokebola, Separarostipes } from './Style';
+import {  toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import pokebola from "../../Imagens/pngwing 2.png"
 import {backobj, colorofbutton, obj} from '../PegaImagens/Pegaimagens';
-import arraydeobj from '../PegaImagens/Pegaimagens';
-// import json from "../Imagens/Frames.json"
-// import Frame3 from "../Imagens/Frame 3.png"
-// import pokebola from "../Imagens/pngwing 2.png"
 
 
   export default function Card2(props) {
 
     const navigate = useNavigate()
-    // console.log("nome:",json.poison)
-    // console.log(props.pokemons)
-    // props.setPokemons(...props.pokemons)
 
     const Adicionapokemon = (id) =>{
 
       const pokemons = props.pokemonsEscolhidos.find((item) => item.id === id)
 
       //Se existe o pokemon
       if(pokemons){
-        // alert("Pokemon ja capturado")
       }
       else{
           const itemencontrado = props.pokemons.find((item) => item.id === id);
           const novoItem = { ...itemencontrado,  amount: 1 };
           const novaLista = [...props.pokemonsEscolhidos, novoItem];
           props.setPokemonsEscolhidos(novaLista)
-          // localStorage.setItem("Pokemons escolhidos", JSON.stringify(props.pokemonsEscolhidos))
           toast.success("Pokemon capturado com sucesso!", {
             position: "top-center",
             autoClose: 5000,
@@ -89,13 +66,12 @@ import arraydeobj from '../PegaImagens/Pegaimagens';
         return colorofbutton[pokemonachado.type.name]
         })
 
-        console.log(colorofbutton2)
 
 
 
     return (
 
-      <Center py={6} >
+      <Cardresponsivo py={6} >
         <Stack position='relative'
           borderRadius="lg"
           w={{ sm: '100%', md: '440px' }}
@@ -111,29 +87,30 @@ import arraydeobj from '../PegaImagens/Pegaimagens';
             flex={1}
             flexDirection="column"
             justifyContent="center"
-            // alignItems="center"
-            // p={1}
             pt={2}>
-            <Heading  fontSize={'2xl'} fontFamily={'body'}>
-              {props.pokemon.id <10 ? (
+            <Heading  fontSize={'2xl'} fontFamily={'body'} color= 'white' mb='10px'>
+            <Headerdocardresponsivo fontSize={15} >
+                {props.pokemon.id <10 ? (
                 <p>#0{props.pokemon.id}</p>
               ) :
               (
                 <p>#{props.pokemon.id}</p>
               )}
+                </Headerdocardresponsivo>
               {props.pokemon.name[0].toUpperCase()+props.pokemon.name.substr(1)}
             </Heading>
-            <Flex p={3}>
+            <Flex>
                 {props.pokemon.types.map((pokemonachado, index) =>{
-                          return (<img key={index} src={obj[pokemonachado.type.name]}></img>)
+                          return (<Separarostipes key={index} src={obj[pokemonachado.type.name]}></Separarostipes>)
                     })
                   }
             </Flex>
             <Stack
               width={'100%'}
               mt={'2rem'}
               direction={'row'}
-              padding={2}
+              // padding={2}
+              gap='40px'
               justifyContent={'space-between'}
               alignItems={'center'}>
               <Button onClick={Detalhespokemon}
@@ -171,6 +148,6 @@ import arraydeobj from '../PegaImagens/Pegaimagens';
 
           </Flex>
         </Stack>
-      </Center>
+      </Cardresponsivo>
     );
   }
diff --git a/projeto-pokedex/src/Componentes/PokemonCard/Card3.js b/projeto-pokedex/src/Componentes/PokemonCard/Card3.js
@@ -1,15 +1,12 @@
 import {
     Button,
-    Center,
     Flex,
     Heading,
-    Stack,
-    Text,
-
+    Stack
   } from '@chakra-ui/react';
 
 import { useNavigate } from 'react-router-dom';
-import { Diminiumargemdaimagem, Pokebola } from './Style';
+import { Cardresponsivo, Diminiumargemdaimagem, Pokebola, Separarostipes } from './Style';
 import {  toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import pokebola from "../../Imagens/pngwing 2.png"
@@ -61,15 +58,14 @@ import {obj} from '../PegaImagens/Pegaimagens';
     const Detalhespokemon = () =>{
       props.setDetalhe(props.pokemon)
       props.setPokemonsEstanosEscolhidos(true)
-      // console.log("vo usar na pag cap:",props.pokemon)
       navigate("/cap")
 
 
     }
 
 
     return (
-          <Center py={6} >
+          <Cardresponsivo py={6} >
             <Stack position='relative' 
               borderRadius="lg"
               w={{ sm: '100%', md: '440px' }}
@@ -83,24 +79,31 @@ import {obj} from '../PegaImagens/Pegaimagens';
                 flexDirection="column"
                 justifyContent="center"
                 pt={2}>
-                <Heading fontSize={'2xl'} fontFamily={'body'}>
+                <Heading  fontSize={'2xl'} fontFamily={'body'} color= 'white' mb='10px'>
+                <Heading fontSize={15} >
+                {props.pokemon.id <10 ? (
+                <p>#0{props.pokemon.id}</p>
+              ) :
+              (
                 <p>#{props.pokemon.id}</p>
-                  {props.pokemon.name}
+              )}
+                </Heading>
+
+                  {props.pokemon.name[0].toUpperCase()+props.pokemon.name.substr(1)}
                 </Heading>
-                <Flex>
-                    <Text fontWeight={600} color={'gray.500'} size="sm" mb={4}>
-                      </Text>
-                    {/* {props.pokemonsEscolhidos.types.map((pokemonachado, index) =>{
-                          return (<img key={index} src={obj[pokemonachado.type.name]}></img>)
+                <Flex >
+                {props.pokemon.types.map((pokemonachado, index) =>{
+                          return (<Separarostipes key={index} src={obj[pokemonachado.type.name]}></Separarostipes>)
                     })
-                  } */}
+                  }
                 </Flex>
 
-                <Stack
+                <Stack 
                   width={'100%'}
                   mt={'2rem'}
                   direction={'row'}
-                  padding={2}
+                  // padding={2}
+                  gap='40px'
                   justifyContent={'space-between'}
                   alignItems={'center'}>
                   <Button onClick={Detalhespokemon}
@@ -134,12 +137,11 @@ import {obj} from '../PegaImagens/Pegaimagens';
               </Stack>
               <Pokebola src={pokebola}></Pokebola>
             <Flex >
-            {/* <img src={props.pokemon.sprites.other.dream_world.front_default}/> */}
             <Diminiumargemdaimagem src={props.pokemon.sprites.other['official-artwork'].front_default}/>
 
           </Flex>
             </Stack>
-          </Center>
+          </Cardresponsivo>
         )
 
   }