✨ responsive alert

src/front/Components/DesignSystem/Alert/classes.module.scss

@@ -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);
+
+			@media screen and (max-width: 680px) {
+				flex-direction: column;
+				button {
+					width: 100%;
 				}
 			}
-
-	.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);
 		}
 	}
 
 	&.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 {

src/front/Components/DesignSystem/Alert/index.tsx

@@ -52,7 +52,13 @@ export default function Alert(props: IProps) {
 
 	return (
 		<div className={classNames(classes["root"], classes[variant], fullWidth && classes["fullwidth"])}>
+			<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>
 	);
 }