Diya 🔥 fix(ui): Fixed State and Team Member UI

[DiyaWadhwani]

Description

Implements two UI improvements to the dashboard:

1. Task action buttons (Ready for Review, Submit for Review) are now dimmed and non-interactive when a user is marked as not available/on time off.
2. Added "already in use" indicators in the Manage States modal when selecting a color or emoji that is already used by an existing state. Also added ⚠️ as a new emoji option.

Related PRs (if any):

None

Main changes explained:

• Updated TeamMemberTask.jsx to apply opacity: 0.4 and pointerEvents: none to the ReviewButton wrapper when onTimeOff is truthy
• Updated ColorPicker.jsx to accept a usedColors prop and display a red dot indicator on swatches already in use, plus a warning message when the currently selected color is already used
• Updated EmojiPicker.jsx to accept usedEmojis and selectedEmoji props, display a red dot indicator on emojis already in use, and show an inline warning inside the picker grid when the selected emoji is already used
• Updated ManageStatesModal.jsx to compute usedColors, usedEmojis, usedColorsForEdit, and usedEmojisForEdit at the component level and pass them to the respective pickers, correctly excluding the item being edited from its own used lists
• Added ⚠️ to the emoji options in constants.js
• Added supporting CSS classes to UserState.module.css for swatch/emoji used indicators and warning text

How to test:

1. Check out to the current branch
2. Run npm install and start the server
3. Clear site data/cache
4. Log in as an Owner or Administrator

Test 1 — Review button dimming:
5. Go to User Profile > Schedule 'Time Off'
6. Verify that the user marked as not available this week (shows the "Is Not Available this Week" banner) has task action buttons (Ready for Review / Submit for Review) that are visually dimmed and cannot be clicked

Test 2 — Color/Emoji indicators:
8. Go to Dashboard → any user's state → Set State → Manage States
9. Click Edit on any existing state or click Add New State
10. Open the Color picker and verify that colors already used by other states show a small red dot indicator
11. Select an already-used color and verify the warning "⚠️ This color is already used by another state." appears below the swatches
12. Open the Emoji picker and verify that emojis already in use show a red dot indicator
13. Select an already-used emoji and verify the warning "⚠️ Already in use" appears inside the picker grid
14. Verify that when editing a state, its own current color/emoji are NOT flagged as already in use

15. Verify all of the above work correctly in dark mode

Screenshots or videos of changes:

Test 1

Before:

After:

Test 2

Before:

After:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	99c3f50
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69d849badbd77f0008abeb55
😎 Deploy Preview	https://deploy-preview-5128--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud