fix: center tick icon inside Checkbox indicator

[Mir-Zairan]

Summary

The tick icon inside the Checkbox component was not centered. The .indicator element was missing display: flex with alignment properties, causing the tick SVG to follow inline baseline alignment rather than being visually centered within the checkbox.

Closes: N/A

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📝 Documentation update
• ♻️ Refactoring (no functional changes)

Scope Confirmation

• This PR addresses one feature/fix only
• If multiple changes were needed, they are split into separate PRs

Rollback Safety

• Can be safely reverted without data issues or migrations

Test Plan

• Unit tests added/updated
• Integration tests added/updated
• Manual testing performed

Testing steps:

1. Open Storybook → dls/Checkbox → DefaultCheckbox, set checked: true — tick is centered
2. On quran.com, open Settings → Translations — tick is centered on selected translations
3. Verify checked, indeterminate and disabled states all render correctly

Edge Cases Verified

• ⏳ Loading state handled
• ❌ Error state handled
• 📭 Empty state handled
• 👤 Logged-in vs guest behavior (if applicable)

Pre-Review Checklist

Code Quality

• I have performed a self-review of my code (file by file)
• My code follows the project style guidelines
• No unused code, imports, or dead code included

Testing & Validation

• Linting passes (yarn lint)

Localization (if UI changes)

• RTL layout verified

Accessibility (if UI changes)

• Keyboard navigation works

Screenshots/Videos

Before	After

AI Assistance Disclosure

• AI tools were NOT used for this PR
• AI tools were used, and I have thoroughly reviewed and validated all generated code

[Mir-Zairan]

Review @sharabash @ahmedre @naveed-ahmad?

[ahmedre]

cc @osamasayed

[Mir-Zairan]

cc @osamasayed

any updates?