feature: inserido responsividade a aplicação

debug.log

@@ -0,0 +1 @@
+[1031/100656.336:ERROR:directory_reader_win.cc(43)] FindFirstFile: O sistema n�o pode encontrar o caminho especificado. (0x3)

src/App.js

@@ -1,6 +1,4 @@
 import React from "react";
-import Inicio from "./pages/inicio";
-import Registrar from "./pages/registrar";
 import Routes from "./routes";
 import { GlobalStyle } from "./styles/global.styled";
 

src/components/Card/index.js

@@ -1,6 +1,15 @@
 import React from "react";
 import { Container } from "./styled";
 
+/**
+ * Componente card que renderiza um psicologo
+ *
+ * @param {*} imageUrl - url da image
+ * @param {*} nome - nome do psicologo
+ * @param {*} plano - tipo de plano
+ * @param {*} endereco - nome da rua
+ *
+ */
 export default function Card({ imagemUrl, nome, plano, endereco, ...rest }) {
   return (
     <Container {...rest} type="button">

src/components/Card/styled.js

@@ -13,8 +13,10 @@ export const Container = styled.button`
     bottom: 180px;
     margin-left: auto;
     margin-right: auto;
-    width: 128px;
-    height: 128px;
+    width: 100%;
+    height: 100%;
+    max-height: 128px;
+    max-width: 128px;
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
     border-radius: 50%;
   }
@@ -49,4 +51,10 @@ export const Container = styled.button`
       color: #333333;
     }
   }
+
+  @media (max-width: 768px) {
+    img {
+      bottom: 200px;
+    }
+  }
 `;

src/components/Modal/index.js

@@ -2,6 +2,13 @@ import React from "react";
 import { Container, Contato, Plano, Descricao, NomePsicologo } from "./styled";
 import MaterialModal from "@material-ui/core/Modal";
 
+/**
+ * Componente modal que renderiza um psicologo selecionado pelo usuário
+ *
+ * @param {*} psicologo - objeto contendo os dados do psicologo
+ * @param {*} abrir - flag com status do modal
+ * @param {*} fecharModal - função que fecha o modal
+ */
 export default function Modal({ psicologo, abrir, fecharModal }) {
   return (
     <MaterialModal

src/components/Modal/styled.js

@@ -31,7 +31,6 @@ export const Container = styled.div`
 
   img {
     position: absolute;
-    background: steelblue;
     max-width: 200px;
     width: 100%;
     left: 0;
@@ -59,6 +58,15 @@ export const Container = styled.div`
       color: #7c7c7c;
     }
   }
+
+  @media (max-width: 768px) {
+    padding: 0 10px 0 10px;
+
+    img {
+      max-width: 100px;
+      bottom: 350px;
+    }
+  }
 `;
 
 export const Contato = styled.h2`

src/components/Select.js

@@ -1,8 +1,5 @@
 import React, { useRef, useEffect } from "react";
-import ReactSelect, {
-  OptionTypeBase,
-  Props as SelectProps,
-} from "react-select";
+import ReactSelect from "react-select";
 import { useField } from "@unform/core";
 
 const Select = ({ name, ...rest }) => {

src/pages/inicio/index.js

@@ -4,12 +4,23 @@ import { ReactComponent as Logo } from "../../assets/logo.svg";
 export default function Inicio() {
   return (
     <Container>
-      <Logo />
-      <InputBuscar placeholder="Digite seu endereço" />
-      <BotaoBuscar href="/pesquisar">Pesquisar</BotaoBuscar>
-      <BotaoRegistrar href="/registrar">
-        Quero cadastrar um novo profissional
-      </BotaoRegistrar>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          maxWidth: 612,
+          width: "100%",
+          alignItems: "center",
+          padding: 10,
+        }}
+      >
+        <Logo />
+        <InputBuscar placeholder="Digite seu endereço" />
+        <BotaoBuscar href="/pesquisar">Pesquisar</BotaoBuscar>
+        <BotaoRegistrar href="/registrar">
+          Quero cadastrar um novo profissional
+        </BotaoRegistrar>
+      </div>
     </Container>
   );
 }

src/pages/inicio/styled.js

@@ -9,7 +9,6 @@ export const Container = styled.div`
   align-items: center;
   justify-content: center;
   height: 100vh;
-  position: relative;
 `;
 export const BotaoBuscar = styled.a`
   background: #0f4c81;
@@ -34,7 +33,7 @@ export const BotaoRegistrar = styled.a`
   margin-top: 20px;
 `;
 export const InputBuscar = styled.input`
-  width: 612px;
+  width: 100%;
   height: 61px;
   background: #ffffff;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);

src/pages/pesquisar/index.js

@@ -1,19 +1,30 @@
 import React, { useState, useEffect } from "react";
-import { Container, BotaoBuscar, InputBuscar, Logo } from "./styled";
+import { Container, InputBuscar, Logo, ContainerHeader } from "./styled";
 import logo from "../../assets/logo.svg";
 import Card from "../../components/Card";
 import axios from "axios";
 import Modal from "../../components/Modal";
 
 export default function Pesquisar() {
+  //hooks são funcoes que armazenam logicas que facilita a utilização
+  //de determinadas lógicas
+
+  //armazena a lista de psicologos
   const [psicologos, setPsicologos] = useState([]);
+
+  //armazena o psicologo selecionado pelo usuário
   const [psicologo, setPsicologo] = useState({});
+
+  //flag que armazena o estado do modal, `visivel` ou `oculto`
   const [modal, setModal] = useState(false);
 
+  //funcao que busca os psicologos cadastrados
+  //*utlizado dados fake, pois ainda não foi implementado o back-end*
   function buscarPsicologos() {
     axios
       .get("https://randomuser.me/api/?nat=br&results=13")
       .then((response) => {
+        //seta a lista de psicologos dentro do array `psicologos`
         setPsicologos(response.data.results);
       });
   }
@@ -27,16 +38,18 @@ export default function Pesquisar() {
     setModal(false);
   }
 
+  //hook executado todas as vezes que a tela e aberta
   useEffect(() => {
     buscarPsicologos();
   }, []);
+
   return (
     <Container>
       <header>
-        <div style={{ display: "flex", flexDirection: "column" }}>
+        <ContainerHeader>
           <Logo src={logo} />
           <InputBuscar placeholder="Digite seu endereço" />
-        </div>
+        </ContainerHeader>
       </header>
 
       <main>

src/pages/pesquisar/styled.js

@@ -35,13 +35,13 @@ export const Container = styled.div`
     main {
       display: flex;
       flex-direction: column;
-      padding: 10px;
+      padding: 100px 10px 50px 10px;
     }
   }
 `;
 
 export const InputBuscar = styled.input`
