Restyle the Search Input to Match the Dark Theme

[Vedant1703]

📋 Description

The search input on the Discover page (/discover) is styled with light/white theme classes (bg-white, border-gray-300, placeholder-gray-500, focus:ring-indigo-500) that completely clash with the rest of the application, which uses a GitHub-dark color palette.

This makes the search bar look broken and out-of-place. It needs to be restyled to match the app's design system.

---

📍 File to Change

frontend/app/(auth)/discover/components/search-input.tsx

---

🔍 Current Broken Style (line ~42)

className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5
  bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400
  focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"

This renders a white box in a dark-themed page.

---

✅ What To Do

Replace the <input> className with styles consistent with the rest of the app:

className="block w-full pl-10 pr-3 py-3 rounded-xl text-sm
  bg-[#161b22] border border-[#30363d] text-[#c9d1d9]
  placeholder-[#6e7681] focus:outline-none focus:border-[#2f81f7]
  focus:ring-1 focus:ring-[#2f81f7] transition-colors"

Also update the search icon color from text-gray-400 to text-[#6e7681] to match.

---

🏁 Acceptance Criteria

• The search input has a dark background (bg-[#161b22]) consistent with the rest of the app
• Placeholder text is a muted gray (text-[#6e7681])
• Input text is light (text-[#c9d1d9])
• Focus ring uses the app's blue accent (#2f81f7)
• The search icon color is updated to match
• The search functionality (debounce, onSearch callback) is completely unchanged

---

💡 Technical Hints

• Only the className strings need to change — the logic is untouched
• Compare with frontend/app/(auth)/settings/page.tsx or other inputs in the app for reference colors
• The wrapper <div> may also need a small tweak if it has a white/light background

---

🚀 Getting Started

1. Fork the repository
2. Create a branch: git checkout -b fix/issue-11-dark-search-input
3. Edit frontend/app/(auth)/discover/components/search-input.tsx
4. Run: cd frontend && npm run dev → go to /discover to preview
5. Open a Pull Request!