Fix profile edit form UX and remove duplicate save action

[ssid18]

Closes : N/A

📝 Description

This pull request improves the profile edit experience by addressing a few UX inconsistencies observed during local testing.

Editable fields in the profile page were visually indistinguishable from static text, and the save action appeared more than once during edit mode, which could cause confusion while updating profile information. This change improves clarity while keeping existing logic and layout intact.

🔧 Changes Made

• Updated profile edit input fields to be visually distinguishable and consistent with the existing dark theme
• Ensured the "Save Changes" action appears only once during edit mode
• Preserved existing layout, styling, and data flow outside the edit interaction

📷 Screenshots or Visual Changes (if applicable)

Profile edit UI – before / after

Before – Inputs not visually distinguishable

Before – Duplicate Save action during edit mode

After – Clear inputs and single Save action

🤝 Collaboration

Collaborated with: N/A

✅ Checklist

• I have read the contributing guidelines.
• I have added tests that prove my fix is effective or that my feature works.
• I have added necessary documentation (if applicable).
• Any dependent changes have been merged and published in downstream modules.

Summary by CodeRabbit

• Refactor

  • Header edit button now consistently enters edit mode; the previous toggle behavior is removed. Editing can be exited only via the bottom Cancel/Save controls.

• Style

  • Updated profile input styling: dark background, rounded corners, padding, and a green focus ring for clearer feedback. Disabled state visuals preserved and standardized across fields.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The ProfilePage header button was changed to only enter editing mode (no toggle). The header no longer shows "Save Changes". Input fields were restyled with a dark background, rounded corners, padding, and a green focus ring; bottom Cancel/Save controls remain when editing.

Changes

Cohort / File(s)	Summary
Profile Edit UI Updates frontend/src/components/pages/ProfilePage.tsx	Header action converted to a one-way "Edit Profile" button that sets isEditing = true (toggle behavior removed). Header no longer renders a save action. Form inputs updated to dark background, rounded corners, padding, and a green focus ring; disabled visuals preserved.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A little button starts the show,
Fields glow green where focus goes,
No flip or toggle to perplex,
Rounded dark rows, tiny specs,
Hopping happy — edits flow! 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the main changes: improving profile edit form UX and removing the duplicate save action that appeared in both header and bottom controls.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 46f21d0 and 8e1e206.

📒 Files selected for processing (1)

• frontend/src/components/pages/ProfilePage.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/components/pages/ProfilePage.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI Agents

In @frontend/src/components/pages/ProfilePage.tsx:
- Around line 36-41: The Edit button remains active while editing; update the
rendering around the motion.button that uses setIsEditing and the isEditing
state so it either does not render when isEditing is true (e.g., wrap the
motion.button with {!isEditing && ...}) or set disabled={isEditing} and adjust
the className to show a disabled style and prevent onClick from calling
setIsEditing when isEditing is true; modify the motion.button (and the Edit
icon) behavior accordingly so the button is hidden or visibly disabled during
edit mode.

🧹 Nitpick comments (1)

frontend/src/components/pages/ProfilePage.tsx (1)

4-4: Remove unused icon imports.

The Save and DoorClosed icons are imported but not used in the component. The Save icon was likely used in the previous toggle implementation before this PR's changes.

🔎 Cleanup unused imports

-import { User, Mail, Building, Globe, Github, Twitter, Edit, Camera, Save, DoorClosed } from 'lucide-react';
+import { User, Mail, Building, Globe, Github, Twitter, Edit, Camera } from 'lucide-react';

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aa66519 and 46f21d0.

📒 Files selected for processing (1)

• frontend/src/components/pages/ProfilePage.tsx

🔇 Additional comments (1)

frontend/src/components/pages/ProfilePage.tsx (1)

84-84: Excellent styling improvements for form fields!

The updated input field styling successfully addresses the UX issue mentioned in the PR objectives. Fields are now visually distinguishable with:

• Clear background color (bg-gray-800)
• Proper padding and rounded corners
• Green focus ring for interaction feedback
• Reduced opacity when disabled

The consistent dark-theme styling across all fields (Name, Email, Company, Website, GitHub, Twitter) creates a cohesive and professional appearance.

Also applies to: 98-98, 112-112, 128-128, 142-142, 156-156

[ssid18]

Hey @smokeyScraper @Aditya30ag 👋

This PR focuses on improving the profile edit experience by resolving a few UX inconsistencies observed during local testing.

Specifically, it makes editable fields visually distinguishable from static text and ensures that the save action appears only once during edit mode, reducing potential user confusion.
The changes are intentionally scoped to UI behavior and do not modify existing data flow or backend interactions.

Screenshots comparing the before and after states are included for clarity.

Would appreciate your feedback when you get a chance. Thanks!

[Aditya30ag]

The original button handled both Edit and Save states.
Now:
-There is no “Save Changes” button
-No way to exit edit mode