frontend/src/utils/showalerts.js

// alertFunctions.js

export const showCustomAlert = (message) => {
    const alertDiv = document.createElement('div');

    // Set the data-testid
    alertDiv.setAttribute('data-testid', 'alert-div');

    alertDiv.textContent = message;

    // Apply custom styles
    alertDiv.style.position = 'fixed';
    alertDiv.style.top = '20px';
    alertDiv.style.left = '50%';
    alertDiv.style.transform = 'translateX(-50%)';
    alertDiv.style.padding = '10px 20px';
    alertDiv.style.backgroundColor = '#3478c3'; // Custom background color
    alertDiv.style.color = 'white';
    alertDiv.style.borderRadius = '5px';
    alertDiv.style.fontSize = '16px';
    alertDiv.style.zIndex = '1000';
    alertDiv.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
    alertDiv.style.display = 'inline-block';

    // Set initial opacity for fade-in effect
    alertDiv.style.opacity = '1';
    alertDiv.style.transition = 'opacity 3s ease-out';

    // Add the alert div to the body
    document.body.appendChild(alertDiv);

    // Fade out the alert after 3 seconds and remove it after 5 seconds
    setTimeout(() => {
        alertDiv.style.opacity = '0';
    }, 3000);

    setTimeout(() => {
    if (alertDiv.parentNode) {
        document.body.removeChild(alertDiv);
    }
}, 5000);
};

export const showCustomError = (message) => {
    const alertDiv = document.createElement('div');

    // Set the data-testid
    alertDiv.setAttribute('data-testid', 'alert-div');

    alertDiv.textContent = message;

    // Apply custom styles
    alertDiv.style.position = 'fixed';
    alertDiv.style.top = '20px';
    alertDiv.style.left = '50%';
    alertDiv.style.transform = 'translateX(-50%)';
    alertDiv.style.padding = '10px 20px';
    alertDiv.style.backgroundColor = '#f44336'; // Red background
    alertDiv.style.color = 'white';
    alertDiv.style.borderRadius = '5px';
    alertDiv.style.fontSize = '16px';
    alertDiv.style.zIndex = '1000';
    alertDiv.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
    alertDiv.style.display = 'inline-block';

    // Set initial opacity for fade-in effect
    alertDiv.style.opacity = '1';
    alertDiv.style.transition = 'opacity 3s ease-out';

    // Add the alert div to the body
    document.body.appendChild(alertDiv);

    // Fade out the alert after 3 seconds and remove it after 5 seconds
    setTimeout(() => {
        alertDiv.style.opacity = '0';
    }, 3000);

    setTimeout(() => {
        if (alertDiv.parentNode) {
            document.body.removeChild(alertDiv);
        }
    }, 5000);
};

export const showCustomSuccess = (message) => {
    const alertDiv = document.createElement('div');

    // Set the data-testid
    alertDiv.setAttribute('data-testid', 'alert-div');

    alertDiv.textContent = message;

    // Apply custom styles
    alertDiv.style.position = 'fixed';
    alertDiv.style.top = '20px';
    alertDiv.style.left = '50%';
    alertDiv.style.transform = 'translateX(-50%)';
    alertDiv.style.padding = '10px 20px';
    alertDiv.style.backgroundColor = '#32a11b'; // Green background
    alertDiv.style.color = 'white';
    alertDiv.style.borderRadius = '5px';
    alertDiv.style.fontSize = '16px';
    alertDiv.style.zIndex = '1000';
    alertDiv.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
    alertDiv.style.display = 'inline-block';

    // Set initial opacity for fade-in effect
    alertDiv.style.opacity = '1';
    alertDiv.style.transition = 'opacity 3s ease-out';

    // Add the alert div to the body
    document.body.appendChild(alertDiv);

    // Fade out the alert after 3 seconds and remove it after 5 seconds
    setTimeout(() => {
        alertDiv.style.opacity = '0';
    }, 3000);

    setTimeout(() => {
    if (alertDiv.parentNode) {
        document.body.removeChild(alertDiv);
    }
}, 5000);
};