Updated notifications

frontend/components/context/Notifications/Notification.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
-import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
+import { faX } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classnames from "classnames";
 
-import { Notification as NotificationType } from "./NotificationProvider";
+import { Notification as NotificationType } from './NotificationProvider';
 
 interface NotificationProps {
   notification: Required<NotificationType>;
@@ -12,7 +11,7 @@ interface NotificationProps {
 
 const Notification = ({
   notification,
-  clearNotification,
+  clearNotification
 }: NotificationProps) => {
   const timeout = useRef<number>();
 
@@ -37,22 +36,29 @@ const Notification = ({
 
   return (
     <div
-      className={classnames(
+      className="relative w-full flex items-center justify-between px-4 py-6 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
-        "w-full flex items-center justify-between px-4 py-3 rounded pointer-events-auto",
-        {
-          "bg-green-600": notification.type === "success",
-          "bg-red-500": notification.type === "error",
-          "bg-blue-500": notification.type === "info",
-        }
-      )}
       role="alert"
     >
-      <p className="text-white text-sm font-bold">{notification.text}</p>
+      {notification.type === 'error' && (
+        <div className="absolute w-full h-1 bg-red top-0 left-0 rounded-t-md"></div>
+      )}
+      {notification.type === 'success' && (
+        <div className="absolute w-full h-1 bg-green top-0 left-0 rounded-t-md"></div>
+      )}
+      {notification.type === 'info' && (
+        <div className="absolute w-full h-1 bg-yellow top-0 left-0 rounded-t-md"></div>
+      )}
+      <p className="text-bunker-200 text-sm font-semibold mt-0.5">
+        {notification.text}
+      </p>
       <button
-        className="bg-white/5 rounded-lg p-3"
+        className="rounded-lg"
         onClick={() => clearNotification(notification.text)}
       >
-        <FontAwesomeIcon className="text-white" icon={faXmarkCircle} />
+        <FontAwesomeIcon
+          className="text-white w-4 h-3 hover:text-red"
+          icon={faX}
+        />
       </button>
     </div>
   );

frontend/components/context/Notifications/NotificationProvider.tsx

@@ -1,8 +1,8 @@
-import { createContext, ReactNode, useContext, useState } from "react";
+import { createContext, ReactNode, useContext, useState } from 'react';
 
-import Notifications from "./Notifications";
+import Notifications from './Notifications';
 
-type NotificationType = "success" | "error" | "info";
+type NotificationType = 'success' | 'error' | 'info';
 
 export type Notification = {
   text: string;
@@ -15,7 +15,7 @@ type NotificationContextState = {
 };
 
 const NotificationContext = createContext<NotificationContextState>({
-  createNotification: () => console.log("createNotification not set!"),
+  createNotification: () => console.log('createNotification not set!')
 });
 
 export const useNotificationContext = () => useContext(NotificationContext);
@@ -37,8 +37,8 @@ const NotificationProvider = ({ children }: NotificationProviderProps) => {
 
   const createNotification = ({
     text,
-    type = "success",
+    type = 'success',
-    timeoutMs = 2000,
+    timeoutMs = 5000
   }: Notification) => {
     const doesNotifExist = notifications.some((notif) => notif.text === text);
 
@@ -54,7 +54,7 @@ const NotificationProvider = ({ children }: NotificationProviderProps) => {
   return (
     <NotificationContext.Provider
       value={{
-        createNotification,
+        createNotification
       }}
     >
       <Notifications

frontend/components/context/Notifications/Notifications.tsx

@@ -1,5 +1,5 @@
-import Notification from "./Notification";
+import Notification from './Notification';
-import { Notification as NotificationType } from "./NotificationProvider";
+import { Notification as NotificationType } from './NotificationProvider';
 
 interface NoticationsProps {
   notifications: Required<NotificationType>[];
@@ -8,14 +8,14 @@ interface NoticationsProps {
 
 const Notifications = ({
   notifications,
-  clearNotification,
+  clearNotification
 }: NoticationsProps) => {
   if (!notifications.length) {
     return null;
   }
 
   return (
-    <div className="hidden fixed z-50 md:flex md:flex-col-reverse bottom-1 gap-y-2 w-96 h-full right-1 pointer-events-none">
+    <div className="hidden fixed z-50 md:flex md:flex-col-reverse bottom-1 gap-y-2 w-96 h-full right-2 bottom-2 pointer-events-none">
       {notifications.map((notif) => (
         <Notification
           key={notif.text}