Browse Source

Change toast styling and duration

master
jeffvli 3 years ago
parent
commit
2cccb41daa
  1. 8
      src/components/shared/ContextMenu.tsx
  2. 11
      src/components/shared/toast.ts
  3. 4
      src/styles/custom-theme.less

8
src/components/shared/ContextMenu.tsx

@ -168,12 +168,10 @@ export const GlobalContextMenu = () => {
const playlistSuccessToast = (songCount: number, playlistId: string) => { const playlistSuccessToast = (songCount: number, playlistId: string) => {
notifyToast( notifyToast(
'success', '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 <StyledButton
appearance="link" appearance="link"
onClick={() => { onClick={() => {

11
src/components/shared/toast.ts

@ -1,8 +1,13 @@
import { Notification } from 'rsuite'; 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]({ Notification[type]({
title: `${type.charAt(0).toUpperCase()}${type.slice(1)}`, title: message,
description: message, description,
duration: type === 'info' ? 1500 : type === 'success' ? 2500 : 3000,
}); });
}; };

4
src/styles/custom-theme.less

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

Loading…
Cancel
Save