Change toast styling and duration

src/components/shared/ContextMenu.tsx

@@ -168,12 +168,10 @@ export const GlobalContextMenu = () => {
   const playlistSuccessToast = (songCount: number, playlistId: string) => {
     notifyToast(
       'success',
+      `Added ${songCount} song(s) to playlist ${
+        playlists.find((pl: any) => pl.id === playlistId)?.name
+      }`,
       <>
-        <p>
-          Added {songCount} song(s) to playlist &quot;
-          {playlists.find((pl: any) => pl.id === playlistId)?.name}
-          &quot;
-        </p>
         <StyledButton
           appearance="link"
           onClick={() => {

src/components/shared/toast.ts

@@ -1,8 +1,13 @@
 import { Notification } from 'rsuite';
 
-export const notifyToast = (type: 'info' | 'success' | 'warning' | 'error', message: any) => {
+export const notifyToast = (
+  type: 'info' | 'success' | 'warning' | 'error',
+  message: any,
+  description?: any
+) => {
   Notification[type]({
-    title: `${type.charAt(0).toUpperCase()}${type.slice(1)}`,
+    title: message,
-    description: message,
+    description,
+    duration: type === 'info' ? 1500 : type === 'success' ? 2500 : 3000,
   });
 };

src/styles/custom-theme.less

@@ -30,9 +30,11 @@
 
 // Notification
 @notify-padding: 10px;
-@notify-title-icon-size: 15px;
+@notify-title-icon-size: 20px;
 @notify-close-btn-font-size: 0px;
 @notify-close-btn-margin: 0px;
+@notify-title-description-gap: 0px;
+@notify-max-width: 300px;
 
 // Table
 @table-body-background: undefined;