Fix close button of the notification does not work and modernize notification pop up

src/components/Notification/Notifications.css

@@ -30,7 +30,7 @@
 }
 
 .top-left {
-    top: 12px;
+    top: 100px;
     left: 12px;
     transition: transform .3s ease-in;
     animation: notification-in-down .3s;

src/components/Notification/Popup.css

@@ -0,0 +1,160 @@
+.modal_wrapper {
+  z-index: 2999;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.338);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.modal_container {
+  position: fixed;
+  z-index: 3000;
+  transition: .3s ease;
+  display: flex;
+  justify-content: space-between;
+  height: max-content;
+  border-radius:12px;
+  box-shadow: 0 0 10px rgb(85, 84, 84);
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  width: 35vw;
+  height: auto;
+  backdrop-filter: blur(5px);
+
+}
+
+.modal_close_icon {
+  color: white;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.5rem
+}
+
+.modal_status_icon{
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.5rem
+}
+
+.modal_bar {
+  align-self: flex-end;
+  border-radius: 10px 10px 0 0 ;
+}
+
+.modal_content {
+  display: flex;
+  width: inherit;
+  border-radius: 0 0 10px 10px;
+  padding: 1rem 0.75rem;
+  background-color: white;
+}
+
+.modal_message {
+  font-size: 20px;
+  line-height: 2em;
+  padding-left: 0.5rem;
+}
+
+.modal_bar_content {
+  width: 35vw;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.modal_close_button {
+  background: transparent;
+  border: none;
+  align-self: flex-end;
+}
+
+.top-right {
+  top: 100px;
+  right: 12px;
+  transition: transform .3s ease-in-out;
+  animation: notification-in-down .3s;
+}
+
+.bottom-right {
+  bottom: 12px;
+  right: 12px;
+  transition: transform .3s ease-in-out;
+  animation: notification-in-up .3s;
+}
+
+.top-left {
+  top: 100px;
+  left: 12px;
+  transition: transform .3s ease-in;
+  animation: notification-in-down .3s;
+}
+
+.bottom-left {
+  bottom: 12px;
+  left: 12px;
+  transition: transform .3s ease-in;
+  animation: notification-in-up .3s;
+}
+
+.center {
+  left: 35%;
+  top: 35%;
+  transition: transform .3s ease-in;
+  animation: notification-in-up .3s;
+}
+
+.danger {
+  background-color: rgb(201, 25, 11);
+}
+
+.danger_content {
+  color: rgb(201, 25, 11)
+}
+
+.warning {
+  background-color: rgba(255, 98, 0);
+}
+
+.warning_content {
+  color: rgb(237, 114, 37);
+}
+
+
+.success {
+  background-color: rgba(27, 235, 12);
+}
+
+.success_content {
+  color: rgb(47, 193, 37);
+}
+
+@media (min-width: 768px) {
+  .top-right {
+      top: 115px;
+  }
+}
+@keyframes notification-in-down {
+  from {
+      transform: translateY(-100%);
+      opacity: 0;
+  }
+
+  to {
+      transform: translateY(0);
+      opacity: 0.9;
+  }
+}
+
+@keyframes notification-in-up {
+  from {
+      transform: translateY(-100%);
+  }
+
+  to {
+      transform: translateY(0);
+  }
+}

src/components/Notification/Popup.jsx

@@ -0,0 +1,47 @@
+import React, {useState} from "react";
+import PropTypes from 'prop-types';
+import "./Popup.css";
+import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesIcon } from "@patternfly/react-icons";
+
+const Popup = ({position, variant, title, closeable, timeout}) => {
+    const [alertVisible, setAlertVisible] = useState(true)
+
+    const handleClose = () =>  setAlertVisible(false)
+
+if (closeable) setTimeout(handleClose, timeout ?? 7000)
+
+return (
+    // onClick event handler on the main div makes it possible to close the notification if a user clicks anywhere on the screen
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div className={alertVisible ? 'modal_wrapper' : ''} onClick={() => handleClose()}>
+    <div className={`modal_container ${position}`}>
+        {alertVisible && ( 
+        <div className='modal'>
+            <div className={`modal_bar ${variant}`}>
+                <div className="modal_bar_content">
+                <button className='modal_close_button' type='button' onClick={() => handleClose()}>
+                <TimesIcon className="modal_close_icon" />
+                </button>
+                </div>
+            </div>
+            <div className={`modal_content ${variant}_content`}>
+            {variant === 'danger' && (<ExclamationCircleIcon className={`modal_status_icon ${variant}_content`}/>)}
+            {variant === 'warning' && (<ExclamationTriangleIcon className={`modal_status_icon ${variant}_content`}/>)}
+            {variant === 'success' && (<CheckCircleIcon className={`modal_status_icon ${variant}_content`}/>)}
+            <p className="modal_message">{title}</p>
+            </div>
+        </div>
+        )}
+    </div>
+    </div>
+    )}
+
+    Popup.propTypes = {
+        position: PropTypes.string.isRequired,
+        variant: PropTypes.string,
+        title: PropTypes.string,
+        timeout: PropTypes.bool,
+    };
+
+
+export default Popup;

src/components/Notification/index.jsx

@@ -1,21 +1,28 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import './Notifications.css';
 
-export const Notification = ({ position, variant, message, onClose, closeable, title, timeout }) => (
+export const Notification = ({ position, variant, message, onClose, closeable, title, timeout }) => {
+  const [alertVisible, setAlertVisible] = useState(true)
+
+  const toggleAlert = () => setAlertVisible(false)
+
+  return (
   <div className={`notification ${position}`}>
+    {alertVisible && (
     <Alert
       variant={variant}
       title={title || null}
-      actionClose={closeable && <AlertActionCloseButton onClose={onClose} />}
-      timeout={timeout || 4000}
+      actionClose={closeable && <AlertActionCloseButton onClose={() => toggleAlert()} />}
+      timeout={timeout}
       onTimeout={onClose}
     >
       {message}
     </Alert>
+    )}
   </div>
-);
+)};
 
 Notification.propTypes = {
   position: PropTypes.string.isRequired,

src/components/Plugin/components/PluginBody/PluginBody.jsx

@@ -21,10 +21,11 @@ import { marked } from 'marked';
 import { sanitize } from 'dompurify';
 
 import './PluginBody.css';
-import ErrorNotification from '../../../Notification';
+// import ErrorNotification from '../../../Notification';
 import HttpApiCallError from '../../../../errors/HttpApiCallError';
 import { GithubAPIRepoError, GithubAPIReadmeError } from '../../../../errors/GithubError';
 import { removeEmail } from '../../../../utils/common';
+import Popup from '../../../Notification/Popup';
 
 const PluginBody = ({ pluginData }) => {
   const [activeTab, setActiveTab] = useState(1);
@@ -117,7 +118,8 @@ const PluginBody = ({ pluginData }) => {
   return (
     <>
       { errors.map((message, index) => (
-        <ErrorNotification
+        <Popup
+          key='index'
           title={message}
           position="top-right"
           variant="danger"