feat: create the apprise category in user settings

Containers/UserSettings/AppriseAlertSettings/AppriseAlertSettings.js

@@ -0,0 +1,78 @@
+//Lib
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import classes from '../UserSettings.module.css';
+import { useState } from 'react';
+import { SpinnerCircularFixed } from 'spinners-react';
+
+//Components
+import Error from '../../../Components/UI/Error/Error';
+import Switch from '../../../Components/UI/Switch/Switch';
+
+export default function AppriseAlertSettings() {
+    return (
+        <>
+            {/* APPRISE ALERT */}
+            <div className={classes.containerSetting}>
+                <div className={classes.settingCategory}>
+                    <h2>Apprise alert</h2>
+                </div>
+                <div className={classes.setting}>
+                    <div className={classes.bwFormWrapper}>
+                        <Switch
+                            // checked={checked}
+                            // disabled={disabled}
+                            switchName='Notify my Apprise services'
+                            switchDescription='You will receive an alert on all your services every 24H if you have a down status.'
+                            // onChange={(e) =>
+                            //     onChangeSwitchHandler({ emailAlert: e })
+                            // }
+                        />
+                        <form
+                            className={
+                                classes.bwForm + ' ' + classes.currentSetting
+                            }
+                        >
+                            <div
+                                style={{
+                                    fontWeight: '500',
+                                    color: '#494b7a',
+                                    margin: '40px 0px 10px 0px',
+                                }}
+                            >
+                                Apprise URLs
+                            </div>
+                            <textarea></textarea>
+                        </form>
+                        <div
+                            style={{
+                                color: '#6c737f',
+                                fontSize: '0.875rem',
+                                marginBottom: '20px',
+                            }}
+                        >
+                            Use{' '}
+                            <a
+                                style={{
+                                    color: '#6d4aff',
+                                    textDecoration: 'none',
+                                }}
+                                href='https://github.com/caronc/apprise#supported-notifications'
+                            >
+                                Apprise URLs
+                            </a>{' '}
+                            to send a notification to any service.
+                        </div>
+                        <button
+                            className='defaultButton'
+                            //onClick={onSendTestMailHandler}
+                        >
+                            Send a test notification
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

Containers/UserSettings/UserSettings.js

@@ -7,6 +7,7 @@ import EmailSettings from './EmailSettings/EmailSettings';
 import PasswordSettings from './PasswordSettings/PasswordSettings';
 import UsernameSettings from './UsernameSettings/UsernameSettings';
 import EmailAlertSettings from './EmailAlertSettings/EmailAlertSettings';
+import AppriseAlertSettings from './AppriseAlertSettings/AppriseAlertSettings';
 
 export default function UserSettings(props) {
     return (
@@ -23,6 +24,7 @@ export default function UserSettings(props) {
             <EmailSettings email={props.data.user.email} />
             <UsernameSettings username={props.data.user.name} />
             <EmailAlertSettings />
+            <AppriseAlertSettings />
         </div>
     );
 }

Containers/UserSettings/UserSettings.module.css

@@ -59,6 +59,14 @@
     width: 100%;
     height: auto;
     color: #494b7a;
+    font-family: var(
+        --pure-material-font,
+        'Roboto',
+        'Segoe UI',
+        BlinkMacSystemFont,
+        system-ui,
+        -apple-system
+    );
 }
 
 .bwFormWrapper p {