feat: translate clienttheme plugin as test

.vscode/i18n-ally-custom-framework.yml

@@ -5,12 +5,12 @@ languageIds:
     - typescriptreact
 
 usageMatchRegex:
-    - "[^\\w\\d]\\$t\\(['\"`]({key})['\"`]"
+    - "[^\\w\\d]\\t\\(['\"`]({key})['\"`]"
     - "<Translate ?.* i18nKey=\\{?['\"`]({key})['\"`]"
 
 refactorTemplates:
-    - "$t(\"$1\")"
+    - "t(\"$1\")"
-    - "{$t(\"$1\")}"
+    - "{t(\"$1\")}"
     - "<Translate i18nKey=\"$1\" />"
 
 monopoly: true

src/plugins/clientTheme/index.tsx

@@ -65,8 +65,8 @@ function ThemeSettings() {
         <div className="client-theme-settings">
             <div className="client-theme-container">
                 <div className="client-theme-settings-labels">
-                    <Forms.FormTitle tag="h3">Theme Color</Forms.FormTitle>
+                    <Forms.FormTitle tag="h3">{t("clientTheme.settingsTitle")}</Forms.FormTitle>
-                    <Forms.FormText>Add a color to your Discord client theme</Forms.FormText>
+                    <Forms.FormText>{t("clientTheme.settingsDescription")}</Forms.FormText>
                 </div>
                 <ColorPicker
                     color={parseInt(settings.store.color, 16)}
@@ -79,12 +79,12 @@ function ThemeSettings() {
                 <Forms.FormDivider className={classes(Margins.top8, Margins.bottom8)} />
                 <div className={`client-theme-contrast-warning ${contrastWarning ? (isLightTheme ? "theme-dark" : "theme-light") : ""}`}>
                     <div className="client-theme-warning">
-                        <Forms.FormText>Warning, your theme won't look good:</Forms.FormText>
+                        <Forms.FormText>{t("clientTheme.warningTitle")}</Forms.FormText>
-                        {contrastWarning && <Forms.FormText>Selected color won't contrast well with text</Forms.FormText>}
+                        {contrastWarning && <Forms.FormText>{t("clientTheme.warnings.badContrast")}</Forms.FormText>}
-                        {nitroThemeEnabled && <Forms.FormText>Nitro themes aren't supported</Forms.FormText>}
+                        {nitroThemeEnabled && <Forms.FormText>{t("clientTheme.warnings.nitro")}</Forms.FormText>}
                     </div>
-                    {(contrastWarning && fixableContrast) && <Button onClick={() => setTheme(oppositeTheme)} color={Button.Colors.RED}>Switch to {oppositeTheme} mode</Button>}
+                    {(contrastWarning && fixableContrast) && <Button onClick={() => setTheme(oppositeTheme)} color={Button.Colors.RED}>{t(`clientTheme.switchToOpposite.${oppositeTheme}`)}</Button>}
-                    {(nitroThemeEnabled) && <Button onClick={() => setTheme(theme)} color={Button.Colors.RED}>Disable Nitro Theme</Button>}
+                    {(nitroThemeEnabled) && <Button onClick={() => setTheme(theme)} color={Button.Colors.RED}>{t("clientTheme.disableNitroTheme")}</Button>}
                 </div>
             </>)}
         </div>
@@ -93,18 +93,18 @@ function ThemeSettings() {
 
 const settings = definePluginSettings({
     color: {
-        description: "Color your Discord client theme will be based around. Light mode isn't supported",
+        description: t("clientTheme.colorDescription"),
         type: OptionType.COMPONENT,
         default: "313338",
         component: () => <ThemeSettings />
     },
     resetColor: {
-        description: "Reset Theme Color",
+        description: t("clientTheme.resetColorDescription"),
         type: OptionType.COMPONENT,
         default: "313338",
         component: () => (
             <Button onClick={() => onPickColor(0x313338)}>
-                Reset Theme Color
+                {t("clientTheme.resetButton")}
             </Button>
         )
     }

translations/en/clientTheme.json

@@ -1,4 +1,19 @@
 {
+  "colorDescription": "Color your Discord client theme will be based around. Light mode isn't supported",
   "description": "Recreation of the old client theme experiment. Add a color to your Discord client theme",
-  "edit": "Edit ClientTheme"
+  "disableNitroTheme": "Disable Nitro Theme",
+  "edit": "Edit ClientTheme",
+  "resetButton": "Reset Theme Color",
+  "resetColorDescription": "Reset Theme Color",
+  "settingsDescription": "Add a color to your Discord client theme",
+  "settingsTitle": "Theme Color",
+  "switchToOpposite": {
+    "dark": "Switch to dark mode",
+    "light": "Switch to light mode"
+  },
+  "warningTitle": "Warning, your theme won't look good:",
+  "warnings": {
+    "badContrast": "Selected color won't contrast well with text",
+    "nitro": "Nitro themes aren't supported"
+  }
 }