Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Corrigido o estilo do sidebar. #600

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

wendesongomes
Copy link
Contributor

@wendesongomes wendesongomes commented Aug 22, 2024

Closes #591

Feature

Este PR corrige o problema onde o estilo da sidebar havia sido pedido, retornando-a ao seu design padrão. Após algumas modificações, o estilo original foi perdido, e esta atualização restaura o layout e a aparência esperados para garantir consistência na interface do usuário.

Visual evidences 🖼️

image

Copy link
Contributor

@juliaam juliaam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

o layout não está como esperado, a estrela está mais escura do que deveria e o tamanho do header da sidebar está pequeno, do maincomposer também

@juliaam
Copy link
Contributor

juliaam commented Aug 22, 2024

image

Copy link
Contributor

@DominMFD DominMFD left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Os headers ainda estão com a altura proporcional diferente

como ta:
image

figma:
image

Aparentemente o header da social media é um pouco menor do que como esta, só ajustar e ta bala

Copy link
Contributor

@JpBurgarelli JpBurgarelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Em vermelho está o que você usou/como está e em verde o que deveria estar, com base no layout do Figma:
Obs.: Dê uma conferida no tamanho dos ícones também.

image

image

image

image

@Alecell
Copy link
Contributor

Alecell commented Aug 30, 2024

Cade a thread?

Copy link
Contributor

@JpBurgarelli JpBurgarelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

O header aqui ta quebrando, corrige ae, meu man:
image

image

@wendesongomes wendesongomes force-pushed the refactorStyleSidebar#591 branch from 35bf777 to 8169b4f Compare September 2, 2024 16:06
const socialMediaName = socialMedias
.get(props.socialMediaId)
?.name.toLowerCase();
const iconPath = iconMap[socialMediaName as keyof typeof iconMap];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as keyof typeof vou morrer. Pq precisamos disso?

Copy link
Contributor

@juliaam juliaam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

figma:
image

como está na sua branch:
image

consegue ajustar o hover?

@@ -84,55 +84,55 @@
"userName": "Discord User 1",
"token": "DISCORD_EXAMPLE_TOKEN_1",
"valid": true,
"avatar": "https://example.com/image1.jpg"
"avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

é pra usar o ícone de um arquivo local do projeto, vamos conversar sobre

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

e o ícone também não tá condizente com o do figma

Comment on lines +3 to +6
.username {
margin: 0;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

muito bom! deixou alinhadinho ao layout!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isso não deve ficar aqui, todos os icons estão em src/components/Icons/icons, e já tem o do discord

@@ -45,11 +48,26 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
));

const renderAccordionContent = (): ReactNode => (
<ul role="listitem">{renderAccordionMap()}</ul>
<ul className={scss.containerAccordion} role="listitem">
{renderAccordionMap()}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

não é mais assim no code-style atual, tem que colocar no .components

Copy link
Contributor

@JpBurgarelli JpBurgarelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pelo que me recordo, esse botao da estrela estava pegando, mas, agora, nao funcionou.

image

O nome 'e o icone da rede social deveria ser roxo, nao? Olha o layout:

image

image

Copy link
Member

@Luiginicoletti Luiginicoletti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ci & codestyle
moone-boy-waiting-gif-by-hulu

@Luiginicoletti Luiginicoletti added the Changes Requested To simplify a changes request view label Sep 12, 2024
@juliaam juliaam removed AGUARDANDO ALE Changes Requested To simplify a changes request view labels Sep 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Pending Approval
Development

Successfully merging this pull request may close these issues.

Conserto do layout do conteúdo da sidebar
6 participants