4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🐛 Review tabs lolo

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-19 11:28:31 +02:00
parent a458888693
commit 88cba0cce8
3 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Components/DesignSystem/Typography/index.tsx
View File

@ -141,6 +141,9 @@ export enum ETypoColor {
COLOR_INFO_800 = "--color-info-800", COLOR_INFO_800 = "--color-info-800",
COLOR_INFO_900 = "--color-info-900", COLOR_INFO_900 = "--color-info-900",
COLOR_INFO_950 = "--color-info-950", COLOR_INFO_950 = "--color-info-950",
TABS_CONTRAST_DEFAULT = "--tabs-contrast-default",
TABS_CONTRAST_ACTIVATED = "--tabs-contrast-actived",
} }
export default function Typography(props: IProps) { export default function Typography(props: IProps) {

8
src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss
View File

@ -3,14 +3,10 @@
font-size: 16px; font-size: 16px;
letter-spacing: 0.08px; letter-spacing: 0.08px;
border-bottom: 1px solid var(--color-neutral-500); border-bottom: 1px solid var(--tabs-stroke, #d7dce0);
cursor: pointer; cursor: pointer;
&[data-is-selected="true"] { &[data-is-selected="true"] {
border-bottom: 2px solid var(--color-neutral-950, #24282e); border-bottom: 2px solid var(--tabs-contrast-actived, #24282e);
}
&:hover {
border-bottom: 2px solid var(--color-neutral-950, #24282e);
} }
} }

4
src/front/Components/Elements/Tabs/HorizontalTab/index.tsx
View File

@ -25,8 +25,8 @@ export default function HorizontalTabs<T>(props: IProps<T>) {
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
data-is-selected={props.isSelected}> data-is-selected={props.isSelected}>
<Typography <Typography
typo={ETypo.TEXT_MD_SEMIBOLD} typo={!isHovered && !props.isSelected ? ETypo.TEXT_MD_REGULAR : ETypo.TEXT_MD_SEMIBOLD}
color={isHovered || props.isSelected ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_700}> color={!isHovered && !props.isSelected ? ETypoColor.TABS_CONTRAST_DEFAULT : ETypoColor.TABS_CONTRAST_ACTIVATED}>
{props.label} {props.label}
</Typography> </Typography>
</div> </div>