notifications feathericons

.gitignore

@@ -11,7 +11,6 @@
 
 # production
 /build
-/extern/material-design-icons-4.0.0
 
 # misc
 .DS_Store

extern/feathericons.com/alert-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

extern/feathericons.com/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

extern/feathericons.com/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>

extern/feathericons.com/plus-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>

extern/feathericons.com/x-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

src/components/FileUpload.tsx

@@ -3,12 +3,12 @@ import { Link } from "react-router-dom";
 import {upload as ApiUpload} from "../services/PhpApi";
 import PreviewUpload from "./PreviewUpload";
 import './InputForm.css';
+import { notificationError, notificationSuccess } from "../services/Notifications";
 
 const FileUpload: React.FC = () => 
 {
   const [currentFile, setCurrentFile] = useState<File>();
   const [progress, setProgress] = useState(0);
-  const [message, setMessage] = useState("");
 
   
   const selectFile = (pl: File) => 
@@ -28,7 +28,7 @@ const FileUpload: React.FC = () =>
     })
 	.then((response) => 
 	{
-		setMessage(response.data.message);
+		notificationSuccess(response.data.message);
 		return;
 	})
 	.catch((err) => 
@@ -37,11 +37,11 @@ const FileUpload: React.FC = () =>
 
 		if (err.response && err.response.data && err.response.data.message) 
 		{
-			setMessage(err.response.data.message);
+			notificationError(err.response.data.message);
 		} 
 		else 
 		{
-			setMessage("Could not upload the File!");
+			notificationError("Could not upload the File!");
 		}
 
 		setCurrentFile(undefined);
@@ -82,11 +82,6 @@ const FileUpload: React.FC = () =>
 	  </div>
 	)}
 
-	{message && (
-	  <div className="alert alert-secondary mt-3" role="alert">
-		{message}
-	  </div>
-	)}
 	<Link to={"/profil"}>Zurück zum Profil</Link>
   </div>
 	

src/components/Login.tsx

@@ -4,8 +4,7 @@ import './InputForm.css';
 import {getUser, loginUser} from '../services/PhpApi'
 import useSWR from 'swr';
 import { PasswordInput, Stack, TextInput } from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
+import { notificationAlert, notificationError, notificationSuccess } from '../services/Notifications';
-import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
 
 
 const Login = () => 
@@ -22,18 +21,7 @@ const Login = () =>
 
     if (error)
     { 
-        showNotification(
+      notificationError(error.message);
-            {
-                icon: <div style=
-                {
-                    {
-                        transform: "translate(0px, -2px) scale(2.2)"
-                    }
-                }>
-                <CrossCircledIcon/></div>,
-                color: 'red',
-                message: error.message
-            });
 
       return (
         <>
@@ -64,57 +52,19 @@ const Login = () =>
 
         if(!Object.values(formData).every(val => val.trim() !== ''))
         {
-            showNotification(
+            notificationAlert('Bitte alle Felder ausfüllen!');
-                {
-                    icon: <div style=
-                    {
-                        {
-                            transform: "translate(0px, -2px) scale(1.5)"
-                        }
-                    }>
-                    <ExclamationTriangleIcon/></div>,
-                    color: 'orange',
-                    message: 'Bitte alle Felder ausfüllen!'
-                });
             return;
         }
 
         const logResp = await loginUser(formData);
         if(logResp.success)
         {
-            showNotification(
+            notificationSuccess(logResp.message);
-                {
-                    icon: <div style=
-                    {
-                        {
-                            transform: "translate(0px, -2px) scale(2.2)"
-                        }
-                    }>
-                    <CheckCircledIcon/></div>,
-                    color: 'green',
-                    message: logResp.message
-                });
             mutate(); // update swr
         }
         else
         {
-            // if(logResp.message === undefined)
+            notificationError(logResp.message);
-            // {
-            //     toast.error(logResp);
-            // }
-            // else
-            showNotification(
-                {
-                    icon: <div style=
-                    {
-                        {
-                            transform: "translate(0px, -2px) scale(2.2)"
-                        }
-                    }>
-                    <CrossCircledIcon/></div>,
-                    color: 'red',
-                    message: logResp.message
-                });
         }
     }
 

src/components/Qr.tsx

@@ -7,8 +7,8 @@ import './Qr.css';
 import './InputForm.css';
 import useSWR from 'swr';
 import { NumberInput, Stack, Checkbox, MantineProvider } from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
 import {DndList, DndListProps, TDataItem} from './DndList';
+import { notificationError, notificationSuccess } from '../services/Notifications';
 
 
 export default function Qr() 
@@ -141,19 +141,12 @@ export default function Qr()
         {
             if(resQR.success)
             {
-                showNotification(
+                notificationSuccess('Daten gesichert!');
-                {
-                    message: 'Daten gesichert!'
-                });
                 mutate();
             }
             else if(!resQR.success && resQR.message)
             {
-                showNotification(
+                notificationError(resQR.message);
-                {
-                    message: resQR.message
-                    
-                });
             }
         })
         .catch((err) => console.error(err));

