Skip to content

Corrigido o estilo do sidebar. #600

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.

Sign up for GitHub

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

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

Corrigido o estilo do sidebar. #600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6b9b0e9
refactor: refactor style in sideBar
wendesongomes Aug 22, 2024
184fbcf
refactor: refactor img in avatar
wendesongomes Aug 22, 2024
a125bc4
refactor: adjust header padding
wendesongomes Aug 22, 2024
8169b4f
fix: corrected header and accordion container
wendesongomes Sep 2, 2024
41cf705
fix: prettier error
wendesongomes Sep 2, 2024
2f391be
refactor: icons in socialAccordion dynamics
wendesongomes Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions mock-api.json
View file
Open in desktop
Copy link
Contributor

@juliaam juliaam Sep 4, 2024

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

Original file line number Diff line number Diff line change
Expand Up @@ -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

@juliaam juliaam Sep 4, 2024

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

},
{
"id": "14",
"socialMediaId": "TWITTER_EXAMPLE_ID",
"userName": "Twitter User 14",
"token": "TWITTER_EXAMPLE_TOKEN_14",
"valid": true,
"avatar": "https://example.com/image2.jpg"
"avatar": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-256.png"
},
{
"id": "2",
"socialMediaId": "DISCORD_EXAMPLE_ID",
"userName": "Discord User 2",
"token": "DISCORD_EXAMPLE_TOKEN_2",
"valid": false,
"avatar": "https://example.com/image3.jpg"
"avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
},
{
"id": "3",
"socialMediaId": "DISCORD_EXAMPLE_ID",
"userName": "Discord User 3",
"token": "DISCORD_EXAMPLE_TOKEN_3",
"valid": true,
"avatar": "https://example.com/image4.jpg"
"avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
},
{
"id": "4",
"socialMediaId": "TWITTER_EXAMPLE_ID",
"userName": "Twitter User 4",
"token": "TWITTER_EXAMPLE_TOKEN_4",
"valid": false,
"avatar": "https://example.com/image2.jpg"
"avatar": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-256.png"
},
{
"id": "5",
"socialMediaId": "DISCORD_EXAMPLE_ID",
"userName": "Discord User 5",
"token": "DISCORD_EXAMPLE_TOKEN_5",
"valid": false,
"avatar": "https://example.com/image6.jpg"
"avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
},
{
"id": "6",
"socialMediaId": "TWITTER_EXAMPLE_ID",
"userName": "Twitter User 6",
"token": "TWITTER_EXAMPLE_TOKEN_6",
"valid": true,
"avatar": "https://example.com/image2.jpg"
"avatar": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-256.png"
}
],
"social-medias": [
Expand Down
4 changes: 3 additions & 1 deletion src/components/AccordionTab/AccordionTab.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@

.headerTitle {
flex-grow: 1;

margin: 0;
}

.headerIcon {
Expand Down Expand Up @@ -55,7 +57,7 @@
font-size: 1.6rem;
line-height: 1;

padding: 1.3rem 2.2rem;
padding: 2.2rem;

position: relative;

Expand Down
19 changes: 16 additions & 3 deletions src/components/AccountCard/AccountCard.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
@use '~styles/global.scss' as *;

.username {
margin: 0;
}

Comment on lines +3 to +6
Copy link
Contributor

@juliaam juliaam Sep 4, 2024

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!

.container {
display: flex;
flex-flow: row nowrap;
Expand All @@ -9,7 +13,7 @@
align-items: center;
justify-content: space-between;

padding: 0.8rem 0.8rem 0.8rem 1.6rem;
padding: 0.8rem;

border-bottom: 0.1rem solid $primaryGray;

Expand All @@ -22,9 +26,8 @@

.username {
width: 100%;
overflow: hidden;

display: flex;
overflow: hidden;

font-size: 1.4rem;
text-overflow: ellipsis;
Expand All @@ -40,13 +43,23 @@
font-size: 1.4rem;
}

.containerButton {
display: flex;
gap: 0.9rem;
}

.avatar {
width: 40px;
height: 40px;

display: flex;

flex-shrink: 0;

align-items: center;

justify-content: center;

background-color: $primaryPurple;
border-radius: 50%;
}
22 changes: 15 additions & 7 deletions src/components/AccountCard/AccountCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { ReactNode, useState } from 'react';
import classNames from 'classnames';

import { Avatar } from '~components/Avatar/Avatar';
import Button from '~components/Button/Button';
import Icon from '~components/Icon/Icon';
import { Switch } from '~components/Switch/Switch';

import scss from './AccountCard.module.scss';
Expand Down Expand Up @@ -42,13 +44,19 @@ export function AccountCard({
<div className={accountCardClassNames} {...props}>
<Avatar className={scss.avatar} image={avatarURL} username={username} />
<p className={scss.username}>{username}</p>
<button className={scss.star} onClick={handleFavoriteChange} />
<Switch
checked={enabled}
invalid={invalid}
onChange={handleEnableChange}
variant={hasError ? 'error' : 'default'}
/>
<div className={scss.containerButton}>
<Button
circle
icon={<Icon icon="star" size={20} />}
onClick={handleFavoriteChange}
/>
<Switch
checked={enabled}
invalid={invalid}
onChange={handleEnableChange}
variant={hasError ? 'error' : 'default'}
/>
</div>
</div>
);
}
3 changes: 3 additions & 0 deletions src/pages/home/components/Sidebar/Sidebar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,11 @@
}

.content {
width: 100%;
height: 100%;

overflow: auto;

flex-direction: column;
}

Expand Down
8 changes: 6 additions & 2 deletions src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,17 @@
}
}

