toastify

src/components/ToastContainer/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ToastContainerProps } from 'react-toastify';
+
+import { StyledContainer } from './styles';
+
+const ToastContainer: React.FC<ToastContainerProps> = props => {
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <StyledContainer {...props} />;
+};
+
+export default ToastContainer;

src/components/ToastContainer/styles.ts

@@ -0,0 +1,21 @@
+import { ToastContainer } from 'react-toastify';
+import styled from 'styled-components';
+import 'react-toastify/dist/ReactToastify.css';
+
+// eslint-disable-next-line import/prefer-default-export
+export const StyledContainer = styled(ToastContainer)`
+  .Toastify__toast-container {
+  }
+
+  .Toastify__toast {
+    background-color: var(--color-neutral-6);
+  }
+
+  .Toastify__toast-body {
+    white-space: pre-line;
+  }
+
+  .Toastify__progress-bar {
+    background-color: var(--color-primary-3);
+  }
+`;

src/components/index.ts

@@ -1 +1,4 @@
-export { };
+import ToastContainer from './ToastContainer';
+
+// eslint-disable-next-line import/prefer-default-export
+export { ToastContainer };