NowChess-Frontend/src/app/components/challenge-notification/challenge-notification.component.html

<div class="challenge-notification" [class.error]="!!errorMessage">
    <div class="notification-header">
        <div class="notification-title">
            <span class="badge">CHALLENGE</span>
            <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
        </div>
        <button type="button" class="close-btn" (click)="onClose()"
            [disabled]="acceptingChallenge || decliningChallenge">
            ×
        </button>
    </div>

    <div class="notification-content">
        <div class="time-control">
            <span class="label">Time Control:</span>
            <span class="value">{{ getTimeControlDisplay() }}</span>
        </div>

        <div class="expiration">
            <span class="label">{{ getExpirationInfo() }}</span>
        </div>

        <div *ngIf="errorMessage" class="error-message">
            {{ errorMessage }}
        </div>

        <div class="notification-actions">
            <button type="button" class="btn btn-decline" (click)="onDecline()"
                [disabled]="acceptingChallenge || decliningChallenge">
                {{ decliningChallenge ? 'Declining...' : 'Decline' }}
            </button>
            <button type="button" class="btn btn-accept" (click)="onAccept()"
                [disabled]="acceptingChallenge || decliningChallenge">
                {{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
            </button>
        </div>
    </div>
</div>