Entrega dia 15/03

modulo3/projeto-cookenu/projeto-cookenu-completo/src/App.js

@@ -10,15 +10,15 @@ import { BrowserRouter } from "react-router-dom";
 const App =() => {
 
   const token = localStorage.getItem ("token")
-  const [rightButtonText, setRigthButtonText] = useState (token ? "Logout": "Login")
+  const [rightButtonText, setRightButtonText] = useState (token ? "Logout": "Login")
 
   return (
 
     <ThemeProvider theme={theme}>
 
       <BrowserRouter>
-      <Header rightButtonText ={rightButtonText} setRigthButtonText ={setRigthButtonText} />
-      <Router setRigthButtonText ={setRigthButtonText} />
+      <Header rightButtonText ={rightButtonText} setRightButtonText ={setRightButtonText} />
+      <Router setRightButtonText ={setRightButtonText} />
       </BrowserRouter>
 
     </ThemeProvider>

modulo3/projeto-cookenu/projeto-cookenu-completo/src/LoginPage/LoginForm.js

@@ -8,15 +8,15 @@ import { useHistory } from "react-router-dom"
 import CircularProgress from '@material-ui/core/CircularProgress'
 
 
-const LoginForm = ({setRigthButtonText}) =>{
+const LoginForm = ({setRightButtonText}) =>{
 
     const [form, onChange, clear] = useForm ({email:"", password:""})
     const history = useHistory()
     const [isLoading, setIsLoading] = useState(false)
 
     const onSubmitForm = (event) =>{
         event.preventDefault()
-        login(form,clear, history, setRigthButtonText,setIsLoading)
+        login(form,clear, history, setRightButtonText,setIsLoading)
 
     }
 

modulo3/projeto-cookenu/projeto-cookenu-completo/src/LoginPage/LoginPage.js

@@ -11,16 +11,15 @@ import useUnProtectedPage from "../hooks/useUnProtectedPage"
 
 
 
-const LoginPage = ({setRigthButtonText}) =>{
+const LoginPage = ({setRightButtonText}) =>{
     useUnProtectedPage()
     const history = useHistory ()
 
     return (
-
-        <ScreenContainer>
+        <div>
             <LogoImage src={logo} />
-            <LoginForm setRigthButtonText ={setRigthButtonText}/>
-                    
+        <ScreenContainer>
+            <LoginForm setRightButtonText ={setRightButtonText}/> 
             <SignUpButtonContainer>
                 <Button 
                     onClick={() => goToSignUp(history)}   
@@ -33,11 +32,8 @@ const LoginPage = ({setRigthButtonText}) =>{
                         Não possui conta? Cadastre-se!
                 </Button> 
             </SignUpButtonContainer>
-
-
             </ScreenContainer>
-
-
+            </div>
 
     )
 

modulo3/projeto-cookenu/projeto-cookenu-completo/src/LoginPage/styled.js

@@ -4,11 +4,21 @@ export const ScreenContainer = styled.div`
   display: flex;
   flex-direction: column;
 
-
   align-items: center;
   width: 100vw;
-  margin-top: 5vh;
-  margi-bottom: 10vh;
+  margin-top: 50vh;
+  margin-bottom: 10vh;
+
+  @media (max-width:420px){
+    position:absolute;
+    bottom:30px;
+  }
+
+  @media (max-width:380px){
+    position:absolute;
+    bottom:10px;
+
+  }
 
 `
 
@@ -39,13 +49,36 @@ export const SignUpButtonContainer = styled.div`
 `
 
 export const LogoImage = styled.img`
-  width: 70vw;
+  position:absolute;
+  width: 250px;
   max-width: 300px;
-  margin-right: 800px;
-  margin-left: 120vh;
+  bottom:280px;
+  /* margin-right: 800px; */
+  margin-left: 73vh;
   margin-bottom: 3vh;
   border-radius: 20px;
 
+  /* @media (max-width:420px){
+    margin-left: 108vh;
+
+  } */
+  @media (max-width:420px){
+    position:absolute;
+    width:250px;
+    margin-left:70px;
+    bottom:360px;
+
+  }
+  @media (max-width:380px){
+    position:absolute;
+    width:200px;
+    bottom:320px;
+    margin-left:75px;
+
+
+  }
+
+
 
 
   `

modulo3/projeto-cookenu/projeto-cookenu-completo/src/SignUpPage/SignUpForm.js

@@ -9,15 +9,15 @@ import useForm from '../hooks/useForm'
 import {signUp} from "../services/user"
 import CircularProgress from '@material-ui/core/CircularProgress'
 
-const SignUpForm = ({setRigthButtonText}) =>{
+const SignUpForm = ({setRightButtonText}) =>{
     const history = useHistory ()
 
     const [form, onChange, clear] = useForm ({name:"", email:"", password:""})
     const [isLoading, setIsLoading] = useState(false)
 
     const onSubmitForm = (event) => {
         event.preventDefault()
-        signUp(form, clear, history, setRigthButtonText, setIsLoading)
+        signUp(form, clear, history, setRightButtonText, setIsLoading)
       }
 
 

modulo3/projeto-cookenu/projeto-cookenu-completo/src/SignUpPage/SignUpPage.js

@@ -6,13 +6,13 @@ import { LogoImage } from "./styled"
 import useUnProtectedPage from "../hooks/useUnProtectedPage"
 
 
-const SignUpPage = ({setRigthButtonText}) =>{
+const SignUpPage = ({setRightButtonText}) =>{
     useUnProtectedPage()
 
     return (
         <ScreenContainer>
             <LogoImage src={logo}/>
-            <SignUpForm setRigthButtonText ={setRigthButtonText} />
+            <SignUpForm setRightButtonText ={setRightButtonText} />
         </ScreenContainer>
 
     )

modulo3/projeto-cookenu/projeto-cookenu-completo/src/SignUpPage/styled.js

@@ -31,4 +31,14 @@ export const LogoImage = styled.img`
   max-width: 350px;
   margin-bottom: 3vh;
   border-radius: 20px;
+
+  @media (max-width: 420px){
+    width:60vw;
+    margin-right:25px;
+  }
+
+  @media (max-width: 380px){
+    width:60vw;
+    margin-right:25px;
+  }
 `

modulo3/projeto-cookenu/projeto-cookenu-completo/src/components/Header/Header.js

@@ -32,7 +32,7 @@ const Header = ({rightButtonText, setRightButtonText}) => {
 
       <AppBar position="static">
           <StyledToolbar> 
-            <Button onClick={() => goToRecipesList (history)} color="inherit">MASTER RECEITAS</Button>
+            <Button onClick={() => goToRecipesList (history)} color="inherit">COOKENU RECEITAS</Button>
             <Button onClick={rightButtonAction}  color="inherit">{rightButtonText}</Button>
           </StyledToolbar>
       </AppBar>

modulo3/projeto-cookenu/projeto-cookenu-completo/src/routes/Router.js

@@ -9,18 +9,18 @@ import SignUpPage from "../SignUpPage/SignUpPage"
 import ErroPage from "../ErroPage/ErroPage"
 
 
-const Router = ({setRigthButtonText}) =>{
+const Router = ({setRightButtonText}) =>{
 
     return (
 
        <Switch>
 
        <Route exact path ="/login">
-            <LoginPage setRigthButtonText ={setRigthButtonText} />
+            <LoginPage setRightButtonText ={setRightButtonText} />
        </Route>
 
        <Route exact path ="/cadastro">
-            <SignUpPage setRigthButtonText ={setRigthButtonText}/>
+            <SignUpPage setRightButtonText ={setRightButtonText}/>
        </Route>
 
        //Esse aqui é a minha Home do site... é o feed das receitas....

modulo3/projeto-cookenu/projeto-cookenu-completo/src/services/user.js

@@ -2,15 +2,15 @@ import axios from "axios"
 import {goToRecipesList} from "../routes/coordinator"
 
 
- export const login = (body, clear, history, setRigthButtonText,setIsLoading) => {
+ export const login = (body, clear, history, setRightButtonText,setIsLoading) => {
     setIsLoading(true)
     axios.post ("https://cookenu-api.herokuapp.com/user/login",body)
     .then((res)=> {
         localStorage.setItem ("token", res.data.token)
         clear()
         setIsLoading(false)
         goToRecipesList (history)
-        setRigthButtonText ("Logout")
+        setRightButtonText ("Logout")
     })
 
     .catch((err) => {
@@ -20,15 +20,15 @@ import {goToRecipesList} from "../routes/coordinator"
 
 }
 
-export const signUp = (body, clear, history, setRigthButtonText,setIsLoading) => {
+export const signUp = (body, clear, history, setRightButtonText,setIsLoading) => {
     setIsLoading(true)
     axios.post("https://cookenu-api.herokuapp.com/user/signup", body)
         .then((res) => {
             localStorage.setItem("token", res.data.token)
             clear()
             setIsLoading(true)
             goToRecipesList (history)
-            setRigthButtonText ("Logout")
+            setRightButtonText ("Logout")
 
         })
         .catch((err) => {