feat: criando a seção principal que contém o mapa do IFPB-CG #1
Conversation
alem de separar em componentes separa sua estilizaçao tambem
a cor do icone de busca agora se altera para que não fique invisivel na caixa de pesquisa
configurando corretamente o import-helpers no eslint para organizar os imports dos components
|
Atualizei o |
svg do icone usado na barra de pesquisa adicionado
|
Adicionei também o |
There was a problem hiding this comment.
- Usar o
styled-components - Atualizar o arquivo
themes.jscom as cores corretas - Atualizar o
Headerde acordo com o design feito
💡 dica: o arquivo com o design no figma já da várias informações para criar o css, alias, se clicar em algum componente, ele já da todo o css, mas não use ele completo, use mais para saber os espaçamentos.
usando o svg-inline-react é colocado o svg na seção principal e usando o mousehover para alterar o background de cada sala ou bloco do svg
Alteração dos campos vazios trocando separador e palavras em maiúscula.
remove o pacote anteriormente utilizado para usar os svg's e adiciona o plugin do gatsby para isso
remove a estilização presente em Layout referente ao footer e agora ela se encontra no styled component FooterSC
remove as dependencias no componente HeaderSC referente a caixa de pesquisa e cria um componente separado para isso
|
No header, deixa a lupa clicável e usa um state para dizer se ele ta aberto ou fechado. Presta atenção no modelo do Figma, os ícones ficão juntos da direita, em vez da lupa no meio, se você selecionar um componente no Figma, segura
Tem a parte de
|
alem de posicionar os icones, agora a lupa também é clicavel e quando esse evento ocorro ou a tecla enter é pressionada na caixa de pesquisa uam função é chamada
jpalvesl
force-pushed
the
feat/criar-seção-principal
branch
from
78dad8e
to
8450dfb
Compare
|
Posicionei os icones de acordo com o Wireframe, porém mesmo com a largura 0 o input continua aparecendo antes de clicar na lupa(da pra ver até pelo mouse se a pessoa for com ele a esquerda da lupa), eu até tentei usar um useState pra deixar "display: none" e depois quando eu clicasse na lupa fosse pra "display: block", mas isso faz com que não tenha animação |
-A janela flutuante ficaria melhor se fosse com opacidade 1, do jeito que ta dificulta a leitura. |
jpalvesl
force-pushed
the
feat/criar-seção-principal
branch
from
44e1dcc
to
96c3f39
Compare
alterando o nome do arquivo recepcao.json por antiga-recepcao.json adicionado uma margin-bottom com relacao a tag main do layout e alterando z-index de do main e da janela flutuante
jpalvesl
force-pushed
the
feat/criar-seção-principal
branch
from
036b1d7
to
bbcce5a
Compare
No description provided.