This section includes key UI control components used throughout the application for user interactions and map controls. Each component is designed for clarity, accessibility, and consistent styling.
The Cancel Button component provides a simple action button to cancel or discard pending selections. It features a red styling to indicate a destructive or abort action. Positioning is managed by the parent container, while styles are defined in CancelButton.css.
The Confirm Button component is a styled button labeled “Confirm” used to approve or finalize user selections. It appears in green to signify a positive or acceptance action. Positioning is delegated to the parent container, with styles in ConfirmButton.css.
The Control Zoom component renders the Leaflet map zoom control positioned in the bottom-right corner of the map interface. It uses custom styles defined in controlZoom.css to seamlessly integrate with the app’s theme and layout.
The Theme Toggle component offers a toggle button to switch between light and dark map themes. It displays a moon icon (🌙) when in light mode and a sun icon (☀️) in dark mode. Positioned near the zoom controls at the bottom-right of the map, it is styled through themeToggle.css for a clean, accessible interface.