From db5fe2a39472275d2422035d3c55cb6f8cf15538 Mon Sep 17 00:00:00 2001
From: TheGreenPig <67547385+TheGreenPig@users.noreply.github.com>
Date: Sun, 22 Sep 2024 09:38:32 +0200
Subject: [PATCH] Fix plugin settings inconsistency regarding setting names
 (#2884)

---
 .../PluginSettings/components/SettingNumericComponent.tsx    | 5 ++++-
 .../PluginSettings/components/SettingSelectComponent.tsx     | 5 ++++-
 .../PluginSettings/components/SettingSliderComponent.tsx     | 5 ++++-
 .../PluginSettings/components/SettingTextComponent.tsx       | 5 ++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/PluginSettings/components/SettingNumericComponent.tsx b/src/components/PluginSettings/components/SettingNumericComponent.tsx
index 446d2504b..b724717d7 100644
--- a/src/components/PluginSettings/components/SettingNumericComponent.tsx
+++ b/src/components/PluginSettings/components/SettingNumericComponent.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Margins } from "@utils/margins";
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { OptionType, PluginOptionNumber } from "@utils/types";
 import { Forms, React, TextInput } from "@webpack/common";
 
@@ -54,7 +56,8 @@ export function SettingNumericComponent({ option, pluginSettings, definedSetting
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <TextInput
                 type="number"
                 pattern="-?[0-9]+"
diff --git a/src/components/PluginSettings/components/SettingSelectComponent.tsx b/src/components/PluginSettings/components/SettingSelectComponent.tsx
index 97c17071b..5f1cd0278 100644
--- a/src/components/PluginSettings/components/SettingSelectComponent.tsx
+++ b/src/components/PluginSettings/components/SettingSelectComponent.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Margins } from "@utils/margins";
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { PluginOptionSelect } from "@utils/types";
 import { Forms, React, Select } from "@webpack/common";
 
@@ -44,7 +46,8 @@ export function SettingSelectComponent({ option, pluginSettings, definedSettings
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom16} type="description">{option.description}</Forms.FormText>
             <Select
                 isDisabled={option.disabled?.call(definedSettings) ?? false}
                 options={option.options}
diff --git a/src/components/PluginSettings/components/SettingSliderComponent.tsx b/src/components/PluginSettings/components/SettingSliderComponent.tsx
index 3dda19be1..738f5f017 100644
--- a/src/components/PluginSettings/components/SettingSliderComponent.tsx
+++ b/src/components/PluginSettings/components/SettingSliderComponent.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Margins } from "@utils/margins";
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { PluginOptionSlider } from "@utils/types";
 import { Forms, React, Slider } from "@webpack/common";
 
@@ -50,7 +52,8 @@ export function SettingSliderComponent({ option, pluginSettings, definedSettings
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <Slider
                 disabled={option.disabled?.call(definedSettings) ?? false}
                 markers={option.markers}
diff --git a/src/components/PluginSettings/components/SettingTextComponent.tsx b/src/components/PluginSettings/components/SettingTextComponent.tsx
index abf1bbbed..cb45f28c4 100644
--- a/src/components/PluginSettings/components/SettingTextComponent.tsx
+++ b/src/components/PluginSettings/components/SettingTextComponent.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Margins } from "@utils/margins";
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { PluginOptionString } from "@utils/types";
 import { Forms, React, TextInput } from "@webpack/common";
 
@@ -41,7 +43,8 @@ export function SettingTextComponent({ option, pluginSettings, definedSettings,
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <TextInput
                 type="text"
                 value={state}