src/components/Register.tsx

@@ -3,8 +3,7 @@ import {Link} from 'react-router-dom'
 import './InputForm.css';
 import {registerUser} from '../services/PhpApi';
 import { PasswordInput, Stack, TextInput } from '@mantine/core';
-import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { notificationAlert, notificationError, notificationSuccess } from '../services/Notifications';
-import { showNotification } from '@mantine/notifications';
 
 const Register = () => 
 {
@@ -27,70 +26,26 @@ const Register = () =>
 
         if(!Object.values(formData).every(val => val.trim() !== ''))
         {
-            showNotification(
+            notificationAlert('Bitte alle Felder ausfüllen!');
-                {
-                    icon: <div style=
-                    {
-                        {
-                            transform: "translate(0px, -2px) scale(1.5)"
-                        }
-                    }>
-                    <ExclamationTriangleIcon/></div>,
-                    color: 'orange',
-                    message: 'Bitte alle Felder ausfüllen!'
-                });
 
             return;
         }
 
         if(formData.password !== formData.password2)
         {
-            showNotification(
+            notificationAlert('Bitte 2mal das gleiche Passwort eingeben!');
-                {
-                    icon: <div style=
-                    {
-                        {
-                            transform: "translate(0px, -2px) scale(1.5)"
-                        }
-                    }>
-                    <ExclamationTriangleIcon/></div>,
-                    color: 'orange',
-                    message: 'Bitte 2mal das gleiche Passwort eingeben!'
-                });
             return;
         }
 
         const data = await registerUser(formData);
         if(data.success)
         {
-            showNotification(
+            notificationSuccess('Erfolgreich Registriert!');
-                {
-                    icon: <div style=
-                    {
-                        {
-                            transform: "translate(0px, -2px) scale(2.2)"
-                        }
-                    }>
-                    <CheckCircledIcon/></div>,
-                    color: 'green',
-                    message: 'Erfolgreich Registriert!'
-                });
             e.currentTarget.reset();
         }
         else if(!data.success && data.message)
         {
-            showNotification(
+            notificationError(data.message);
-                {
-                    icon: <div style=
-                    {
-                        {
-                            transform: "translate(0px, -2px) scale(2.2)"
-                        }
-                    }>
-                    <CrossCircledIcon/></div>,
-                    color: 'red',
-                    message: data.message
-                });
         }
     }
 

src/icons/alert-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

src/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

src/icons/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>

src/icons/plus-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>

src/icons/x-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

src/services/Notifications.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { showNotification } from '@mantine/notifications';
+
+export function notificationSuccess(msg: string)
+{
+    const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
+    showNotification(
+        {
+            icon: <img 
+            style=
+            {{
+                backgroundColor: 'lightgreen',
+                borderRadius: '16px'
+            }} 
+            src = {WWW_ROOT+'uploads/check-circle.svg'}/> ,    
+            //color: 'green',
+            message: msg
+        });
+}
+
+export function notificationError(msg: string)
+{
+    const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
+    showNotification(
+        {
+            icon: <img 
+            style=
+            {{
+                backgroundColor: 'red',
+                borderRadius: '16px'
+            }} 
+            src = {WWW_ROOT+'uploads/x-circle.svg'}/> ,    
+            //color: 'green',
+            message: msg
+        });
+}
+
+export function notificationAlert(msg: string)
+{
+    const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
+    showNotification(
+        {
+            icon: <img 
+            style=
+            {{
+                backgroundColor: 'orange',
+                borderRadius: '16px'
+            }} 
+            src = {WWW_ROOT+'uploads/alert-circle.svg'}/> ,    
+            //color: 'green',
+            message: msg
+        });
+}