From efea07aab604ca11e4907f104d35285f4b0d28a1 Mon Sep 17 00:00:00 2001
From: JohanFX <sosa.johan@gmail.com>
Date: Mon, 5 Aug 2024 09:57:26 +0200
Subject: [PATCH] New Dashboard for Admins (#183)

- Modify Alert component to support `isCloseable` property, which enables or disables the close button in alerts.
- Update styling for root element, message, title, action, and closeButton classes to improve visual consistency across alert types.
---
 .../components/src/feedback/Alert/Alert.js    |  2 +-
 .../src/feedback/Alert/Alert.styles.js        | 22 +++++--------------
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/feedback/Alert/Alert.js b/packages/components/src/feedback/Alert/Alert.js
index a1688a39e..c69820671 100644
--- a/packages/components/src/feedback/Alert/Alert.js
+++ b/packages/components/src/feedback/Alert/Alert.js
@@ -41,7 +41,7 @@ const Alert = ({
     () => closeable && !isNil(closeable) && closeable !== '',
     [closeable],
   );
-  const { classes } = AlertStyles({ variant, severity }, { name: 'Alert' });
+  const { classes } = AlertStyles({ variant, severity, isCloseable }, { name: 'Alert' });
 
   return (
     <MantineAlert
diff --git a/packages/components/src/feedback/Alert/Alert.styles.js b/packages/components/src/feedback/Alert/Alert.styles.js
index 602ec8a95..c132281ea 100644
--- a/packages/components/src/feedback/Alert/Alert.styles.js
+++ b/packages/components/src/feedback/Alert/Alert.styles.js
@@ -1,5 +1,5 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins';
+import { pxToRem } from '../../theme.mixins';
 
 const getColor = (theme, severity) =>
   ({
@@ -37,8 +37,7 @@ const getColor = (theme, severity) =>
     },
   })[severity];
 
-const AlertStyles = createStyles((theme, { variant, severity }) => {
-  const alertTheme = theme;
+const AlertStyles = createStyles((theme, { variant, severity, isCloseable }) => {
   const titleSize = variant === 'block' ? 'md--bold' : 'sm--bold';
   return {
     root: {
@@ -47,7 +46,8 @@ const AlertStyles = createStyles((theme, { variant, severity }) => {
       display: 'flex',
       alignItems: 'center',
       borderRadius: 4,
-      padding: `${pxToRem(6)} ${pxToRem(16)} ${pxToRem(6)} ${pxToRem(16)}`,
+      padding: pxToRem(6),
+      paddingLeft: pxToRem(16),
       borderLeftWidth: 4,
     },
     message: {},
@@ -63,7 +63,6 @@ const AlertStyles = createStyles((theme, { variant, severity }) => {
       flex: '1 1 100%',
       display: 'flex',
       flexDirection: variant === 'block' ? 'column' : null,
-      // transform: variant === 'block' ? 'translateY(-2px)' : 'translateY(4px)',
       gap: theme.spacing['1'],
     },
     title: {
@@ -81,25 +80,16 @@ const AlertStyles = createStyles((theme, { variant, severity }) => {
       flex: '1 1 100%',
       marginRight: variant === 'block' ? pxToRem(24) : pxToRem(28),
       lineHeight: 1.2,
-      // marginTop: pxToRem(4),
-      // paddingTop: pxToRem(3.6),
       paddingTop: theme.spacing[2],
       paddingBottom: theme.spacing[2],
     },
     action: {
-      marginRight: pxToRem(30),
-      // marginTop: variant === 'block' ? pxToRem(5) : null,
-      // paddingTop: variant === 'block' ? null : pxToRem(3),
-    },
-    closeButton: {
-      // color: theme.colors.text05,
-      // transform: 'translateY(3px)',
+      marginRight: isCloseable ? pxToRem(30) : null,
     },
+    closeButton: {},
     icon: {
       marginRight: pxToRem(8),
       transform: 'translateY(2px)',
-      // marginTop: pxToRem(3),
-      // paddingTop: pxToRem(2),
     },
   };
 });