From a36864b80bf48f9b15cac5c715655af1ae67a144 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Mon, 26 Aug 2024 12:11:07 +0200
Subject: [PATCH] :sparkles: responsive alert

---
 .../DesignSystem/Alert/classes.module.scss    | 72 +++++++++----------
 .../Components/DesignSystem/Alert/index.tsx   | 10 ++-
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/src/front/Components/DesignSystem/Alert/classes.module.scss b/src/front/Components/DesignSystem/Alert/classes.module.scss
index e800be15..77dd499e 100644
--- a/src/front/Components/DesignSystem/Alert/classes.module.scss
+++ b/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);
-		}
-	}
 
-	.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 {
diff --git a/src/front/Components/DesignSystem/Alert/index.tsx b/src/front/Components/DesignSystem/Alert/index.tsx
index ac3c8298..c3568abb 100644
--- a/src/front/Components/DesignSystem/Alert/index.tsx
+++ b/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"])}>
-			<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>
 	);
 }