Domain:
Frontend / UI
Difficulty:
Beginner
Problem / steps to reproduce (for bugs)
- On the top right of the page, the Recording Studio button is currently displayed as plain text or a simple link.
- This makes it less visually engaging and harder for users to quickly identify.
Expected outcome / task:
- Update the Recording Studio button to include a microphone icon to the left of the text.
- Use Lucide React or any existing icon library used in the project for the microphone icon.
- Ensure the button maintains proper alignment, spacing, and styling with Tailwind CSS.
- The button should remain functional, with the icon being purely decorative.
Any links or references:
Setup Steps (short):
- Ensure the project runs locally (yarn install && yarn dev).
- Locate the Recording Studio button component.
- Add the microphone icon to the left of the button text using Lucide React or another icon library.
- Use Tailwind classes (e.g., flex items-center gap-2) to align the icon and text properly.
- Test by rendering the button and verifying proper spacing, alignment, and functionality.