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

✨ responsive alert

Browse Source
This commit is contained in:
Max S 2024-08-26 12:11:07 +02:00
parent 334313e71d
commit a36864b80b
2 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/front/Components/DesignSystem/Alert/classes.module.scss
View File

@ -11,6 +11,36 @@
border: 1px solid var(--alerts-info-border);
background: var(--alerts-info-background);
@media screen and (max-width: 680px) {
flex-direction: column;
}
.top {
align-self: stretch;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-button {
display: block;
&.desktop {
display: block;
@media screen and (max-width: 680px) {
display: none;
}
}
&.mobile {
display: none;
@media screen and (max-width: 680px) {
display: block;
}
}
}
.content {
display: flex;
flex-direction: column;
@ -25,64 +55,34 @@
.button-container {
display: flex;
gap: var(--spacing-md, 16px);
}
}
.icon {
display: flex;
padding: var(--spacing-1, 8px);
align-items: center;
align-self: flex-start;
border-radius: var(--alerts-badge-radius, 360px);
border: 1px solid var(--alerts-badge-border, rgba(0, 0, 0, 0));
background: var(--alerts-badge-background, #fff);
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
svg {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
stroke: var(--alerts-badge-contrast-info);
@media screen and (max-width: 680px) {
flex-direction: column;
button {
width: 100%;
}
}
}
}
&.error {
border-color: var(--alerts-error-border);
background: var(--alerts-error-background);
.icon svg {
stroke: var(--alerts-badge-contrast-error);
}
}
&.warning {
border-color: var(--alerts-warning-border);
background: var(--alerts-warning-background);
.icon svg {
stroke: var(--alerts-badge-contrast-warning);
}
}
&.success {
border-color: var(--alerts-success-border);
background: var(--alerts-success-background);
.icon svg {
stroke: var(--alerts-badge-contrast-success);
}
}
&.neutral {
border-color: var(--alerts-neutral-border);
background: var(--alerts-neutral-background);
.icon svg {
stroke: var(--alerts-badge-contrast-neutral);
}
}
&.fullwidth {

10
src/front/Components/DesignSystem/Alert/index.tsx
View File

@ -52,7 +52,13 @@ export default function Alert(props: IProps) {
return (
<div className={classNames(classes["root"], classes[variant], fullWidth && classes["fullwidth"])}>
<BadgeIcon icon={icon ?? <InformationCircleIcon />} color={variantColorMap[variant]} />
<div className={classes["top"]}>
<BadgeIcon icon={icon ?? <InformationCircleIcon />} color={variantColorMap[variant]} />
{closeButton && (
<IconButton className={classNames(classes["close-button"], classes["mobile"])} onClick={close} icon={<XMarkIcon />} />
)}
</div>
<div className={classes["content"]}>
<div className={classes["text-container"]}>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_NEUTRAL_950}>
@ -84,7 +90,7 @@ export default function Alert(props: IProps) {
)}
</div>
</div>
{closeButton && <IconButton onClick={close} icon={<XMarkIcon />} />}
{closeButton && <IconButton className={classNames(classes["close-button"], classes["desktop"])} onClick={close} icon={<XMarkIcon />} />}
</div>
);
}