Merge pull request #27 from leticiaantunesjpeg/Readme

Ajustes no botão de like e Readme

README.md

@@ -8,16 +8,16 @@
 - [4. Protótipo de baixa fidelidade](#4-protótipo-de-baixa-fidelidade)
 - [5. Protótipo de alta fidelidade](#5-protótipo-de-alta-fidelidade)
 - [6. Paleta de Cores](#6-paleta-de-cores)
-- [7. Histórias de usuários](#6-histórias-de-usuários)
-- [8. Testes de Usabilidade](#7-testes-de-usabilidade)
-- [9. Tecnologias Utilizadas](#8-tecnologias-utilizadas)
-- [10. Considerações](#9-considerações)
+- [7. Histórias de usuários](#7-histórias-de-usuários)
+- [8. Testes de Usabilidade](#8-testes-de-usabilidade)
+- [9. Tecnologias Utilizadas](#9-tecnologias-utilizadas)
+- [10. Considerações](#10-considerações)
 
 ***
 
 ## 1. Resumo do projeto.
 
-**_DevDoubt_** foi pensado e desenvolvido com a intenção de ajudar os programadores profissionais e os intusiastas a encontrarem respostas para suas dúvidas de forma mais rápida e prática.
+**_DevDoubt_** foi pensado e desenvolvido com a intenção de ajudar os programadores profissionais e os entusiastas a encontrarem respostas para suas dúvidas de forma mais rápida e prática.
 
 Como sabemos, a internet possue uma infinidade de informações, e muitas vezes, para conseguir filtrar essas informações, acaba demandando um bom tempo de experiência, sendo assim, decidimos unir em um só lugar as melhores soluções para seus Bugs ou até mesmo aperfeiçoamento de seu código.
 
@@ -30,9 +30,19 @@ Nossa inspiração para a criação do nosso app, foi o renomado site [Stack Ove
 A nossa missão foi criar uma [Single-page Application
 (SPA)](https://pt.wikipedia.org/wiki/Aplicativo_de_p%C3%A1gina_%C3%BAnica) que fosse responsiva e com mais de uma tela, onde o usuário pudessse criar uma conta de acesso, logar-se com ela, criar, editar, deletar e dar likes em publicações.
 
+Você pode acessar a aplicação utilizando o usuário de teste abaixo:
+<div align='center'>
+
+| #                     	|             Login            |         
+|:-----------------------:|:----------------------------:	|
+| e-mail:                | sap007@laboratoria.com.br 	     | 
+| senha:                	|            lab007          	|            
+
+</div>
+
 ## 3. Planejamento e Organização.
 
-O projeto foi desenvolvido por [_Fernanda Monteiro_](https://github.com/Fe-Monteiro), [_Leticia Antunes_](https://github.com/leticiaantunesjpeg) e [_Thaís Bonalume_](https://github.com/moreirathais) uma equipe incrível, sendo nosso terceiro projeto a ser realizado no Bootcamp do <Laboratória> &#128155; na turma SAP007, no qual a principal ferramenta utilizada para nossa organização foi o Trello.
+O projeto foi desenvolvido em trio e a principal ferramenta utilizada para nossa organização foi o Trello.
 
 Nele trabalhamos cada história de usuário e esmiuçamos em Baby Steps, o que facilitou muito a nossa comunicação e desenvolvimento.
 
@@ -42,7 +52,7 @@ Outro ponto bastante positivo, foi que procuramos fazer o projeto na sua grande
 
 ## 4. Protótipo de baixa fidelidade.
 
-Foi esboçado à princípio um projeto em folha de papel, para que pudéssemos juntar as ideias, após, fizemos um protótipo utilizando a ferramenta do Figma.
+Foi esboçado a princípio um projeto em folha de papel, para que pudéssemos juntar as ideias, após, fizemos um protótipo utilizando a ferramenta do Figma.
 Houve algumas pequenas mudanças, mas buscamos manter a idéia original.
 
 ### Protótipo de baixa fidelidade feita à mão em folha de papel
@@ -55,7 +65,7 @@ Houve algumas pequenas mudanças, mas buscamos manter a idéia original.
 
 ## 5. Protótipo de alta fidelidade.
 
-O protótipo de alta fielidade foi desenvolvido na ferramenta do Figma.
+O protótipo de alta fidelidade foi desenvolvido na ferramenta do Figma.
 
 <img src="readme.img/prototipoAltaMobile.png">
 
@@ -67,6 +77,8 @@ Nossa paleta de cores foi inspirada no reconhecido site Stack Overflow.
 
 ## 7. Histórias de usuários.
 
+Buscamos através das [_Histórias de Usuários_](https://www.canva.com/design/DAE7WS-Ty_8/1xkLEZNoytuAD-69_wOALg/view?utm_content=DAE7WS-Ty_8&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink) entender as necessidades do nosso público e trazer um app que possa facilitar o dia a dia dos programadores profissionais e os entusiastas centralizando em um só lugar, as respostas para diversas dúvidas de códigos.
+
 **1**. "Como desenvolvedor, gostaria de poder navegar pelo app e encontrar diversas soluções de problemas".
 
 #### Critérios de aceitação:
@@ -186,17 +198,28 @@ Nossa paleta de cores foi inspirada no reconhecido site Stack Overflow.
 
 ## 8. Testes de usabilidade.
 
-Foram realizados testes de usabilidades com pessoas de diferentes faixas etárias:
+Foram realizados testes de usabilidades com pessoas de diferentes cargos e faixas etárias:
+
+### Mônica Moreira - 22 anos:
+_Cargo:_ Social Media (Secretaria Municipal de Saúde SP)
 
-***Usuários adultos na faixa de idade de 30-40 anos:***
+- Diminuir a quantidade mínima de caracteres para poder postar.
 
-- Achou poluído o layout quando havia vários botões de pesquisa.
+Solução: Mantivemos a quantidade mínima de dez caracteres, pois por se tratar de uma rede em que as pessoas publicam soluções, uma quantidade menor de caracteres não seria possível dar informações relevantes.
 
-Solução: Fiz os botões com opções suspensas.
+- Escrita do botão loggin Google com fonte fora da área do botão.
 
-- Gostaria que ao clicar nos filtros, os cards já aparecessem, sem que houvesse a necessidade de clicar em algum botão para processar o filtro.
+Solução: Ajustamos o layout do botão.
 
-Solução: Retirei o botão de filtrar, que deveria recarregar o filtro selecionado após o clique, e coloquei a opção "change" que recarrega os cards assim que o filtro é selecionado.
+### Karina Silva - 34 anos:
+_Cargo:_ Community Manager (Mutato, Draftline Ambev)
+
+- Quando o usuário se loga pelo cadastro de e-mail e senha, o nome não aparece nas postagens.
+
+Solução: Implementamos a funcionalidade em que aparece no post o nome que o usuário utilizou no momento da realização do cadastro.
+
+### Thiago Kpelo - 34 anos:
+_Cargo:_ Software Engineer (Loft)
 
 ## 9. Tecnologias Utilizadas.
 - HTML 5
@@ -205,15 +228,16 @@ Solução: Retirei o botão de filtrar, que deveria recarregar o filtro selecion
 - Node.js
 - Git
 - GitHub
-- GitHUb Pages
+- GitHub Pages
 - Jest
-- FIrebase
+- Firebase
+- Figma
+- Slack
+- Trello
 
 ## 10. Considerações.
 
-DevDoubt foi desenvolvido em trio por, _Fernanda Monteiro_, _Leticia Antunes_ e _Thaís Bonalume_, alunas da turma SAP007 da <Laboratória> &#128155;.
-
-Este projeto foi o nosso terceiro desafio do Bootcamp que nos ensinou sobre:
+DevDoubt foi desenvolvido por [_Fernanda Monteiro_](https://github.com/Fe-Monteiro), [_Leticia Antunes_](https://github.com/leticiaantunesjpeg) e [_Thaís Bonalume_](https://github.com/moreirathais) uma equipe incrível, sendo nosso terceiro projeto a ser realizado no Bootcamp da <Laboratória> &#128155; na turma SAP007 e nos ensinou sobre:
 - Manipulação do DOM, Objetos e Array;
 - Funções;
 - Consumo de banco de dados externo;
@@ -226,4 +250,4 @@ Este projeto foi o nosso terceiro desafio do Bootcamp que nos ensinou sobre:
 - Eslint;
 - Aprender a aprender;
 
-Agradeço por esse grande desafio, pelo trio fantástico e pelo apoio das mentoras, psicólogas e colegas de squad.
+Agradecemos por esse grande desafio, pelo trio fantástico e pelo apoio das mentoras, psicólogas e colegas de squad.

src/components/card.css

@@ -30,6 +30,7 @@ body {
 .user-name {
   display: flex;
   justify-content: flex-end;
+  margin-right: 2%;
 }
 .container-like {
   display: flex;
@@ -50,6 +51,7 @@ body {
 }
 .likes {
   font-weight: bold;
+  padding-top: 10%;
 } 
 
 @media (min-width: 768px) and (max-width: 2142px) {

src/components/card.js

@@ -9,7 +9,7 @@ export default function card(item) {
   const mold = `
     <h3 class="published-title">${item.title}</h3>
     <p class="published-text">${item.text}</p>
-    <div class="user-name">${item.user}</div
+    <div class="user-name">${item.user}</div>
     <div class="container-like">
       <button class="buttons-like" id="like">
       <img id="imgLike" class="img-like" src=${checkLikes()} alt="button-like"/>

src/components/templates.css

@@ -34,8 +34,11 @@
   flex-direction: column;
   margin-top: 5%;
 }
-#yes,
-#no {
+p {
+  margin-bottom: 10%;
+}
+.btn-delete-confirm {
   width: 30%;
   margin: auto;
-}
+  margin-bottom: 4%;
+}

src/components/templates.js

@@ -26,7 +26,7 @@ export default function card(item) {
     deleteConfirm.innerHTML += `
     <p>Certeza que deseja deletar a sua contribuição?</p>
     <button class="btn-delete-confirm" id="yes">Sim</button>
-    <button class="btn-delete-confirm"id="no">Não</button>
+    <button class="btn-delete-confirm" id="no">Não</button>
     `;
     const btnYes = document.getElementById('yes');
     const btnNo = document.getElementById('no');