-  width: 612px;
+  width: 100%;
   height: 61px;
   background: #ffffff;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
@@ -51,14 +51,16 @@ export const InputBuscar = styled.input`
   ::placeholder {
     color: #e5e5e5;
   }
-
-  @media (max-width: 768px) {
-    width: 100%;
-  }
 `;
 
 export const Logo = styled.img`
   align-self: flex-start;
   width: 173px;
   height: 44px;
 `;
+export const ContainerHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 612px;
+`;

src/pages/registrar/index.js

@@ -12,10 +12,15 @@ import Select from "../../components/Select";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import * as Yup from "yup";
+import { useHistory } from "react-router-dom";
 
 export default function Registrar() {
+  //hook de navegaçãos
+  const history = useHistory();
+
   async function handleSubmit(data, { reset }) {
     try {
+      //yup e uma ferramenta utilizada para validação dos campos de um formulario
       const schema = Yup.object().shape({
         nome: Yup.string().required("Informe o nome"),
         email: Yup.string()
@@ -31,11 +36,21 @@ export default function Registrar() {
       await schema.validate(data, {
         abortEarly: false,
       });
+
+      //apresenta mensagem de sucesso
       toast.success("Cadastrado com sucesso");
-      reset();
+
+      setTimeout(() => {
+        //reseta valores do formulario
+        reset();
+        //navega para tela inicial
+        history.push("/");
+      }, 2000);
     } catch (err) {
       if (err instanceof Yup.ValidationError) {
         const mensagem = err.inner[0].message;
+        //apresenta mensagem de erro, caso algum campo do
+        //formulario não esteja conforme solicitado
         toast.error(mensagem);
       }
     }

src/pages/registrar/styled.js

@@ -50,12 +50,6 @@ export const Container = styled.div`
       color: #cccccc;
     }
   }
-
-  @media (max-width: 600px) {
-    form {
-      width: 350px;
-    }
-  }
 `;
 export const ButtaoCadastrar = styled.button`
   width: 179px;
@@ -72,11 +66,11 @@ export const ContainerDuasColunas = styled.div`
   display: flex;
   .cidade {
     width: 100%;
-    margin-right: 20px;
+    margin-right: 10px;
   }
   .uf {
     width: 50%;
-    margin-left: 20px;
+    margin-left: 10px;
   }
 `;
 export const Logo = styled.img`

src/routes.js

@@ -1,9 +1,12 @@
 import React from "react";
-import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Inicio from "./pages/inicio";
 import Pesquisar from "./pages/pesquisar";
 import Registrar from "./pages/registrar";
 
+/**
+ * Local destinado a declaracão e configuração de uma rota(tela)
+ */
 export default function Routes() {
   return (
     <Router>