feat(frontend): allow copying notification message (#1086)

* Don't close when clicked (instead the only way to close is clicking on the X button)
* Increase the close button size
* Change the cursor to indicate it can be copied

webapp/javascript/ui/Notifications.module.scss

@@ -0,0 +1,15 @@
+.notificationsComponent {
+  // Overwrites react-notification-component
+  // TODO: Ideally we would create a custom component
+  // (https://github.com/teodosii/react-notifications-component/blob/a4a452d4994930861c21768c5d54352aafc80a2c/README.md?plain=1#L340-L344)
+  // but this should do for now
+  [class~='notification__close']::after {
+    font-size: 48px;
+    cursor: pointer;
+  }
+
+  [class~='notification__item'] {
+    // Since the only way to close the notification is via the close button
+    cursor: auto !important;
+  }
+}

webapp/javascript/ui/Notifications.tsx

@@ -5,9 +5,14 @@ import ReactNotification, {
   DismissOptions,
 } from 'react-notifications-component';
 import 'react-notifications-component/dist/scss/notification.scss';
+import styles from './Notifications.module.scss';
 
 export default function Notifications() {
-  return <ReactNotification />;
+  return (
+    <div className={styles.notificationsComponent}>
+      <ReactNotification />
+    </div>
+  );
 }
 
 const defaultParams: Partial<ReactNotificationOptions> = {
@@ -61,6 +66,9 @@ export const store = {
   }: NotificationOptions) {
     dismiss = dismiss || {
       duration: 5000,
+      pauseOnHover: true,
+      click: false,
+      touch: false,
       showIcon: true,
     };