d1379985f3
- Consolidated all modal-related styles into Modal.module.css; ValidationModal.module.css is now deprecated - All main action/navigation buttons in NewGame and GameDetail use global .btn/.nav-buttons utility classes - Removed duplicate utility classes from component CSS files - Fixed .fullscreenToggle class naming for consistency - Cleaned up component CSS to only contain component-specific styles - Updated GameCompletionModal to use shared modal styles This ensures DRY, maintainable, and consistent styling across the app.
32 lines
1.2 KiB
JavaScript
32 lines
1.2 KiB
JavaScript
import { h } from 'preact';
|
||
import styles from './Modal.module.css';
|
||
|
||
/**
|
||
* Modal for displaying validation errors.
|
||
* @param {object} props
|
||
* @param {boolean} props.open
|
||
* @param {string} props.message
|
||
* @param {Function} props.onClose
|
||
* @returns {import('preact').VNode|null}
|
||
*/
|
||
const ValidationModal = ({ open, message, onClose }) => {
|
||
if (!open) return null;
|
||
return (
|
||
<div className={styles['modal'] + ' ' + styles['show']} id="validation-modal" role="alertdialog" aria-modal="true" aria-labelledby="validation-modal-title">
|
||
<div className={styles['modal-content']}>
|
||
<div className={styles['modal-header']}>
|
||
<span className={styles['modal-title']} id="validation-modal-title">Fehler</span>
|
||
<button className={styles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
|
||
</div>
|
||
<div className={styles['modal-body']}>
|
||
<div className={styles['modal-message']}>{message}</div>
|
||
</div>
|
||
<div className={styles['modal-footer']}>
|
||
<button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onClose} aria-label="OK">OK</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ValidationModal;
|