Unbranded Delete Confirmation Dialog in Projects Page

Summary

Deleting a project currently triggers a browser-native confirm() dialog.
The dialog displays the title “localhost:8080 says” and does not match the Sztab application’s dark theme or visual grammar.

Screenshot

The following screenshot shows the unstyled browser dialog appearing over the Projects page:

Details

• The delete action in ProjectsPage.tsx uses the built-in JavaScript confirm() function.
• Browser-native dialogs cannot be themed, styled, or branded.
• This creates a jarring break from the rest of Sztab’s UI styling.

Expected Behavior

A fully branded, dark-mode modal consistent with the application's look should be used instead of the browser’s default confirmation dialog.

Impact

• Inconsistent user experience.
• Breaks aesthetic cohesion of the admin UI.
• No ability to customize typography, sizing, spacing, or colors.

Proposed Fix

• Implement and use a custom React modal component such as ConfirmDialog.
• Store the pending delete ID in state (deleteId).
• Render the confirmation modal instead of calling confirm().
• On approval, call the delete logic; on cancel, clear the stored ID.