chore: rename Button 'styles' prop to 'style' for consistency

[Aeledfyr]

Button was the only component that used styles instead of style; it also silently ignored the normal style property inherited from <button>, which caused at least one bug -- the explore themes button in interface settings was styled, but those styles were ignored.

This is literally just using a LSP rename from styles to style, renaming "styles" to "style" in the splitProps list, and adding "style" to the Omit section of ButtonProps. There are no remaining uses of styles= in the codebase, so I believe it got everything.

Screenshots

The current preset theme list in interface settings; only the button is clickable in the explore pane.

With this PR; there are no new styles, just that the existing styles are correctly applied. The entire pane is clickable.

Did you test your code?

Tested on Firefox on Linux and Chrome on Android.

Checklist

• Changes are clear, concise, and easy to review
• Code has been tested and works as intended
• Text/content changes support internationalization (i18n) (N/A)
• Any new user-facing strings are properly localized (N/A)

Summary by CodeRabbit

• Refactor
  • Standardized button component styling interface across the application by updating prop naming conventions for consistency. This internal refactor improves code maintainability with no impact on user-facing functionality or visual appearance.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6e03078 and a32c6cb.

📒 Files selected for processing (16)

• src/components/InviteBotPopup.tsx
• src/components/message-pane/MessagePane.tsx
• src/components/message-pane/message-item/AudioEmbed.tsx
• src/components/message-pane/message-item/Reactions.tsx
• src/components/moderation-pane/ModerationPane.tsx
• src/components/servers/settings/ExternalEmbedSettings.tsx
• src/components/servers/settings/ServerVerifySettings.tsx
• src/components/settings/AccountSettings.tsx
• src/components/settings/NotificationsSettings.tsx
• src/components/ui/Button.tsx
• src/components/ui/ImageCropModal.tsx
• src/components/ui/emoji-picker/EmojiPicker.tsx
• src/pages/LoginPage.tsx
• src/pages/OAuthAuthorizePage.tsx
• src/pages/RegisterPage.tsx
• src/pages/ResetPasswordPage.tsx

---

📝 Walkthrough

Walkthrough

A systematic refactoring renames the Button component's inline styling prop from styles to style throughout the codebase. The ButtonProps interface is updated, and all Button usages across 15+ components and pages are modified to use the new prop name consistently.

Changes

Cohort / File(s)	Summary
Button Component Definition src/components/ui/Button.tsx	Updated ButtonProps to expose style?: JSX.CSSProperties instead of styles?: JSX.CSSProperties. Modified splitProps to extract "style" and updated style spreading logic to use customProps.style.
Settings & Configuration Components src/components/servers/settings/ExternalEmbedSettings.tsx, src/components/servers/settings/ServerVerifySettings.tsx, src/components/settings/AccountSettings.tsx, src/components/settings/NotificationsSettings.tsx	Renamed Button prop from styles to style for margin-left, flex, and other inline styles.
Message Pane & Related Components src/components/message-pane/MessagePane.tsx, src/components/message-pane/message-item/AudioEmbed.tsx, src/components/message-pane/message-item/Reactions.tsx	Renamed Button prop from styles to style for border-radius, flex, and button visibility styling.
Modal & UI Components src/components/InviteBotPopup.tsx, src/components/ui/ImageCropModal.tsx, src/components/ui/emoji-picker/EmojiPicker.tsx, src/components/moderation-pane/ModerationPane.tsx	Renamed Button prop from styles to style for alignment, flex, margin, and radius styling.
Page Components src/pages/LoginPage.tsx, src/pages/OAuthAuthorizePage.tsx, src/pages/RegisterPage.tsx, src/pages/ResetPasswordPage.tsx	Renamed Button prop from styles to style for flex and alignment styling in form and authentication pages.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Fix button focus rings, fix some double-nested buttons #545: Modifies the Button component and its public API with additional prop changes (target/rel attributes), making it related to this prop naming refactor.

Poem

🐰 A Button was dressed in the old-fashioned way,
With styles so quirky—hooray, let's replay!
Now style fits the norm, clean and sleek,
From pages to modals, the code's not weak! ✨
Consistency hops through the whole codebase today.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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
Title check	✅ Passed	The title clearly and concisely describes the main change: renaming the Button component's 'styles' prop to 'style' for consistency.
Description check	✅ Passed	The description provides clear context about the change, includes relevant screenshots showing before/after behavior, documents testing performed, and addresses all applicable checklist items.

_{✏️ 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

---

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.}