Feat/create header component #192

franklingg · 2022-09-17T19:30:40Z

Issue

closes #182

Qual o objetivo dessa Pull Request?

Criar o componente Header. Além disso, permite alterar as línguas para inglês e espanhol.

Como pode ser manualmente testado?

É preciso rodar yarn ou npm install por ter novas dependências (react-select e babel), antes de rodar yarn dev

src/components/Header/index.jsx

src/components/Header/styles.jsx

src/i18n/index.js

NicolasLopes7 · 2022-09-17T21:03:24Z

Acho que também poderia adicionar uma media query para converter os ícones de redes sociais para um `hamburger menu`. talvez definir alguma outra forma para o tamanho das fotos ajude a não distorcer

RodrigoEC · 2022-09-17T23:39:44Z

Acho que também poderia adicionar uma media query para converter os ícones de redes sociais para um hamburger menu. talvez definir alguma outra forma para o tamanho das fotos ajude a não distorcer

@franklingg e @NicolasLopes7 Gente tinha esquecido de fazer o design do mobile, aí fiz aqui:

Tanto o footer como o header tem conteúdos que são repetidos retirados, já que eles não eram estritamente necessários

LeandraOS · 2022-09-25T00:23:19Z

src/components/Header/styles.jsx

+ line-height: 3rem;
+
+ &:hover {
+ transform: scale(1.05);


Acredito que seria muito legal aplicar esse efeito de transform nos ícones abaixo:

para o hover dos links é legal ser a cor #FC8E51. O que achas @franklingg?

LeandraOS · 2022-09-25T00:32:15Z

src/components/Header/styles.jsx

+ padding: 3.7rem 4.4rem;
+ background-color: rgba(252, 252, 252, 0.6);
+
+ @media (max-width: 428px){


Nas medidas abaixo de 375px, estamos com a responsividade assim, seria legal corrigir esse detalhe

LeandraOS · 2022-09-25T01:16:56Z

@franklingg por favor, faz um git pull origin develop pra a tua branch porque temos atualizações na develop.

# Conflicts: # package.json

# Conflicts: # .babelrc # src/styles/globals.css

LeandraOS · 2022-10-10T04:46:03Z

src/styles/globals.css

@@ -25,3 +26,6 @@ html {
 font-size: 62.5%;
 }

+body {
+ font-size: 1.6rem;
+ background: url("../assets/img/background.png") repeat;


Ooie @franklingg primeiramente parabénssss! Tá incrível a tela inicial. Amei muito!!!!

Vou pontuar dois errinhos básicos de compilação que tive e que são rápidos de consertar.

Na linha 32 temos a falta da chave de fechamento do body peço que adicione por favorzinho 🚀

LeandraOS · 2022-10-10T04:48:53Z

src/i18n/index.js

@@ -3,10 +3,14 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';

 import translationsPTBR from './locales/pt-br.json';
+import translationsENUS from './locales/en-us.json';
+import translationsESES from './locales/es-es.json';


Nessa linha, temos um pequeno detalhe de digitação do path do arquivo. Ele apresenta o seguinte erro:

Para resolver, basta alterar o es-es.json para es-ES.json

import translationsESES from './locales/es-ES.json';

src/components/Header/index.jsx

franklingg added 2 commits September 17, 2022 16:24

feat: add header component

c71de64

feat: add english and spanish translations

c46cafc

LeandraOS self-requested a review September 17, 2022 20:36

LeandraOS assigned franklingg Sep 17, 2022

LeandraOS added the Feature label Sep 17, 2022