diff --git a/src/atoms/Icons/Alerts/ErrorColor.tsx b/src/atoms/Icons/Alerts/ErrorColor.tsx
new file mode 100644
index 00000000..e78bf61e
--- /dev/null
+++ b/src/atoms/Icons/Alerts/ErrorColor.tsx
@@ -0,0 +1,40 @@
+import { Base, BaseProps } from '../Base'
+
+export function ErrorColor(props: BaseProps): JSX.Element {
+ return (
+
+
+
+ )
+}
+
+ErrorColor.displayName = 'ErrorColor'
diff --git a/src/atoms/Icons/Alerts/InfoColor.tsx b/src/atoms/Icons/Alerts/InfoColor.tsx
new file mode 100644
index 00000000..2e2ac2f9
--- /dev/null
+++ b/src/atoms/Icons/Alerts/InfoColor.tsx
@@ -0,0 +1,44 @@
+import { Base, BaseProps } from '../Base'
+
+export function InfoColor(props: BaseProps): JSX.Element {
+ return (
+
+
+
+ )
+}
+
+InfoColor.displayName = 'InfoColor'
diff --git a/src/atoms/Icons/Alerts/SuccessColor.tsx b/src/atoms/Icons/Alerts/SuccessColor.tsx
new file mode 100644
index 00000000..3b37cb41
--- /dev/null
+++ b/src/atoms/Icons/Alerts/SuccessColor.tsx
@@ -0,0 +1,40 @@
+import { Base, BaseProps } from '../Base'
+
+export function SuccessColor(props: BaseProps): JSX.Element {
+ return (
+
+
+
+ )
+}
+
+SuccessColor.displayName = 'SuccessColor'
diff --git a/src/atoms/Icons/Alerts/WarningColor.tsx b/src/atoms/Icons/Alerts/WarningColor.tsx
new file mode 100644
index 00000000..c561b094
--- /dev/null
+++ b/src/atoms/Icons/Alerts/WarningColor.tsx
@@ -0,0 +1,40 @@
+import { Base, BaseProps } from '../Base'
+
+export function WarningColor(props: BaseProps): JSX.Element {
+ return (
+
+
+
+ )
+}
+
+WarningColor.displayName = 'WarningColor'
diff --git a/src/atoms/Icons/Alerts/index.tsx b/src/atoms/Icons/Alerts/index.tsx
index a298928c..9699cba7 100644
--- a/src/atoms/Icons/Alerts/index.tsx
+++ b/src/atoms/Icons/Alerts/index.tsx
@@ -2,3 +2,7 @@ export * from './ErrorWhite'
export * from './InfoWhite'
export * from './SuccessWhite'
export * from './WarningWhite'
+export * from './ErrorColor'
+export * from './InfoColor'
+export * from './SuccessColor'
+export * from './WarningColor'
diff --git a/src/documentation/components/Organisms/ModalAlertDoc/ModalAlertDoc.tsx b/src/documentation/components/Organisms/ModalAlertDoc/ModalAlertDoc.tsx
index 50e2ff8c..a8fc620d 100644
--- a/src/documentation/components/Organisms/ModalAlertDoc/ModalAlertDoc.tsx
+++ b/src/documentation/components/Organisms/ModalAlertDoc/ModalAlertDoc.tsx
@@ -7,7 +7,7 @@ export function ModalAlertDoc(): JSX.Element {
const [isOpen, setIsOpen] = useState(false)
const optionsModal: ModalAlertProps = {
showModal: isOpen,
- typeAlert: 'info',
+ typeAlert: 'success',
title: '¿Seguro que deseas borrar esta pregunta?',
description: 'Por favor escoge otro horario.',
optionsButton: [
diff --git a/src/organisms/Alerts/utils/alertStates.tsx b/src/organisms/Alerts/utils/alertStates.tsx
index f3ec7c26..111d65b1 100644
--- a/src/organisms/Alerts/utils/alertStates.tsx
+++ b/src/organisms/Alerts/utils/alertStates.tsx
@@ -1,4 +1,13 @@
-import { ErrorWhite, InfoWhite, SuccessWhite, WarningWhite } from '@/atoms/Icons'
+import {
+ ErrorWhite,
+ InfoWhite,
+ SuccessWhite,
+ WarningWhite,
+ ErrorColor,
+ InfoColor,
+ SuccessColor,
+ WarningColor,
+} from '@/atoms/Icons'
import { vars } from '@/theme'
export const alertStates = {
@@ -23,3 +32,26 @@ export const alertStates = {
id: 'warning',
},
}
+
+export const alertColorStates = {
+ success: {
+ icon: ,
+ bg: vars('colors-alert-ice'),
+ id: 'success',
+ },
+ error: {
+ icon: ,
+ bg: vars('colors-alert-veryLightPinkThree'),
+ id: 'error',
+ },
+ info: {
+ icon: ,
+ bg: vars('colors-alert-veryLightBlue'),
+ id: 'info',
+ },
+ warning: {
+ icon: ,
+ bg: vars('colors-alert-pale'),
+ id: 'warning',
+ },
+}
diff --git a/src/organisms/ModalAlert/ModalAlert.tsx b/src/organisms/ModalAlert/ModalAlert.tsx
index 1b3f21f8..63f396f0 100644
--- a/src/organisms/ModalAlert/ModalAlert.tsx
+++ b/src/organisms/ModalAlert/ModalAlert.tsx
@@ -9,7 +9,7 @@ import {
Box,
useMediaQuery,
} from '@chakra-ui/react'
-import { alertStates } from '../Alerts/utils/alertStates'
+import { alertColorStates } from '../Alerts/utils/alertStates'
import { ModalAlertProps } from './types'
import { BtnLink } from '@/molecules'
@@ -58,7 +58,7 @@ export function ModalAlert({
borderBottom="1px solid #E6E6E6"
>
- {alertStates[typeAlert].icon}
+ {alertColorStates[typeAlert].icon}
{title}