[Bug]: [UX] "Verify" button lacks visible border/background — inconsistent with other buttons

[tharunika-19]

Area

Frontend UI

What happened?

🐛 UX Issue

On the email verification modal during registration, the "Verify →" button has no
visible border or background styling, making it appear as plain text. This is visually
inconsistent with the "Cancel" and "Resend" buttons which have proper bordered styles.

📍 Location

Registration flow → Email Verification modal
URL: https://piperchat.vercel.app/register

Steps to reproduce

🔁 Steps to Reproduce

1. Go to https://piperchat.vercel.app/register
2. Fill in registration details and submit
3. The email verification modal appears
4. Observe the three buttons at the bottom: "Cancel", "Resend", and "Verify →"
5. Notice "Verify →" has no border, background, or visual structure

Expected behavior

✅ Expected Behavior

• "Verify →" should be the primary CTA and styled most prominently
• Should have a solid background (e.g. purple/brand color) with white text
• All three buttons should follow a consistent visual hierarchy:
  • Cancel → ghost/secondary
  • Resend → ghost/secondary
  • Verify → → primary (filled, most prominent)

💡 Suggested Fix

.verify-btn {
  background-color: var(--primary-color); /* or #7c3aed */
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.verify-btn:hover {
  background-color: var(--primary-hover);
  opacity: 0.9;
}

📸 Screenshot

🏷️ Labels

bug UI UX good first issue

Actual behavior

😔 Current Behavior

• "Verify →" renders as unstyled plain text
• No border, background, or padding visible on the button
• Looks like a link rather than a primary action button
• Creates visual inconsistency — "Cancel" and "Resend" have clear bordered styles
• Users may not recognize it as a clickable button

App surface

Login

Local environment

No response

Console, network, or server logs

Screenshots or recordings

Before submitting

• I checked for an existing issue that already describes this bug.
• I included enough detail for someone else to reproduce the issue.

[tharunika-19]

Hi @0rigin-c0de, I'd love to work on this issue!

I've identified the fix -- the "Verify →" button needs primary button styling
(background, border, padding) to match the visual hierarchy of the modal.
I'll update the CSS to make it consistent with the other buttons and ensure
it stands out as the primary CTA.

Can you please assign this to me? I'll have a PR ready soon!

[Stewartsson]

Hi, I am a contributor under GSSoC'26 and would like to work on this issue. Could you please assign it to me as my system is ready to work on it