feat(Translation): Add translation support for settings panel

This pr is base on Tabliss translate strings joelshepherd#687 and  More translatable strings, full Russian translation joelshepherd#651

Author: BookCatKid

CHANGELOG.md

@@ -1,13 +1,13 @@
 [
   "app.pageTitle",
-  "dashboard.settingsHint",
-  "dashboard.focusHint",
-  "dashboard.fullscreenHint",
-  "dashboard.loadingHint",
   "widgets",
   "settings",
   "settings.translationCredits",
   "background",
+  "dashboard.settingsHint",
+  "dashboard.focusHint",
+  "dashboard.fullscreenHint",
+  "dashboard.loadingHint",
   "plugins.weather.high",
   "plugins.weather.low",
   "plugins.weather.apparent",

src/locales/lang/ar.json

@@ -1,13 +1,13 @@
 [
   "app.pageTitle",
-  "dashboard.settingsHint",
-  "dashboard.focusHint",
-  "dashboard.fullscreenHint",
-  "dashboard.loadingHint",
   "widgets",
   "settings",
   "settings.translationCredits",
   "background",
+  "dashboard.settingsHint",
+  "dashboard.focusHint",
+  "dashboard.fullscreenHint",
+  "dashboard.loadingHint",
   "plugins.weather.high",
   "plugins.weather.low",
   "plugins.weather.apparent",

src/locales/lang/be.json

@@ -1,13 +1,13 @@
 [
   "app.pageTitle",
-  "dashboard.settingsHint",
-  "dashboard.focusHint",
-  "dashboard.fullscreenHint",
-  "dashboard.loadingHint",
   "widgets",
   "settings",
   "settings.translationCredits",
   "background",
+  "dashboard.settingsHint",
+  "dashboard.focusHint",
+  "dashboard.fullscreenHint",
+  "dashboard.loadingHint",
   "plugins.weather.high",
   "plugins.weather.low",
   "plugins.weather.apparent",

src/locales/lang/ca-ES.json

@@ -1,11 +1,16 @@
 import React, { FC } from "react";
+import { FormattedMessage } from "react-intl";
 
 import { Props, defaultData } from "./types";
 
 const ColourSettings: FC<Props> = ({ data = defaultData, setData }) => (
   <div className="ColourSettings">
     <label>
-      Colour
+      <FormattedMessage
+          id="backgrounds.colour.colour"
+          defaultMessage="Colour"
+          description="Colour title"
+        />
       <input
         type="color"
         value={data.colour}

src/locales/lang/cs.json

@@ -1,28 +1,40 @@
 import React, { FC } from "react";
-
+import { FormattedMessage } from "react-intl";
 import { Props, defaultData } from "./types";
 import { DebounceInput } from "../../shared";
 
 const GiphySettings: FC<Props> = ({ data = defaultData, setData }) => (
   <div className="GiphySettings">
     <label>
-      Tag
+    <FormattedMessage
+          id="backgrounds.giphy.tag"
+          defaultMessage="Tag"
+          description="Tag title"
+        />
       <DebounceInput
         type="text"
         value={data.tag}
         onChange={(value) => setData({ ...data, tag: value })}
         wait={500}
       />
     </label>
-    <p className="info">Separate multiple tags with a comma</p>
+    <p className="info"><FormattedMessage
+          id="backgrounds.giphy.tag.info"
+          defaultMessage="Separate multiple tags with a comma"
+          description="Tag info"
+        /></p>
 
     <label>
       <input
         type="checkbox"
         checked={data.nsfw}
         onChange={() => setData({ ...data, nsfw: !data.nsfw })}
       />{" "}
-      Include NSFW content
+      <FormattedMessage
+          id="backgrounds.giphy.safeSearch"
+          defaultMessage="Include NSFW content"
+          description="Include NSFW content checkbox label"
+        />
     </label>
   </div>
 );

src/locales/lang/de.json

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { FormattedMessage } from "react-intl";
 
 import { Props, defaultData } from "./types";
 
@@ -10,22 +11,37 @@ const GradientSettings: FC<Props> = ({ data = defaultData, setData }) => (
         checked={data.isRandom}
         onChange={(event) => setData({ ...data, isRandom: event.target.checked })}
       />{" "}
-      Use Random Gradients
+      <FormattedMessage
+        id="backgrounds.gradient.useRandomGradients"
+        defaultMessage="Use Random Gradients"
+        description="Use Random Gradients title"
+      />
     </label>
 
     {data.isRandom && data.currentGradientName && (
-      <p style={{ 
-        margin: "0.5rem 0",
-        padding: "0.5rem",
-        backgroundColor: "rgba(0, 0, 0, 0.05)",
-        borderRadius: "4px"
-      }}>
-        Current Gradient: {data.currentGradientName}
+      <p
+        style={{
+          margin: "0.5rem 0",
+          padding: "0.5rem",
+          backgroundColor: "rgba(0, 0, 0, 0.05)",
+          borderRadius: "4px",
+        }}
+      >
+        <FormattedMessage
+          id="backgrounds.gradient.currentGradient.prefix"
+          defaultMessage="Current Gradient:"
+          description="Label prefix for current gradient name"
+        />{" "}
+        {data.currentGradientName}
       </p>
     )}
 
     <label>
-      Type
+      <FormattedMessage
+        id="backgrounds.gradient.type"
+        defaultMessage="Type"
+        description="Label for gradient type selection"
+      />
       <select
         value={data.type}
         onChange={(event) =>
@@ -35,14 +51,30 @@ const GradientSettings: FC<Props> = ({ data = defaultData, setData }) => (
           })
         }
       >
-        <option value="linear-gradient">Linear</option>
-        <option value="radial-gradient">Radial</option>
+        <option value="linear-gradient">
+          <FormattedMessage
+            id="backgrounds.gradient.type.linear"
+            defaultMessage="Linear"
+            description="Linear gradient type option"
+          />
+        </option>
+        <option value="radial-gradient">
+          <FormattedMessage
+            id="backgrounds.gradient.type.radial"
+            defaultMessage="Radial"
+            description="Radial gradient type option"
+          />
+        </option>
       </select>
     </label>
 
     {data.type === "linear-gradient" && (
       <label>
-        Angle (0-360)
+        <FormattedMessage
+          id="backgrounds.gradient.angle"
+          defaultMessage="Angle (0-360)"
+          description="Label for gradient angle input"
+        />
         <input
           type="number"
           value={data.angle}
@@ -58,7 +90,11 @@ const GradientSettings: FC<Props> = ({ data = defaultData, setData }) => (
     {!data.isRandom && (
       <>
         <label>
-          From Colour
+          <FormattedMessage
+            id="backgrounds.gradient.fromColor"
+            defaultMessage="From Colour"
+            description="Label for gradient start color picker"
+          />
           <input
             type="color"
             value={data.from}
@@ -67,7 +103,11 @@ const GradientSettings: FC<Props> = ({ data = defaultData, setData }) => (
         </label>
 
         <label>
-          To Colour
+          <FormattedMessage
+            id="backgrounds.gradient.toColor"
+            defaultMessage="To Colour"
+            description="Label for gradient end color picker"
+          />
           <input
             type="color"
             value={data.to}