fix: align Personal Safety Hub styling with Legal Hub

[Sumitsutharss]

🛠️ Pull Request

🏷️ PR Type

• 🐞 Bug Fix

---

🔗 Related Issue

• Closes bug: UI Color Inconsistency Between Parallel Hub Components #171

---

📝 Rationale / Motivation

The Personal Safety Hub and Legal & Emotional Healing Hub appeared side-by-side but used different visual themes, creating inconsistency in the Resources page UI.

This change aligns both components with a unified design system for better visual consistency and user experience.

---

✨ Description of Changes

Frontend

• Updated Personal Safety Hub styling to match the Legal & Emotional Healing Hub.
• Added consistent background, border, typography, and icon styling.
• Added dark mode compatible styling.
• Improved visual symmetry between both hub components.

Modified file:

• src/pages/Resources.tsx

---

🧪 Testing Instructions

1. Run the application locally.
2. Navigate to /resources.
3. Verify both hub cards have consistent styling.
4. Toggle light and dark mode.
5. Confirm responsiveness remains intact.

---

👀 Impact Assessment

• Improves UI consistency.
• No functionality changes.
• No backend impact.
• No security impact.
• Works in both light and dark mode.

---

🖼️ Screenshots

---

⚡ Checklist

• Code follows project guidelines
• Changes tested locally
• Related issue linked
• No new warnings/errors introduced
• User-facing changes documented

[netlify]

👷 Deploy request for safevoiceforwomen pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	b2fee08