From bc680109a2886e3130a9a65a5b5bd77353a32e83 Mon Sep 17 00:00:00 2001
From: Daniel Montoya <daniel.montoya@eclass.cl>
Date: Tue, 27 Feb 2024 10:43:22 -0500
Subject: [PATCH] feat(icon): se agregan los iconos de alerta con fondo

---
 src/atoms/Icons/Alerts/ErrorColor.tsx         | 40 +++++++++++++++++
 src/atoms/Icons/Alerts/InfoColor.tsx          | 44 +++++++++++++++++++
 src/atoms/Icons/Alerts/SuccessColor.tsx       | 40 +++++++++++++++++
 src/atoms/Icons/Alerts/WarningColor.tsx       | 40 +++++++++++++++++
 src/atoms/Icons/Alerts/index.tsx              |  4 ++
 .../Organisms/ModalAlertDoc/ModalAlertDoc.tsx |  2 +-
 src/organisms/Alerts/utils/alertStates.tsx    | 34 +++++++++++++-
 src/organisms/ModalAlert/ModalAlert.tsx       |  4 +-
 8 files changed, 204 insertions(+), 4 deletions(-)
 create mode 100644 src/atoms/Icons/Alerts/ErrorColor.tsx
 create mode 100644 src/atoms/Icons/Alerts/InfoColor.tsx
 create mode 100644 src/atoms/Icons/Alerts/SuccessColor.tsx
 create mode 100644 src/atoms/Icons/Alerts/WarningColor.tsx

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 (
+    <Base {...props} w="53" h="45" viewBox="0 0 53 45">
+      <svg fill="none">
+        <path
+          d="M22.142 44.1878C34.0945 44.1878 43.784 34.4984 43.784 22.5458C43.784 10.5933 34.0945 0.903809 22.142 0.903809C10.1895 0.903809 0.5 10.5933 0.5 22.5458C0.5 34.4984 10.1895 44.1878 22.142 44.1878Z"
+          fill="#F9DFDF"
+        />
+        <path
+          d="M19 24.1409C19.8284 24.1409 20.5 23.4693 20.5 22.6409C20.5 21.8124 19.8284 21.1409 19 21.1409C18.1716 21.1409 17.5 21.8124 17.5 22.6409C17.5 23.4693 18.1716 24.1409 19 24.1409Z"
+          fill="#CC0000"
+        />
+        <path
+          d="M24 24.1409C24.8284 24.1409 25.5 23.4693 25.5 22.6409C25.5 21.8124 24.8284 21.1409 24 21.1409C23.1716 21.1409 22.5 21.8124 22.5 22.6409C22.5 23.4693 23.1716 24.1409 24 24.1409Z"
+          fill="#CC0000"
+        />
+        <path
+          d="M29 24.1409C29.8284 24.1409 30.5 23.4693 30.5 22.6409C30.5 21.8124 29.8284 21.1409 29 21.1409C28.1716 21.1409 27.5 21.8124 27.5 22.6409C27.5 23.4693 28.1716 24.1409 29 24.1409Z"
+          fill="#CC0000"
+        />
+        <path
+          d="M44.178 13.9239C41.157 8.67487 35.491 5.14087 29 5.14087C19.335 5.14087 11.5 12.9759 11.5 22.6409C11.5 32.3059 19.335 40.1409 29 40.1409C35.108 40.1409 40.484 37.0119 43.615 32.2699"
+          stroke="#808080"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M36.0862 15.7271C37.0625 14.7508 38.6455 14.7508 39.6218 15.7271L43.7105 19.8158L47.7992 15.7271C48.7755 14.7508 50.3585 14.7508 51.3348 15.7271C52.3111 16.7034 52.3111 18.2863 51.3348 19.2626L47.246 23.3514L51.3348 27.4401C52.3111 28.4164 52.3111 29.9993 51.3348 30.9756C50.3585 31.952 48.7755 31.952 47.7992 30.9756L43.7105 26.8869L39.6218 30.9756C38.6455 31.952 37.0625 31.952 36.0862 30.9756C35.1099 29.9993 35.1099 28.4164 36.0862 27.4401L40.175 23.3514L36.0862 19.2626C35.1099 18.2863 35.1099 16.7034 36.0862 15.7271Z"
+          fill="#CC0000"
+        />
+      </svg>
+    </Base>
+  )
+}
+
+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 (
+    <Base {...props} w="57" h="45" viewBox="0 0 57 45">
+      <svg fill="none">
+        <path
+          d="M21.642 44.2349C33.5945 44.2349 43.284 34.5455 43.284 22.5929C43.284 10.6404 33.5945 0.950928 21.642 0.950928C9.68945 0.950928 0 10.6404 0 22.5929C0 34.5455 9.68945 44.2349 21.642 44.2349Z"
+          fill="#E0EEFA"
+        />
+        <path
+          d="M18.5 24.188C19.3284 24.188 20 23.5164 20 22.688C20 21.8596 19.3284 21.188 18.5 21.188C17.6716 21.188 17 21.8596 17 22.688C17 23.5164 17.6716 24.188 18.5 24.188Z"
+          fill="#0189FF"
+        />
+        <path
+          d="M23.5 24.188C24.3284 24.188 25 23.5164 25 22.688C25 21.8596 24.3284 21.188 23.5 21.188C22.6716 21.188 22 21.8596 22 22.688C22 23.5164 22.6716 24.188 23.5 24.188Z"
+          fill="#0189FF"
+        />
+        <path
+          d="M28.5 24.188C29.3284 24.188 30 23.5164 30 22.688C30 21.8596 29.3284 21.188 28.5 21.188C27.6716 21.188 27 21.8596 27 22.688C27 23.5164 27.6716 24.188 28.5 24.188Z"
+          fill="#0189FF"
+        />
+        <path
+          d="M43.678 13.971C40.657 8.72199 34.991 5.18799 28.5 5.18799C18.835 5.18799 11 13.023 11 22.688C11 32.353 18.835 40.188 28.5 40.188C34.608 40.188 39.984 37.059 43.115 32.317"
+          stroke="#808080"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M47 21.188H50C50.2652 21.188 50.5196 21.2933 50.7071 21.4809C50.8946 21.6684 51 21.9228 51 22.188V29.233H51.237C51.4908 29.2411 51.7316 29.3477 51.9082 29.5301C52.0849 29.7125 52.1837 29.9565 52.1837 30.2105C52.1837 30.4645 52.0849 30.7085 51.9082 30.8909C51.7316 31.0733 51.4908 31.1799 51.237 31.188H46.977C46.7232 31.1799 46.4824 31.0733 46.3058 30.8909C46.1291 30.7085 46.0303 30.4645 46.0303 30.2105C46.0303 29.9565 46.1291 29.7125 46.3058 29.5301C46.4824 29.3477 46.7232 29.2411 46.977 29.233H47V23.311C46.7348 23.311 46.4804 23.2056 46.2929 23.0181C46.1054 22.8306 46 22.5762 46 22.311V22.188C46 21.9228 46.1054 21.6684 46.2929 21.4809C46.4804 21.2933 46.7348 21.188 47 21.188Z"
+          fill="#0189FF"
+        />
+        <path
+          d="M49 19.188C50.3807 19.188 51.5 18.0687 51.5 16.688C51.5 15.3073 50.3807 14.188 49 14.188C47.6193 14.188 46.5 15.3073 46.5 16.688C46.5 18.0687 47.6193 19.188 49 19.188Z"
+          fill="#0189FF"
+        />
+      </svg>
+    </Base>
+  )
+}
+
+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 (
+    <Base {...props} w="57" h="45" viewBox="0 0 57 45">
+      <svg fill="none">
+        <path
+          d="M21.642 44.0469C33.5945 44.0469 43.284 34.3575 43.284 22.4049C43.284 10.4524 33.5945 0.762939 21.642 0.762939C9.68945 0.762939 0 10.4524 0 22.4049C0 34.3575 9.68945 44.0469 21.642 44.0469Z"
+          fill="#E9F6EC"
+        />
+        <path
+          d="M43.678 13.783C40.657 8.534 34.991 5 28.5 5C18.835 5 11 12.835 11 22.5C11 32.165 18.835 40 28.5 40C34.608 40 39.984 36.871 43.115 32.129"
+          stroke="#808080"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M56.0248 12.7762C57.0011 13.7525 57.0011 15.3354 56.0248 16.3117L44.3118 28.0247C43.8429 28.4936 43.207 28.7569 42.544 28.7569C41.881 28.7569 41.2451 28.4936 40.7762 28.0247L34.2322 21.4807C33.2559 20.5044 33.2559 18.9215 34.2322 17.9452C35.2085 16.9689 36.7915 16.9689 37.7678 17.9452L42.544 22.7214L52.4892 12.7762C53.4655 11.7999 55.0485 11.7999 56.0248 12.7762Z"
+          fill="#28A745"
+        />
+        <path
+          d="M18.5 24C19.3284 24 20 23.3284 20 22.5C20 21.6716 19.3284 21 18.5 21C17.6716 21 17 21.6716 17 22.5C17 23.3284 17.6716 24 18.5 24Z"
+          fill="#28A745"
+        />
+        <path
+          d="M23.5 24C24.3284 24 25 23.3284 25 22.5C25 21.6716 24.3284 21 23.5 21C22.6716 21 22 21.6716 22 22.5C22 23.3284 22.6716 24 23.5 24Z"
+          fill="#28A745"
+        />
+        <path
+          d="M28.5 24C29.3284 24 30 23.3284 30 22.5C30 21.6716 29.3284 21 28.5 21C27.6716 21 27 21.6716 27 22.5C27 23.3284 27.6716 24 28.5 24Z"
+          fill="#28A745"
+        />
+      </svg>
+    </Base>
+  )
+}
+
+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 (
+    <Base {...props} w="53" h="45" viewBox="0 0 53 45">
+      <svg fill="none">
+        <path
+          d="M22.142 44.1483C34.0945 44.1483 43.784 34.4588 43.784 22.5063C43.784 10.5537 34.0945 0.864258 22.142 0.864258C10.1895 0.864258 0.5 10.5537 0.5 22.5063C0.5 34.4588 10.1895 44.1483 22.142 44.1483Z"
+          fill="#FDEED6"
+        />
+        <path
+          d="M19 24.1013C19.8284 24.1013 20.5 23.4297 20.5 22.6013C20.5 21.7729 19.8284 21.1013 19 21.1013C18.1716 21.1013 17.5 21.7729 17.5 22.6013C17.5 23.4297 18.1716 24.1013 19 24.1013Z"
+          fill="#FFBC27"
+        />
+        <path
+          d="M24 24.1013C24.8284 24.1013 25.5 23.4297 25.5 22.6013C25.5 21.7729 24.8284 21.1013 24 21.1013C23.1716 21.1013 22.5 21.7729 22.5 22.6013C22.5 23.4297 23.1716 24.1013 24 24.1013Z"
+          fill="#FFBC27"
+        />
+        <path
+          d="M29 24.1013C29.8284 24.1013 30.5 23.4297 30.5 22.6013C30.5 21.7729 29.8284 21.1013 29 21.1013C28.1716 21.1013 27.5 21.7729 27.5 22.6013C27.5 23.4297 28.1716 24.1013 29 24.1013Z"
+          fill="#FFBC27"
+        />
+        <path
+          d="M44.178 13.8843C41.157 8.63532 35.491 5.10132 29 5.10132C19.335 5.10132 11.5 12.9363 11.5 22.6013C11.5 32.2663 19.335 40.1013 29 40.1013C35.108 40.1013 40.484 36.9723 43.615 32.2303"
+          stroke="#808080"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M49.282 13.9192C50.6627 13.9192 51.782 15.0385 51.782 16.4192V20.9862C51.782 22.3669 50.6627 23.4862 49.282 23.4862C47.9013 23.4862 46.782 22.3669 46.782 20.9862V16.4192C46.782 15.0385 47.9013 13.9192 49.282 13.9192ZM47.5143 25.6514C48.4906 24.6751 50.0735 24.6751 51.0498 25.6515L51.0958 25.6975C52.0721 26.6738 52.072 28.2567 51.0957 29.233C50.1194 30.2093 48.5365 30.2093 47.5602 29.2329L47.5142 29.1869C46.5379 28.2106 46.5379 26.6277 47.5143 25.6514Z"
+          fill="#FFBC27"
+        />
+      </svg>
+    </Base>
+  )
+}
+
+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: <SuccessColor />,
+    bg: vars('colors-alert-ice'),
+    id: 'success',
+  },
+  error: {
+    icon: <ErrorColor />,
+    bg: vars('colors-alert-veryLightPinkThree'),
+    id: 'error',
+  },
+  info: {
+    icon: <InfoColor />,
+    bg: vars('colors-alert-veryLightBlue'),
+    id: 'info',
+  },
+  warning: {
+    icon: <WarningColor />,
+    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"
         >
           <Box display="flex" justifyContent="center">
-            {alertStates[typeAlert].icon}
+            {alertColorStates[typeAlert].icon}
           </Box>
           <ModalHeader py="1rem">{title}</ModalHeader>
           <ModalBody py="0.5rem" px="2rem">