.containerAccordion {
width: 100%;
}

.header {
display: flex;

align-items: center;
justify-content: space-between;

padding: 1.5rem 0.6rem;
padding: 1.6rem;

border: 1px solid $primaryGray;

Expand All @@ -33,7 +37,7 @@

display: flex;

gap: 1rem;
gap: 1.6rem;

align-items: center;
}
Expand Down
30 changes: 22 additions & 8 deletions src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ import Icon from '~components/Icon/Icon';

import scss from './SocialAccordion.module.scss';

import iconPlaceholderForIcon from './assets/facebook.svg';
import discordIcon from './assets/discord.svg';
import facebookIcon from './assets/facebook.svg';
import instagramIcon from './assets/instagram.svg';
import xIcon from './assets/x.svg';

import { AccountQuantity } from './SocialAccordion.components';
import { SocialAccordionProps } from './SocialAccordion.type';
Expand Down Expand Up @@ -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

@juliaam juliaam Sep 4, 2024

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

</ul>
);

const hasInvalidAccount = props.accounts.some(({ valid }) => !valid);

const iconMap = {
discord: discordIcon,
facebook: facebookIcon,
instagram: instagramIcon,
twitter: xIcon,
x: xIcon,
};

const socialMediaName = socialMedias
.get(props.socialMediaId)
?.name.toLowerCase();
const iconPath = iconMap[socialMediaName as keyof typeof iconMap];
Copy link
Contributor

@Alecell Alecell Sep 4, 2024

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?


return (
<Accordion
className={scss.wrapper}
Expand All @@ -64,11 +82,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
>
<div className={scss.header}>
<div className={scss.socialInfo}>
<img
alt="social media"
className={scss.icon}
src={iconPlaceholderForIcon}
/>
<img alt="social media" className={scss.icon} src={iconPath} />
<span>{socialMedias.get(props.socialMediaId)?.name}</span>
</div>
{props.error && renderError()}
Expand All @@ -85,7 +99,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
}
className={isOpen ? scss.rotateIconUp : scss.rotateIconDown}
icon={isOpen ? 'triangle-drop-arrow' : 'triangle-left-arrow'}
size={16}
size={10}
/>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/pages/home/components/Sidebar/components/SocialAccordion/assets/discord.svg
View file
Open in desktop
Copy link
Contributor

@juliaam juliaam Sep 4, 2024

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

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.