Ajustes para Exibição

modulo3/astromatch2/src/App.js

@@ -8,11 +8,11 @@ import './style.css'
 import Header from "./components/header";
 
  const DivGlobal = styled.div`
-background-color: #3299a8 ;
-color: black;
-margin: auto;
-width: 50%;
-border-radius: 10%;
+  background-color: #3299a8 ;
+  color: black;
+  margin: auto;
+  width: 50%;
+  border-radius: 10%;
 `
 
 
@@ -37,7 +37,7 @@ const App = () => {
         return <TelaInicial
         vaiPaginaMatch={vaiPaginaMatch}
         vaiPaginaInicial={vaiPaginaInicial}
-        vaiPaginaMusicas={vaiPaginaMusicas}
+        // vaiPaginaMusicas={vaiPaginaMusicas}
         userPhoto={userPhoto}
         userName={userName}
         userAge={userAge}
@@ -52,7 +52,7 @@ const App = () => {
         return <TelaMatch
         vaiPaginaMatch={vaiPaginaMatch}
         vaiPaginaInicial={vaiPaginaInicial}
-        vaiPaginaMusicas={vaiPaginaMusicas} 
+        // vaiPaginaMusicas={vaiPaginaMusicas} 
         limpar={limpar}  
         matchesList={matchesList}
         />
@@ -61,7 +61,7 @@ const App = () => {
         return <TelaMusica 
         vaiPaginaMatch={vaiPaginaMatch}
         vaiPaginaInicial={vaiPaginaInicial}
-        vaiPaginaMusicas={vaiPaginaMusicas}
+        // vaiPaginaMusicas={vaiPaginaMusicas}
 
         />
 
@@ -70,29 +70,19 @@ const App = () => {
     }
   }
 
-  // const trocaTela = () => {
-  //   if (telaAtual === "apreTelaInicial"){
-  //     setTelaAtual("apreTelaMatch")
-  //   } else{
-  //     setTelaAtual("apreTelaInicial")
-  //   }
-
-  // }
-
-const vaiPaginaMatch = () => {
-  setTelaAtual("apreTelaMatch")
-  getMatchs()
-}
+  const vaiPaginaMatch = () => {
+    setTelaAtual("apreTelaMatch")
+    getMatchs()
+  }
 
-const vaiPaginaInicial = () => {
-  setTelaAtual("apreTelaInicial")
-  getPerfilUsuario()
-}
+  const vaiPaginaInicial = () => {
+    setTelaAtual("apreTelaInicial")
+    getPerfilUsuario()
+  }
 
-const vaiPaginaMusicas = () => {
-  setTelaAtual("apreTelaMusica")
-// console.log("qualquer coisa")
-}
+  const vaiPaginaMusicas = () => {
+    setTelaAtual("apreTelaMusica")
+  }
 
 
 
@@ -182,19 +172,6 @@ const limpar = () => {
 }
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
   return (
     <div>
       <Header/>

modulo3/astromatch2/src/components/TelaInicial.js

@@ -1,44 +1,29 @@
-// import React from 'react'
-// import App from '../App'
 import styled from "styled-components"
 
 const StyledTelaInicial = styled.div`
 
 img{
-    border-radius: 10px 10px 10px 10px;
-    height: 300px;
-    width: 300px;
-    object-fit: cover;
-    object-position: center;
-    padding: 5px
-
-}
-
-
+        border-radius: 10px 10px 10px 10px;
+        height: 300px;
+        width: 300px;
+        object-fit: cover;
+        object-position: center;
+        padding: 5px
+    }
 `
 
 
-
-
-
-
-
-
-
-
-
 const TelaInicial = (props) => {
 return(
     <StyledTelaInicial>
         <div>  
         <img src={`${props.userPhoto}`}/>
-        <h4>{props.userName}, {props.userAge}</h4> 
+        <h1>{props.userName}, {props.userAge}</h1> 
         <p>{props.userBio}</p>
         </div>
         <div>
-        <h3> Tela Inicial </h3>
         <button onClick={props.vaiPaginaMatch}>Tela Match</button>
-        <button onClick={props.vaiPaginaMusicas}>Tela Musicas</button>
+        {/* <button onClick={props.vaiPaginaMusicas}>Tela Musicas</button> */}
         <br/>
         <button onClick={()=> {props.choosePerson(true)}}>Quero</button>
         <button onClick={()=> {props.choosePerson(false)}}>Não quero</button>

modulo3/astromatch2/src/components/TelaMatch.js

@@ -11,46 +11,30 @@ img{
     object-fit: cover;
     object-position: center;
     padding: 5px
-
-}
-
-
+    }
 `
 
 
-
-
-
-
-
-
 const TelaMatch = (props) => {
 const renderMatches = props.matchesList.map((pessoa) => {
 return (
             <div key={props.id}>
                 <img src={`${pessoa.photo}`}/>
                 <p>{pessoa.name}</p>
             </div>
-
-)
-
+        )
 })
 
-
-
-return( 
-    <div>
-        <StyledTelaMatch>
-        {renderMatches}
-        </StyledTelaMatch>
-        <h3>Tela Match Ok</h3>
-        <button onClick={props.vaiPaginaInicial}>TelaInicial</button>
-        <button onClick={props.limpar}>Limpar Tela</button>
-    </div>
-
-
-
-)
+    return( 
+        <div>
+            <StyledTelaMatch>
+            {renderMatches}
+            </StyledTelaMatch>
+            <h3>Tela Match Ok</h3>
+            <button onClick={props.vaiPaginaInicial}>TelaInicial</button>
+            <button onClick={props.limpar}>Limpar Tela</button>
+        </div>
+        )
 }
 
 export default TelaMatch

modulo3/astromatch2/src/components/TelaMusica.js

@@ -1,20 +1,13 @@
 import React from 'react'
 
-
 const TelaMusica = (props) => {
 
-
-
-
-return( 
-    <div>
+    return( 
+        <div>
         <h3>Tela Musicas Ok</h3>
         <button onClick={props.vaiPaginaInicial}>TelaInicial</button>
-    </div>
-
-
-
-)
+        </div>
+    )
 }
 
-export default TelaMusica
+export default TelaMusica

modulo3/astromatch2/src/components/header.js

@@ -1,14 +1,8 @@
-import styled from "styled-components";
-
 export default function Header() {
-return (
-    <div>
-        heather
-
-    </div>
-)
-
-
-
+    return (
+        <div>
+            heather
+        </div>
+    )
 }