fix(organisms): ajustes visuales flashNotification

src/documentation/components/FlashNotificationDemo.tsx

@@ -5,22 +5,15 @@ import { Box, Button } from '@chakra-ui/react'
 export default function FlashNotificationDemo({
   state,
   message,
-  width,
 }: IFlashNotificationProps): JSX.Element {
   const { show, active, config } = useFlashNotification({
     state: state,
     message: message,
-    width,
   }) as { show: boolean; active: () => void; config: IFlashNotificationProps }
   return (
     <Box>
       <Button onClick={active}>{state}</Button>
-      <FlashNotification
-        show={show}
-        state={config.state}
-        message={config.message}
-        width={config.width}
-      />
+      <FlashNotification show={show} state={config.state} message={config.message} />
     </Box>
   )
 }

src/documentation/pages/Organisms/FlashNotification.tsx

@@ -31,40 +31,6 @@ export const ViewFlashNotification = (): JSX.Element => {
         </li>
       </MyText>
 
-      <MyTitle>Ancho y Centrado</MyTitle>
-      <MyText>
-        Por defecto, la notificación toma un ancho de <b>max-content</b> (se ajusta al texto) y se
-        mantiene perfectamente centrada en la parte superior de la pantalla. Si deseas un control
-        más específico, puedes pasar un ancho fijo mediante la propiedad <b>width</b>.
-      </MyText>
-      <ListComponent>
-        <FlashNotificationDemo
-          state="error"
-          message="<strong>El grupo ya está completo</strong><br/>Lo sentimos, no es posible unirte porque el grupo acaba de alcanzar su límite de integrantes."
-        />
-        <FlashNotificationDemo
-          state="info"
-          message="Notificación con ancho fijo de 600px"
-          width="600px"
-        />
-      </ListComponent>
-      <Code
-        text={`// Notificación con ancho automático (max-content)
-<FlashNotification
-  state="error"
-  show={show}
-  message="Mensaje con ancho automático..."
-/>
-
-// Notificación con ancho fijo
-<FlashNotification
-  state="info"
-  show={show}
-  width="600px"
-  message="Mensaje con ancho fijo de 600px"
-/>`}
-      />
-
       <MyTitle>Soporte HTML</MyTitle>
       <MyText>
         La propiedad <b>message</b> admite etiquetas HTML básicas para dar formato al contenido,

src/organisms/Alerts/Alert.tsx

@@ -71,6 +71,7 @@ export function Alert({
       p="1rem"
       pr={canDismiss ? '1.75rem' : '1rem'}
       position="relative"
+      boxShadow={isFlash ? '0px 2px 8px 0px #5C5C5C33' : ''}
       sx={sx}
     >
       <Box

src/organisms/Alerts/FlashNotification.tsx

@@ -5,6 +5,7 @@
 import { alertStates } from './utils/alertStates'
 import { handleTime } from './utils/handleTime'
 import { Alert } from './Alert'
+import { useMediaQuery } from '@chakra-ui/react'
 
 /**
  * Componente de notificación flash que se muestra centrada en la parte superior de la pantalla.
@@ -33,9 +34,9 @@
   state,
   show,
   m,
-  width,
 }: IFlashNotificationProps): JSX.Element {
   const [shouldRenderToaster, setShouldRenderToaster] = useState(false)
+  const [isMobile] = useMediaQuery('(max-width: 425px)')
 
   useEffect(() => {
     // Si no hay un Toaster registrado globalmente en la ventana, esta instancia lo toma.
@@ -53,9 +54,16 @@
           state={state}
           canDismiss
           onClick={() => toast.dismiss(t.id)}
-          width={width}
-          maxContent={!width}
           m={m}
+          sx={{
+            w: 'initial',
+            maxWidth: 'initial',
+            ...(isMobile && {
+              // La librería agrega un margin por defecto, que no pude quitar.
+              margin: '-4px -10px',
+              borderRadius: 0,
+            }),
+          }}
         >
           {message}
         </Alert>
@@ -65,7 +73,7 @@
         id: alertStates[state].id,
       }
     )
-  }, [message, state, width, m])
+  }, [message, state, m])
 
   useEffect(() => {
     if (show) {
@@ -83,9 +91,20 @@
             style: {
               background: 'transparent',
               boxShadow: 'none',
-              maxWidth: width ?? 'max-content',
+              maxWidth: '100vw',
+              padding: 0,
+              margin: 0,
             },
           }}
+          containerStyle={{
+            left: 0,
+            right: 0,
+            ...(isMobile && {
+              top: 0,
+            }),
+            padding: 0,
+            margin: 0,
+          }}
         />
       )}
     </>

src/organisms/Alerts/types.d.ts

@@ -76,5 +76,4 @@ export interface IFlashNotificationProps {
    */
   state: TState
   show?: boolean
-  width?: string
 }

src/organisms/Alerts/utils/useFlashNotification.ts

@@ -19,7 +19,7 @@ import { handleTime } from './handleTime'
  * <FlashNotification {...config} show={show} />
  */
 
-export const useFlashNotification = ({ state, message, width }: IFlashNotificationProps): any => {
+export const useFlashNotification = ({ state, message }: IFlashNotificationProps): any => {
   // Estado que maneja si la notificación debe mostrarse.
   const [show, setShow] = useState(false)
 
@@ -49,7 +49,6 @@ export const useFlashNotification = ({ state, message, width }: IFlashNotificati
     config: {
       state,
       message,
-      width,
     },
   }
 }