Prefer sx over style-and-theme

[imnasnainaec]

Use sx on MUI components over style, especially where it saves unnecessary imports of theme.

---

This change is 

Summary by CodeRabbit

• Refactor
  • Improved internal styling implementation across components without affecting user experience or functionality.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

📝 Walkthrough

Walkthrough

This PR systematically replaces theme-based inline styles with Material-UI's sx prop across multiple components, removing dependencies on the theme import module. All changes are styling-only with no functional or control flow modifications.

Changes

Cohort / File(s)	Summary
Project & User Management src/components/ProjectSettings/ProjectLanguages.tsx, src/components/ProjectUsers/ActiveProjectUsers.tsx, src/components/ProjectUsers/UserList.tsx, src/components/SiteSettings/ProjectManagement/ProjectUsersButtonWithConfirmation.tsx, src/components/SiteSettings/ProjectManagement/index.tsx, src/components/SiteSettings/UserManagement/UserList.tsx	Removed theme imports and replaced inline styles using theme.spacing() with MUI sx props (e.g., mt: 1, marginInlineEnd: 1).
Character Inventory src/goals/CharacterInventory/CharInv/CharacterDetail/index.tsx, src/goals/CharacterInventory/CharInv/CharacterEntry.tsx, src/goals/CharacterInventory/CharInv/CharacterList/CharacterCard.tsx, src/goals/CharacterInventory/CharInv/CharacterSetHeader.tsx	Removed theme imports and converted theme-based spacing to sx props; CharacterEntry also replaced div wrapper with MUI Box component.
Merge Duplicates src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DropWord.tsx	Removed theme import and replaced Card and CardHeader inline styles with sx props; updated padding from theme.spacing(1) to p: 1 and pb: 1.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

frontend, project, goal: MergeDup

Suggested reviewers

• jasonleenaylor

Poem

🐰 Hops through spacing with glee,
Theme imports now set free,
sx props take the stage,
A cleaner, lighter page!
From theme to shorthand we dance,
Styling gets its second chance. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 37.50% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: systematically replacing inline style attributes with Material-UI's sx prop to eliminate unnecessary theme imports across multiple components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch theme-spacing-sx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 65.63%. Comparing base (2353111) to head (893a363).
⚠️ Report is 30 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4132      +/-   ##
==========================================
- Coverage   74.72%   65.63%   -9.10%     
==========================================
  Files         296      242      -54     
  Lines       10945     6187    -4758     
  Branches     1370      786     -584     
==========================================
- Hits         8179     4061    -4118     
+ Misses       2370     1872     -498     
+ Partials      396      254     -142     

Flag	Coverage Δ
backend	?
frontend	65.63% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jasonleenaylor]

@jasonleenaylor reviewed 8 files and all commit messages, and made 1 comment.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @imnasnainaec).