refactor: deduplicate modal/button styles and enforce global utility usage

- 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.
This commit is contained in:
Frank Schwenk
2025-06-06 16:42:11 +02:00
parent 209df5d9f2
commit d1379985f3
13 changed files with 51 additions and 202 deletions

View File

@@ -60,7 +60,7 @@ const NewGame = ({ onCreateGame, playerNameHistory, onCancel, onGameCreated, ini
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Neues Spiel Formular">
<div className={styles['screen-title']}>Neues Spiel</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
<button type="button" className={styles['btn']} onClick={handleClear} aria-label="Felder leeren">Felder leeren</button>
<button type="button" className="btn" onClick={handleClear} aria-label="Felder leeren">Felder leeren</button>
</div>
<div className={styles['player-inputs']}>
<div className={styles['player-input']}>
@@ -106,9 +106,9 @@ const NewGame = ({ onCreateGame, playerNameHistory, onCancel, onGameCreated, ini
</div>
</div>
{error && <div className={styles['validation-error']}>{error}</div>}
<div className={styles['nav-buttons']}>
<button type="button" className={styles['btn']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
<button type="submit" className={styles['btn']} aria-label="Spiel starten">Spiel starten</button>
<div className="nav-buttons">
<button type="button" className="btn" onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
<button type="submit" className="btn" aria-label="Spiel starten">Spiel starten</button>
</div>
</form>
);