Refact styles

src/common/components/AlertMessage.jsx

@@ -11,11 +11,11 @@ function AlertMessage({
 }) {
   const { fontColor } = useStyle();
   const alertColors = {
-    soft: '#FFF4DC',
-    warning: '#FFB718',
-    success: '#25BF6C',
-    error: '#dc3545',
-    info: '#00A0E9',
+    soft: { background: '#FFF4DC' },
+    warning: { background: '#ffefcc', borderColor: '#FFB718' },
+    success: { background: '#e0ffe8', borderColor: '#00bb2d' },
+    error: { background: '#fee8e8', borderColor: '#EB5757' },
+    info: { background: '#37c0ff', borderColor: '#DADADA' },
   };
 
   const [visible, setVisible] = useState(true);
@@ -34,19 +34,19 @@ function AlertMessage({
   return (message || children) && (
     <Box
       display="flex"
-      style={{ ...style, position: 'fixed', top: '20px', left: '50%', transform: 'translateX(-50%)', zIndex: 999, width: '90%', textTransform: 'uppercase' }}
+      style={{ ...style, position: 'fixed', top: '100px', left: '50%', transform: 'translateX(-50%)', zIndex: 999, width: '90%', textTransform: 'uppercase', borderRadius: '10px', maxWidth: '1200px' }}
       flexDirection="row"
-      backgroundColor={full ? alertColors[type] : 'transparent'}
+      backgroundColor={full ? alertColors[type].background : 'transparent'}
       border="2px solid"
-      borderColor={alertColors[type]}
+      borderColor={alertColors[type].borderColor}
       alignItems="center"
       padding="16px"
       borderRadius="16px"
       gridGap="16px"
       {...rest}
     >
       {!withoutIcon && (
-        <Icon icon={type} secondColor={rest.secondColor} color={iconColor || (full ? '#000' : '')} props={{ full: true }} style={{ minWidth: '18px' }} width="18px" height="18px" />
+        <Icon icon={type} secondColor={rest.secondColor} color={iconColor || (full ? alertColors[type]?.background : '')} props={{ full: true }} style={{ minWidth: '18px' }} width="18px" height="18px" />
       )}
       {children && children}
       {!children && (

src/common/hooks/useCustomToast.jsx

@@ -21,8 +21,8 @@ const useCustomToast = ({
     title = 'Already have an account?',
     status = 'success',
     position = 'top',
-    width = '80%',
     maxWidth = '1200px',
+    width = '90%',
     duration = 16000,
     description,
     actions = null,
@@ -36,9 +36,9 @@ const useCustomToast = ({
       render: () => (
         <Box
           color={toastColors.color}
-          py={3}
+          py={8}
           pl={5}
-          pr={8}
+          pr={6}
           bg={toastColors.background}
           borderColor={toastColors.borderColor}
           borderWidth="2px"
@@ -47,9 +47,10 @@ const useCustomToast = ({
           width={width}
           maxWidth={maxWidth}
           margin="auto"
-          top="20px"
+          top="5vh"
+          mt="12px"
         >
-          <Flex gridGap="10px" mb="5px">
+          <Flex gridGap="10px" mt="2px">
             <Icon icon={status} width="15px" height="15px" color="currentColor" mt="-4px" />
             <Box fontSize="14px" fontWeight="bold" lineHeight={6} mt="-8px" letterSpacing="1px">
               {title}
@@ -77,7 +78,7 @@ const useCustomToast = ({
             {description}
           </Box>
           {actions?.length > 0 && (
-            <Flex gap="16px" mb="-10px" mt="1px">
+            <Flex gap="16px" mb="-35px">
               {actions.map((action) => (
                 <Button
                   as="a"