feat(mobile): layout cabeçalho e abas

[RennanD]

📋 Descrição

Essa PR finaliza o que o @rodrigorgtic criou, com o Drawer e cria o header tanto das telas do Tab Navigation, quanto das telas de Drawer. Ela também remove as tela de navegação em pilha.

Fixes #67

🛠️ Tipo da mudança

Exclua as opções que não são relevantes.

• [x] Nova feature

📷 Screenshots

✅ Checklist:

• [x] Meu código segue as diretrizes de estilo deste projeto
• [x] Realizei uma auto revisão do meu código
• [x] Minhas alterações não geram novos alertas

[diego3g]

Fala @RennanD, pela print parece que as abas não estão seguindo o espaçamento interno vertical de 16px, confere? Vale dar um double check no layout do Figma pra ver se tudo está 100% <3

Fora isso, a cor também não está batendo totalmente, acredito que seja pela falta do merge da PR #71 certo?!

[RennanD]

Fala @RennanD, pela print parece que as abas não estão seguindo o espaçamento interno vertical de 16px, confere? Vale dar um double check no layout do Figma pra ver se tudo está 100% <3

Fora isso, a cor também não está batendo totalmente, acredito que seja pela falta do merge da PR #71 certo?!

Em relação as cores é isso mesmo, pelo menos cor de ícone ativo e inativo está assim por conta dos tokens de cor não estarem configurados.

Posso abrir uma issue para alterar essas cores após a #71 ser aprovada, o que achas?

[diego3g]

@RennanD #71 entrou :)

[RennanD]

@RennanD #71 entrou :)

Shoow!! Já vou usar as cores certas. 💜

[RennanD]

@RennanD #71 entrou :)

amigo , percebi que utilizando as cores no dentro do extends no tailwind.config.js só funciona para as classes, então quando utilizo dentro das opções do TabBar, para as labels por exemplo, acaba ficando com o token padrão do Tailwind.

Vou mover essas cores para a raiz do tema, já que só elas vão ser utilizadas no app, beleza?

[diego3g]

@RennanD Acho que precisa usar o resolveConfig: https://tailwindcss.com/docs/configuration#referencing-in-java-script

[RennanD]

@diego3g confere se tá tudo certinho agora. 💜

[diego3g]

@RennanD dois últimos ajustes e se puder colocar uma print de como ficou seria massa! :)

[RennanD]

@diego3g tranquilo amigo, o print acha melhor colocar como um comentário aqui mesmo?

[diego3g]

@RennanD sim

[melquisedeque-magalhaes]

@RennanD #71 entrou :)

amigo , percebi que utilizando as cores no dentro do extends no tailwind.config.js só funciona para as classes, então quando utilizo dentro das opções do TabBar, para as labels por exemplo, acaba ficando com o token padrão do Tailwind.

Vou mover essas cores para a raiz do tema, já que só elas vão ser utilizadas no app, beleza?

mano na Pr #81 eu fiz uma forma de utilizar as cores fora das classe se quiser dar uma olhada mano, acho que e uma abordagem interessante.

[diego3g]

@melquisedeque-magalhaes acho que como o @RennanD fez é melhor, com o resolveConfig, inclusive é o recomendado na doc do tailwind.

[melquisedeque-magalhaes]

@melquisedeque-magalhaes acho que como o @RennanD fez é melhor, com o resolveConfig, inclusive é o recomendado na doc do tailwind.

shooow @diego3g e @RennanD gostei da implementação do resolveConfig também muito massa, quando der o merge nessa Pr vou atualizar a minha.

[RennanD]

@diego3g acho que agora foi huheuhe!! Além do que tinha pedido para ajustar, refatorei para utilizar os path e ficou muito melhor.

[henriqgoncalvs]

Pessoal, o CI foi atualizado então vcs vão ver que já tem alguns jobs falhando.

Pra o o job do Semantic PR Titles passar vcs tem que escrever o título no formato do conventional commits (só add um feat(mobile):) na frente já resolve.

Sobre o de types checking, podem ignorar por enquanto pois é um erro de node_modules que está em resolução

vlww 👊

[diego3g]

@RennanD No layout eu coloquei o padding das tabs abaixo maior porque é iOS e tem o notch, mas no Android deveria ficar igual. Acho que ali também tem que usar o safeAreaInsets

[RennanD]

Fala @diego3g , fiz uma condição para verificar o Inset Bottom e aplicar uma altura e um Padding bottom diferentes par o ios no caso do notch.