Atualiza todas as dependências do Frontend

[filipedeschamps]

Este PR reúne a atualização de todas as dependências (módulos) do Frontend.

Dependências não "totalmente" atualizadas do frontend

• recharts fiz o upgrade de 2.1.9 para 2.1.12 pois a 2.1.13 quebra por conta disso

Efeitos colaterais

Não há testes automatizados no frontend então foi tudo teste manual mesmo e a única coisa que quebrou aparentemente na questão visual foi a atualização do @primer/react de 35.2.1 para 35.5.0 por conta desse release que agora faz o TextInput (e outros Inputs pel queo testei) não preencher por padrão a largura do container, você precisa controlar isso pela propriedade block.

Em paralelo, o componente Button deles também tomou esse hit, mas ele não aceita a propriedade block ainda. Tanto que na documentação eles estão recomendando estilizar com o sx.

O Textarea do Bytemd também foi afetado.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
tabnews	✅ Ready (Inspect)	Visit Preview	Jul 29, 2022 at 3:11PM (UTC)

[aprendendofelipe]

O Textarea do Bytemd também foi afetado.

Também tem que arrumar o css :focus-within, ou seja, ajustar o border e retirar box-shadow para ficar igual ao novo padrão do @primer/react.

Lembra no PR #462 do motivo de deixar esses comentários?

tabnews.com.br/pages/[username]/[slug]/index.public.js

Lines 106 to 107 in 3d84a77

	{/* 36px is the size of the TabCoin column */}
	<Box sx={{ width: 'calc(100% - 36px)' }}>

tabnews.com.br/pages/[username]/[slug]/index.public.js

Lines 165 to 166 in 3d84a77

	{/* 36px is the size of the TabCoin column */}
	<Box sx={{ width: 'calc(100% - 36px)' }}>

Agora que retiraram o box-shadow, talvez não ocorra mais aquele problema ao editar o conteúdo root e, se realmente for o caso, não tem mais necessidade do calc(100% - 36px)

[filipedeschamps]

Também tem que arrumar o css :focus-within, ou seja, ajustar o border e retirar box-shadow para ficar igual ao novo padrão do @primer/react.

Nossa é verdade! Não tinha percebido essa diferença visual. Que pena, e achava tão bonita a sombra ao redor 😂

Eles fazem parte da borda com uma sombra com essa regra:

.fwAUCe:focus-within {
    border-color: #0969da;
    outline: none;
    box-shadow: inset 0 0 0 1px #0969da;
}

Fica bugado no Bytemd, investigando 🤝

Agora que retiraram o box-shadow, talvez não ocorra mais aquele problema ao editar o conteúdo root e, se realmente for o caso, não tem mais necessidade do calc(100% - 36px)

Eu acho que vai dar pra retirar heim!!! 😍

[filipedeschamps]

E o problema de usar border-width: 2px; para evitar aquele glitch é esse:

Screen.Recording.2022-07-29.at.7.21.06.AM.mov

[filipedeschamps]

Tem um "hackzinho de layout" ali, vamos ver se alguém nota:

Screen.Recording.2022-07-29.at.8.06.06.AM.mov

[edit]

A borda também ficou levemente mais escura

[filipedeschamps]

Merged!!! Let's goooo!!!

Em paralelo, sobre esse hack:

tabnews.com.br/pages/[username]/[slug]/index.public.js

Lines 106 to 107 in 3d84a77

	{/* 36px is the size of the TabCoin column */}
	<Box sx={{ width: 'calc(100% - 36px)' }}>

Sugiro fazermos em outro PR 🤝 provavelmente podemos juntar tudo na tarefa Compactar espaçamentos em Mobile (principalmente na árvore de respostas).

[aprendendofelipe]

Tem um "hackzinho de layout" ali, vamos ver se alguém nota:

Achei simpática essa barra faltando um pixel de cada lado e a borda branca no toolbar causada pelo padding.

---

Sugiro fazermos em outro PR 🤝 provavelmente podemos juntar tudo na tarefa Compactar espaçamentos em Mobile (principalmente na árvore de respostas).

Isso, esse PR vai exigir mudanças nesse componente.