feat(web): ability to style description in notifications

web/src/features/dev/debug/notification.ts

@@ -10,17 +10,12 @@ export const debugCustomNotification = () => {
         description: 'Notification description',
         type: 'success',
         id: 'pogchamp',
-      },
-    },
-  ]);
-  debugData<NotificationProps>([
-    {
-      action: 'notify',
-      data: {
-        title: 'Success',
-        description: 'Notification description',
-        type: 'success',
-        id: 'pogchamp',
+        duration: 20000,
+        style: {
+          '.description': {
+            color: 'red',
+          },
+        },
       },
     },
   ]);

web/src/features/notifications/NotificationWrapper.tsx

@@ -2,7 +2,7 @@ import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { toast, Toaster } from 'react-hot-toast';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ReactMarkdown from 'react-markdown';
-import { Avatar, createStyles, Group, Stack, Box, Text, keyframes } from '@mantine/core';
+import { Avatar, createStyles, Group, Stack, Box, Text, keyframes, Sx } from '@mantine/core';
 import React from 'react';
 import type { NotificationProps } from '../../typings';
 
@@ -128,11 +128,11 @@ const Notifications: React.FC = () => {
         case 'warning':
           data.icon = 'circle-exclamation';
           break;
-        default:           
+        default:
           data.icon = 'circle-info';
           break;
       }
-    } 
+    }
     toast.custom(
       (t) => (
         <Box
@@ -150,8 +150,8 @@ const Notifications: React.FC = () => {
                     ? exitAnimationBottom
                     : exitAnimationRight
                 } 0.4s ease-in forwards`,
+            ...data.style,
           }}
-          style={data.style}
           className={`${classes.container}`}
         >
           <Group noWrap spacing={12}>
@@ -159,7 +159,15 @@ const Notifications: React.FC = () => {
               <>
                 {!data.iconColor ? (
                   <Avatar
-                    color={data.type === 'error' ? 'red' : data.type === 'success' ? 'teal' : data.type === 'warning' ? 'yellow' : 'blue'}
+                    color={
+                      data.type === 'error'
+                        ? 'red'
+                        : data.type === 'success'
+                        ? 'teal'
+                        : data.type === 'warning'
+                        ? 'yellow'
+                        : 'blue'
+                    }
                     radius="xl"
                     size={32}
                   >
@@ -173,7 +181,7 @@ const Notifications: React.FC = () => {
             <Stack spacing={0}>
               {data.title && <Text className={classes.title}>{data.title}</Text>}
               {data.description && (
-                <ReactMarkdown className={!data.title ? classes.descriptionOnly : classes.description}>
+                <ReactMarkdown className={`${!data.title ? classes.descriptionOnly : classes.description} description`}>
                   {data.description}
                 </ReactMarkdown>
               )}

web/src/typings/notifications.ts

@@ -1,9 +1,9 @@
-import React from 'react';
 import { ToastPosition } from 'react-hot-toast';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { Sx } from '@mantine/core';
 
 export interface NotificationProps {
-  style?: React.CSSProperties;
+  style?: Sx;
   description?: string;
   title?: string;
   duration?: number;