Update toast styles (#2020)

apps/web/src/assets/icons/index.ts

@@ -1,5 +1,7 @@
 export { default as AddContactIcon } from "./add-contact-s.svg";
 export { default as AlertCircleIcon } from "./alert-circle.svg";
+export { default as AlertTriangleIcon } from "./alert-triangle.svg";
+export { default as AlertOctagonIcon } from "./alert-octagon.svg";
 export { default as AlertIcon } from "./alert.svg";
 export { default as ArrowDownLeftIcon } from "./arrow-down-left.svg";
 export { default as ArrowLeftCircleIcon } from "./arrow-left-circle.svg";

apps/web/src/components/CustomToast/CustomToast.tsx

@@ -0,0 +1,77 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Flex,
+  Icon,
+  IconButton,
+  type UseToastOptions,
+} from "@chakra-ui/react";
+import { type ReactNode } from "react";
+
+import {
+  AlertCircleIcon,
+  AlertOctagonIcon,
+  AlertTriangleIcon,
+  CheckCircleIcon,
+  CloseIcon,
+} from "../../assets/icons";
+import { useColor } from "../../styles/useColor";
+
+type CustomToastProps = {
+  onClose: () => void;
+} & UseToastOptions;
+
+export const CustomToast = (props: CustomToastProps): ReactNode => {
+  const color = useColor();
+
+  const { status, id, title, isClosable, onClose, description } = props;
+
+  const ids = id
+    ? {
+        root: `toast-${id}`,
+        title: `toast-${id}-title`,
+        description: `toast-${id}-description`,
+      }
+    : undefined;
+
+  const AlertIcon = () => {
+    switch (props.status) {
+      case "info":
+        return <AlertCircleIcon />;
+      case "success":
+        return <CheckCircleIcon />;
+      case "error":
+        return <AlertTriangleIcon />;
+      case "warning":
+        return <AlertOctagonIcon />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Alert addRole={false} id={ids?.root} status={status}>
+      <Icon as={AlertIcon} />
+      <Flex width="full" marginLeft="6px">
+        {title && <AlertTitle id={ids?.title}>{title}</AlertTitle>}
+        {description && (
+          <AlertDescription marginRight="12px" id={ids?.description}>
+            {description}
+          </AlertDescription>
+        )}
+      </Flex>
+      {isClosable && (
+        <IconButton
+          boxSize="24px"
+          marginLeft="auto"
+          color={color("400")}
+          aria-label="Close toast"
+          icon={<CloseIcon />}
+          onClick={onClose}
+          variant="empty"
+        />
+      )}
+    </Alert>
+  );
+};

apps/web/src/components/CustomToast/index.ts

@@ -0,0 +1 @@
+export * from "./CustomToast";

apps/web/src/providers/UmamiTheme.tsx

@@ -3,6 +3,7 @@ import { Global, css } from "@emotion/react";
 import { type PropsWithChildren } from "react";
 import "focus-visible/dist/focus-visible";
 
+import { CustomToast } from "../components/CustomToast/CustomToast";
 import theme from "../styles/theme";
 
 const GlobalStyles = css`
@@ -17,7 +18,14 @@ const GlobalStyles = css`
 `;
 
 export const UmamiTheme = ({ children }: PropsWithChildren) => (
-  <ChakraProvider theme={theme}>
+  <ChakraProvider
+    theme={theme}
+    toastOptions={{
+      defaultOptions: {
+        render: CustomToast,
+      },
+    }}
+  >
     <Global styles={GlobalStyles} />
     <ColorModeScript initialColorMode={theme.config.initialColorMode} />
     {children}

apps/web/src/styles/theme.ts

@@ -291,6 +291,36 @@ const theme = extendTheme({
         },
       }),
     },
+    Alert: {
+      baseStyle: (props: StyleFunctionProps) => {
+        let accentColor;
+
+        switch (props.status) {
+          case "success":
+            accentColor = light.green;
+            break;
+          case "warning":
+          case "error":
+            accentColor = light.redDark;
+            break;
+          default:
+            accentColor = light.grey[400];
+        }
+
+        return {
+          container: {
+            borderRadius: "6px",
+            boxShadow: "0px 0px 8px 0px rgba(45, 55, 72, 0.25)",
+            borderLeft: `4px solid ${accentColor}`,
+            color: accentColor,
+            background: light.grey["white"],
+          },
+          description: {
+            color: light.grey[900],
+          },
+        };
+      },
+    },
     Link: {
       baseStyle: {
         color: "gray.600",