Skip to content

feat: Replace browser alert() popups with Toast Notification System#87

Merged
Shriii19 merged 1 commit into
Shriii19:masterfrom
Ananya-CM:feat/toast-notification-system
May 23, 2026
Merged

feat: Replace browser alert() popups with Toast Notification System#87
Shriii19 merged 1 commit into
Shriii19:masterfrom
Ananya-CM:feat/toast-notification-system

Conversation

@Ananya-CM
Copy link
Copy Markdown
Contributor

Summary

Replaced all native browser alert() popups on the
login page with a polished Toast notification system
that matches the app's design language.

Changes Made

New Files Created

  1. frontend/app/context/ToastContext.tsx

    • Global ToastProvider with React context
    • showToast(message, type) function
    • Supports: success | error | info types
    • Auto-dismisses after 4 seconds
    • Manual close button (×)
  2. frontend/app/components/Toast.tsx

    • Re-exports useToast and ToastProvider
    • Convenience import for components

Modified Files

  1. frontend/app/layout.tsx

    • Wrapped app with
    • Available globally across all pages
  2. frontend/app/login/page.tsx

    • Replaced 3 alert() calls with showToast()
    • All errors now show as red toast notifications
    • Removed duplicate supabase check
  3. frontend/app/globals.css

    • Added slide-in animation keyframes
    • animate-slide-in utility class

Before

  • Native browser alert() blocked the entire page
  • Unstyled OS-level popup with no branding
  • User could not interact until dismissed

After

  • ✅ Styled red toast slides in from top-right
  • ✅ Page remains fully interactive
  • ✅ Auto-dismisses after 4 seconds
  • ✅ Manual close button available
  • ✅ Matches app's color scheme

Screenshots

image

Files Changed

  • frontend/app/context/ToastContext.tsx ← new
  • frontend/app/components/Toast.tsx ← new
  • frontend/app/layout.tsx ← wrapped with ToastProvider
  • frontend/app/login/page.tsx ← replaced alert()
  • frontend/app/globals.css ← added animation

Issue

Closes #83

nsoc26

@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

@Ananya-CM is attempting to deploy a commit to the shreemp194-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown

👋 Thank you for opening this pull request! I will review your changes and assist you soon.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 23, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flow-forge Ready Ready Preview, Comment May 23, 2026 3:13pm

@Shriii19 Shriii19 merged commit 8b77973 into Shriii19:master May 23, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix: Replace browser alert() popups with Toast Notification System across the app

2 participants