From df2d7d6357d9a9995b8c0f326b251d5bcc9681b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Quentin=20=E2=80=9CStorm1er=E2=80=9D=20Decaunes?=
 <le.storm1er@gmail.com>
Date: Thu, 19 Mar 2020 12:14:26 +0100
Subject: [PATCH] fix: #74 Reduce freezes due to translation.

---
 src/App.tsx                                |   5 +-
 src/components/LocaleSelectorModal.tsx     |   4 +-
 src/components/PresetAutoApplyCards.tsx    |  28 +++---
 src/components/PresetButtons.tsx           | 100 +++++++++++----------
 src/components/PresetListEmpty.tsx         |  21 +++--
 src/components/PresetOnline.tsx            |  39 +++++---
 src/components/PresetOnlineButtons.tsx     |  77 ++++++++--------
 src/components/RyzenAdjBottomBar.tsx       |  47 +++++-----
 src/components/SceneSelector.tsx           |  39 +++-----
 src/components/SettingForm.tsx             |  10 ++-
 src/components/SysInfoCards.tsx            |  42 +++++----
 src/components/TopBar.tsx                  |   7 +-
 src/contexts/AppVersion.tsx                |   1 -
 src/contexts/LocaleContext.tsx             |  32 ++++---
 src/contexts/RyzenControllerAppContext.tsx |  25 +++---
 src/locales/ch.json                        |  11 ++-
 src/locales/de.json                        |  11 ++-
 src/locales/en.json                        |  11 ++-
 src/locales/es.json                        |  13 ++-
 src/locales/fr.json                        |  11 ++-
 src/locales/tr.json                        |  11 ++-
 src/scenes/PresetsScene.tsx                |  62 +++++++------
 src/scenes/Scene.tsx                       |  10 ++-
 src/scenes/SettingsScene.tsx               |  22 ++---
 24 files changed, 378 insertions(+), 261 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index aa5f731..70ccf58 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,12 +10,11 @@ import SysInfoContext, {
 } from "./contexts/SysInfoContext";
 import LightModeContext, { lightModeSettingsKey } from "./contexts/LightModeContext";
 import { checkNewVersion } from "./contexts/RyzenControllerAppContext";
-import LocaleContext, { getTranslation, localeSettingsKey } from "./contexts/LocaleContext";
+import LocaleContext, { localeSettingsKey } from "./contexts/LocaleContext";
 import LocaleSelectorModal from "./components/LocaleSelectorModal";
 const si = window.require("systeminformation");
 const electronSettings = window.require("electron-settings");
 
-
 type AppState = {
   sysinfo: SysInfoState;
   lightMode: {
@@ -25,7 +24,6 @@ type AppState = {
   locale: {
     is: AvailableLanguages;
     change(to: AvailableLanguages): void;
-    getTranslation(id: string, fallback?: string, variables?: Record<string, string>): string;
   };
 };
 
@@ -52,7 +50,6 @@ class App extends React.Component<{}, AppState> {
     locale: {
       is: this.getLatestLocale(),
       change: this.changeLocale.bind(this),
-      getTranslation: getTranslation,
     },
   };
 
diff --git a/src/components/LocaleSelectorModal.tsx b/src/components/LocaleSelectorModal.tsx
index b0fbc3f..e6029a0 100644
--- a/src/components/LocaleSelectorModal.tsx
+++ b/src/components/LocaleSelectorModal.tsx
@@ -1,13 +1,15 @@
 import * as React from "react";
 import LocaleContext, { getTranslation } from "../contexts/LocaleContext";
 
+const localeSelectorModalTitle = getTranslation("app.localeSelectorModalTitle", "Change language");
+
 export default function LocaleSelectorModal() {
   return (
     <LocaleContext.Consumer>
       {locale => (
         <div id="locale-selector-modal" uk-modal="">
           <div className="uk-modal-dialog uk-modal-body">
-            <h2 className="uk-modal-title">{getTranslation("app.localeSelectorModalTitle", "Change language")}</h2>
+            <h2 className="uk-modal-title">{localeSelectorModalTitle}</h2>
             <select
               defaultValue={locale.is}
               className="uk-select"
diff --git a/src/components/PresetAutoApplyCards.tsx b/src/components/PresetAutoApplyCards.tsx
index 7a9acc3..4fe5576 100644
--- a/src/components/PresetAutoApplyCards.tsx
+++ b/src/components/PresetAutoApplyCards.tsx
@@ -3,6 +3,12 @@ import Card from "./Card";
 import RyzenControllerAppContext from "../contexts/RyzenControllerAppContext";
 import { getTranslation } from "../contexts/LocaleContext";
 
+const whenLaptopPluggedInTitle = getTranslation("presetAutoApply.whenLaptopPluggedIn", "When laptop plugged in");
+const nonePresetMessage = getTranslation("presetAutoApply.nonePreset", "None");
+const whenLaptopPluggedOutTitle = getTranslation("presetAutoApply.whenLaptopPluggedOut", "When laptop plugged out");
+const whenSessionResumeTitle = getTranslation("presetAutoApply.whenSessionResume", "When session resume");
+const whenRCStartTitle = getTranslation("presetAutoApply.whenRCStart", "When Ryzen Controller starts");
+
 class PresetAutoApplyCards extends React.PureComponent {
   updateOnLaptopPluggedIn(ryzenControllerAppContext: RyzenControllerAppContextType) {
     return function(event: React.ChangeEvent<HTMLSelectElement>): void {
@@ -44,16 +50,13 @@ class PresetAutoApplyCards extends React.PureComponent {
             <div className="uk-flex uk-flex-wrap">
               {window.require("os").platform() === "win32" ? (
                 <React.Fragment>
-                  <Card
-                    title={getTranslation("presetAutoApply.whenLaptopPluggedIn", "When laptop plugged in")}
-                    type="small"
-                  >
+                  <Card title={whenLaptopPluggedInTitle} type="small">
                     <select
                       onChange={this.updateOnLaptopPluggedIn(ryzenControllerAppContext)}
                       className="uk-select"
                       value={ryzenControllerAppContext.settings.onLaptopPluggedIn || ""}
                     >
-                      <option value="">{getTranslation("presetAutoApply.nonePreset", "None")}</option>
+                      <option value="">{nonePresetMessage}</option>
                       {presetNames.map(presetName => {
                         return (
                           <option key={`1_${presetName}`} value={presetName}>
@@ -63,16 +66,13 @@ class PresetAutoApplyCards extends React.PureComponent {
                       })}
                     </select>
                   </Card>
-                  <Card
-                    title={getTranslation("presetAutoApply.whenLaptopPluggedOut", "When laptop plugged out")}
-                    type="small"
-                  >
+                  <Card title={whenLaptopPluggedOutTitle} type="small">
                     <select
                       onChange={this.updateOnLaptopPluggedOut(ryzenControllerAppContext)}
                       className="uk-select"
                       value={ryzenControllerAppContext.settings.onLaptopPluggedOut || ""}
                     >
-                      <option value="">{getTranslation("presetAutoApply.nonePreset", "None")}</option>
+                      <option value="">{nonePresetMessage}</option>
                       {presetNames.map(presetName => {
                         return (
                           <option key={`2_${presetName}`} value={presetName}>
@@ -84,13 +84,13 @@ class PresetAutoApplyCards extends React.PureComponent {
                   </Card>
                 </React.Fragment>
               ) : null}
-              <Card title={getTranslation("presetAutoApply.whenSessionResume", "When session resume")} type="small">
+              <Card title={whenSessionResumeTitle} type="small">
                 <select
                   onChange={this.updateOnSessionResume(ryzenControllerAppContext)}
                   className="uk-select"
                   value={ryzenControllerAppContext.settings.onSessionResume || ""}
                 >
-                  <option value="">{getTranslation("presetAutoApply.nonePreset", "None")}</option>
+                  <option value="">{nonePresetMessage}</option>
                   {presetNames.map(presetName => {
                     return (
                       <option key={`2_${presetName}`} value={presetName}>
@@ -100,13 +100,13 @@ class PresetAutoApplyCards extends React.PureComponent {
                   })}
                 </select>
               </Card>
-              <Card title={getTranslation("presetAutoApply.whenRCStart", "When Ryzen Controller starts")} type="small">
+              <Card title={whenRCStartTitle} type="small">
                 <select
                   onChange={this.updateOnRCStart(ryzenControllerAppContext)}
                   className="uk-select"
                   value={ryzenControllerAppContext.settings.onRCStart || ""}
                 >
-                  <option value="">{getTranslation("presetAutoApply.nonePreset", "None")}</option>
+                  <option value="">{nonePresetMessage}</option>
                   {presetNames.map(presetName => {
                     return (
                       <option key={`2_${presetName}`} value={presetName}>
diff --git a/src/components/PresetButtons.tsx b/src/components/PresetButtons.tsx
index d6ae9c1..60de9c0 100644
--- a/src/components/PresetButtons.tsx
+++ b/src/components/PresetButtons.tsx
@@ -3,7 +3,36 @@ import NotificationContext from "../contexts/NotificationContext";
 import RyzenControllerAppContext, { executeRyzenAdjUsingPreset } from "../contexts/RyzenControllerAppContext";
 import SysInfoContext from "../contexts/SysInfoContext";
 import PresetsOnlineContext from "../contexts/PresetsOnline";
-import { getTranslation } from "../contexts/LocaleContext";
+import { getTranslation, variablesInTranslation } from "../contexts/LocaleContext";
+
+const applyBtnText = getTranslation("presetButtons.apply", "Apply");
+const deleteBtnText = getTranslation("presetButtons.delete", "Delete");
+const loadBtnText = getTranslation("presetButtons.load", "Load");
+const uploadBtnText = getTranslation("presetButtons.upload", "Upload");
+const uploadSucceedText = getTranslation("presetButtons.uploadSucceed", "Preset {preset} has been uploaded");
+const uploadErrorText = getTranslation("presetButtons.uploadError", "An error occured while uploading the preset");
+const loadedPresetText = getTranslation("presetButtons.loadedPreset", "Preset {preset} has been loaded.");
+const confirmDeletionText = getTranslation("presetButtons.confirmDeletion", 'Are you sure to delete "{preset}"?');
+const applyPresetTooltip = getTranslation(
+  "presetButtons.applyPresetTooltip",
+  "The preset will be loaded in RyzenAdj's tabs and applied."
+);
+const loadPresetTooltip = getTranslation(
+  "presetButtons.loadPresetTooltip",
+  "The preset will be loaded in RyzenAdj's tabs but not applied."
+);
+const mustWaitForSignatureGenText = getTranslation(
+  "presetButtons.mustWaitForSignatureGen",
+  "You must wait for laptop signature to be generated"
+);
+const presetWithSameNameAlreadyExistOnlineText = getTranslation(
+  "presetButtons.presetWithSameNameAlreadyExistOnline",
+  "A preset with the same name already exist online"
+);
+const uploadPresetConfirmationText = getTranslation(
+  "presetButtons.uploadPresetConfirmation",
+  "Are you sure to upload the preset {preset}?"
+);
 
 type PresetButtonsProps = {
   presetName: string;
@@ -19,31 +48,25 @@ class PresetButtons extends React.Component<PresetButtonsProps, {}> {
             <div className="uk-button-group uk-margin-right">
               <button
                 className="uk-button uk-button-small uk-button-primary"
-                uk-tooltip={`title: ${getTranslation(
-                  "presetButtons.applyPresetTooltip",
-                  "The preset will be loaded in RyzenAdj's tabs and applied."
-                )}`}
+                uk-tooltip={`title: ${applyPresetTooltip}`}
                 onClick={this.applyPreset(ryzenControllerAppContext)}
               >
-                {getTranslation("presetButtons.apply", "Apply")}
+                {applyBtnText}
               </button>
               <button
                 className="uk-button uk-button-small uk-button-danger"
                 onClick={this.removePreset(ryzenControllerAppContext)}
               >
-                {getTranslation("presetButtons.delete", "Delete")}
+                {deleteBtnText}
               </button>
             </div>
             <div className="uk-button-group uk-margin-right">
               <button
                 className="uk-button uk-button-small uk-button-default"
-                uk-tooltip={`title: ${getTranslation(
-                  "presetButtons.loadPresetTooltip",
-                  "The preset will be loaded in RyzenAdj's tabs but not applied."
-                )}`}
+                uk-tooltip={`title: ${loadPresetTooltip}`}
                 onClick={this.loadPreset(ryzenControllerAppContext)}
               >
-                {getTranslation("presetButtons.load", "Load")}
+                {loadBtnText}
               </button>
               <SysInfoContext.Consumer>
                 {sysinfo => (
@@ -57,7 +80,7 @@ class PresetButtons extends React.Component<PresetButtonsProps, {}> {
                           sysinfo.permissiveSignature
                         )}
                       >
-                        {getTranslation("presetButtons.upload", "Upload")}
+                        {uploadBtnText}
                       </button>
                     )}
                   </PresetsOnlineContext.Consumer>
@@ -86,9 +109,7 @@ class PresetButtons extends React.Component<PresetButtonsProps, {}> {
   ): (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void {
     return () => {
       if (!signature || !permissiveSignature) {
-        NotificationContext.warning(
-          getTranslation("presetButtons.mustWaitForSignatureGen", "You must wait for laptop signature to be generated")
-        );
+        NotificationContext.warning(mustWaitForSignatureGenText);
         return;
       }
       let presetsWithSameName = presetsOnlineContext.list.filter((preset: ApiPreset) => {
@@ -98,21 +119,15 @@ class PresetButtons extends React.Component<PresetButtonsProps, {}> {
         );
       });
       if (presetsWithSameName.length > 0) {
-        NotificationContext.warning(
-          getTranslation(
-            "presetButtons.presetWithSameNameAlreadyExistOnline",
-            "A preset with the same name already exist online"
-          )
-        );
+        NotificationContext.warning(presetWithSameNameAlreadyExistOnlineText);
         return;
       }
+      const uploadPresetConfirmationTextVariable = variablesInTranslation(uploadPresetConfirmationText, {
+        preset: this.props.presetName,
+      });
       window
         .require("uikit")
-        .modal.confirm(
-          getTranslation("presetButtons.uploadPresetConfirmation", "Are you sure to upload the preset {preset}?", {
-            preset: this.props.presetName,
-          })
-        )
+        .modal.confirm(uploadPresetConfirmationTextVariable)
         .then(() => {
           presetsOnlineContext
             .uploadPreset({
@@ -122,17 +137,14 @@ class PresetButtons extends React.Component<PresetButtonsProps, {}> {
               ryzenAdjArguments: this.props.preset,
             })
             .then(value => {
-              NotificationContext.success(
-                getTranslation("presetButtons.uploadSucceed", "Preset {preset} has been uploaded", {
-                  preset: value.name,
-                })
-              );
+              const uploadSucceedTextVariable = variablesInTranslation(uploadSucceedText, {
+                preset: value.name,
+              });
+              NotificationContext.success(uploadSucceedTextVariable);
               presetsOnlineContext.update();
             })
             .catch(() => {
-              NotificationContext.error(
-                getTranslation("presetButtons.uploadError", "An error occured while uploading the preset")
-              );
+              NotificationContext.error(uploadErrorText);
             });
         });
     };
@@ -143,11 +155,10 @@ class PresetButtons extends React.Component<PresetButtonsProps, {}> {
   ): (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void {
     return () => {
       ryzenControllerAppContext.updateCurrentSettings(this.props.preset);
-      NotificationContext.talk(
-        getTranslation("presetButtons.loadedPreset", "Preset {preset} has been loaded.", {
-          preset: this.props.presetName,
-        })
-      );
+      const loadedPresetTextVariable = variablesInTranslation(loadedPresetText, {
+        preset: this.props.presetName,
+      });
+      NotificationContext.talk(loadedPresetTextVariable);
     };
   }
 
@@ -155,12 +166,11 @@ class PresetButtons extends React.Component<PresetButtonsProps, {}> {
     ryzenControllerAppContext: RyzenControllerAppContextType
   ): (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void {
     return () => {
+      const confirmDeletionTextVariable = variablesInTranslation(confirmDeletionText, {
+        preset: this.props.presetName,
+      });
       require("uikit")
-        .modal.confirm(
-          getTranslation("presetButtons.confirmDeletion", 'Are you sure to delete "{preset}"?', {
-            preset: this.props.presetName,
-          })
-        )
+        .modal.confirm(confirmDeletionTextVariable)
         .then(() => {
           ryzenControllerAppContext.removePreset(this.props.presetName);
         })
diff --git a/src/components/PresetListEmpty.tsx b/src/components/PresetListEmpty.tsx
index f9120f9..6335de5 100644
--- a/src/components/PresetListEmpty.tsx
+++ b/src/components/PresetListEmpty.tsx
@@ -2,6 +2,14 @@ import * as React from "react";
 import LightModeContext from "../contexts/LightModeContext";
 import { getTranslation } from "../contexts/LocaleContext";
 
+const youDontHaveAnyText = getTranslation("presetListEmpty.youDontHaveAny", "You don't have any preset yet");
+const sentencePart1Text = getTranslation("presetListEmpty.sentencePart1", "You can create one by using the");
+const createPresetBtnText = getTranslation("presetListEmpty.createPresetBtn", "Create preset");
+const sentencePart2Text = getTranslation(
+  "presetListEmpty.sentencePart2",
+  "button available on Ryzen Adj settings tabs (CPU, GPU, ...)."
+);
+
 function PresetListEmpty() {
   return (
     <LightModeContext.Consumer>
@@ -10,18 +18,13 @@ function PresetListEmpty() {
         return (
           <div className={`uk-flex uk-flex-center uk-margin-left uk-margin-right`}>
             <div className={`uk-card uk-card-default uk-card-body uk-width-1-2@m ${classes}`}>
-              <h3 className="uk-card-title">
-                {getTranslation("presetListEmpty.youDontHaveAny", "You don't have any preset yet")}
-              </h3>
+              <h3 className="uk-card-title">{youDontHaveAnyText}</h3>
               <p>
-                {getTranslation("presetListEmpty.sentencePart1", "You can create one by using the")}
+                {sentencePart1Text}
                 <button className="uk-button uk-button-default uk-margin-small-left uk-margin-small-right">
-                  {getTranslation("presetListEmpty.createPresetBtn", "Create preset")}
+                  {createPresetBtnText}
                 </button>
-                {getTranslation(
-                  "presetListEmpty.sentencePart2",
-                  "button available on Ryzen Adj settings tabs (CPU, GPU, ...)."
-                )}
+                {sentencePart2Text}
               </p>
             </div>
           </div>
diff --git a/src/components/PresetOnline.tsx b/src/components/PresetOnline.tsx
index 836ba81..d6e94c2 100644
--- a/src/components/PresetOnline.tsx
+++ b/src/components/PresetOnline.tsx
@@ -6,6 +6,24 @@ import PresetOnlineLine from "../components/PresetOnlineLine";
 import { isPresetValid } from "../contexts/RyzenControllerAppContext";
 import { getTranslation } from "../contexts/LocaleContext";
 
+const errorLoadingPresetsText = getTranslation("PresetOnline.errorLoadingPresets", "Unable to load presets.");
+const retryLoadingPresetListBtnText = getTranslation("PresetOnline.retryLoadingPresetListBtn", "Retry");
+const loadPresetListBtnText = getTranslation("PresetOnline.loadPresetListBtn", "Load preset list");
+const uploadBtnText = getTranslation("PresetOnline.uploadBtn", "Upload");
+const sentencePart2Text = getTranslation("PresetOnline.sentencePart2", "button available on your presets.");
+const pleaseCheckInternetConnectionText = getTranslation(
+  "PresetOnline.pleaseCheckInternetConnection",
+  "Please check your internet connection."
+);
+const listNotLoadedYetText = getTranslation(
+  "PresetOnline.listNotLoadedYet",
+  "List hasn't been loaded or there is no online preset yet."
+);
+const sentencePart1Text = getTranslation(
+  "PresetOnline.sentencePart1",
+  "You can share your own preset by clicking on the"
+);
+
 function PresetOnline() {
   return (
     <SysInfoContext.Consumer>
@@ -28,14 +46,14 @@ function PresetOnline() {
                 })}
               </ul>
             ) : presetsOnlineContext.error && !presetsOnlineContext.loading ? (
-              <Card title={getTranslation("PresetOnline.errorLoadingPresets", "Unable to load presets.")}>
-                {getTranslation("PresetOnline.pleaseCheckInternetConnection", "Please check your internet connection.")}
+              <Card title={errorLoadingPresetsText}>
+                {pleaseCheckInternetConnectionText}
                 <br />
                 <button
                   className="uk-margin-small-bottom uk-button uk-button-small uk-button-default"
                   onClick={() => presetsOnlineContext.update()}
                 >
-                  {getTranslation("PresetOnline.retryLoadingPresetListBtn", "Retry")}
+                  {retryLoadingPresetListBtnText}
                 </button>
               </Card>
             ) : presetsOnlineContext.loading || !sysInfoContext?.signature || !sysInfoContext?.permissiveSignature ? (
@@ -43,27 +61,22 @@ function PresetOnline() {
                 <div uk-spinner="ratio: 2"></div>
               </div>
             ) : (
-              <Card
-                title={getTranslation(
-                  "PresetOnline.listNotLoadedYet",
-                  "List hasn't been loaded or there is no online preset yet."
-                )}
-              >
+              <Card title={listNotLoadedYetText}>
                 <button
                   className="uk-margin-small-bottom uk-button uk-button-small uk-button-default"
                   onClick={() => presetsOnlineContext.update()}
                 >
-                  {getTranslation("PresetOnline.loadPresetListBtn", "Load preset list")}
+                  {loadPresetListBtnText}
                 </button>
                 <br />
-                {getTranslation("PresetOnline.sentencePart1", "You can share your own preset by clicking on the")}
+                {sentencePart1Text}
                 <button
                   className="uk-margin-small-right uk-margin-small-left uk-button uk-button-small uk-button-default"
                   onClick={() => false}
                 >
-                  {getTranslation("PresetOnline.uploadBtn", "Upload")}
+                  {uploadBtnText}
                 </button>
-                {getTranslation("PresetOnline.sentencePart2", "button available on your presets.")}
+                {sentencePart2Text}
               </Card>
             );
           }}
diff --git a/src/components/PresetOnlineButtons.tsx b/src/components/PresetOnlineButtons.tsx
index a78754e..bec51af 100644
--- a/src/components/PresetOnlineButtons.tsx
+++ b/src/components/PresetOnlineButtons.tsx
@@ -2,7 +2,31 @@ import * as React from "react";
 import RyzenControllerAppContext, { isPresetValid } from "../contexts/RyzenControllerAppContext";
 import NotificationContext from "../contexts/NotificationContext";
 import PresetsOnlineContext from "../contexts/PresetsOnline";
-import { getTranslation } from "../contexts/LocaleContext";
+import { getTranslation, variablesInTranslation } from "../contexts/LocaleContext";
+
+const downloadText = getTranslation("presetOnlineBtn.download", "Download");
+const presetLoadedText = getTranslation("presetOnlineBtn.presetLoaded", 'Preset "{presetName}" has been loaded');
+const loadText = getTranslation("presetOnlineBtn.load", "Load");
+const downloadTooltipText = getTranslation(
+  "presetOnlineBtn.downloadTooltip",
+  "Will save the preset to your local preset."
+);
+const presetSameNameExistText = getTranslation(
+  "presetOnlineBtn.presetSameNameExist",
+  "You already have a preset with the same name"
+);
+const presetInvalidOrObsoleteText = getTranslation(
+  "presetOnlineBtn.presetInvalidOrObsolete",
+  'Preset "{presetName}" is invalid or obsolete'
+);
+const presetDownloadedText = getTranslation(
+  "presetOnlineBtn.presetDownloaded",
+  'Preset "{presetName}" has been downloaded'
+);
+const loadTooltipText = getTranslation(
+  "presetOnlineBtn.loadTooltip",
+  "Without saving the preset, it will be loaded in RyzenAdj's tabs but not applied."
+);
 
 type PresetOnlineButtonsProps = {
   presetName: string;
@@ -20,58 +44,41 @@ function PresetOnlineButtons(props: PresetOnlineButtonsProps) {
           <div className="uk-button-group uk-margin-right">
             <button
               className="uk-button uk-button-small uk-button-primary"
-              uk-tooltip={`title: ${getTranslation(
-                "presetOnlineBtn.downloadTooltip",
-                "Will save the preset to your local preset."
-              )}`}
+              uk-tooltip={`title: ${downloadTooltipText}`}
               onClick={() => {
                 if (ryzenControllerAppContext.presets.hasOwnProperty(props.presetName)) {
-                  NotificationContext.warning(
-                    getTranslation(
-                      "presetOnlineBtn.presetSameNameExist",
-                      "You already have a preset with the same name"
-                    )
-                  );
+                  NotificationContext.warning(presetSameNameExistText);
                   return;
                 }
                 if (!isPresetValid(props.preset)) {
-                  const presetInvalidOrObsoleteMessage = getTranslation(
-                    "presetOnlineBtn.presetInvalidOrObsolete",
-                    'Preset "{presetName}" is invalid or obsolete',
-                    { presetName: props.presetName }
-                  );
-                  NotificationContext.error(presetInvalidOrObsoleteMessage);
+                  const presetInvalidOrObsoleteTextVariable = variablesInTranslation(presetInvalidOrObsoleteText, {
+                    presetName: props.presetName,
+                  });
+                  NotificationContext.error(presetInvalidOrObsoleteTextVariable);
                   return;
                 }
                 ryzenControllerAppContext.addPreset(props.presetName, props.preset);
-                const presetDownloadedMessage = getTranslation(
-                  "presetOnlineBtn.presetDownloaded",
-                  'Preset "{presetName}" has been downloaded',
-                  { presetName: props.presetName }
-                );
-                NotificationContext.talk(presetDownloadedMessage);
+                const presetDownloadedTextVariable = variablesInTranslation(presetDownloadedText, {
+                  presetName: props.presetName,
+                });
+                NotificationContext.talk(presetDownloadedTextVariable);
                 return;
               }}
             >
-              {getTranslation("presetOnlineBtn.download", "Download")}
+              {downloadText}
             </button>
             <button
               className="uk-button uk-button-small uk-button-default"
-              uk-tooltip={`title: ${getTranslation(
-                "presetOnlineBtn.loadTooltip",
-                "Without saving the preset, it will be loaded in RyzenAdj's tabs but not applied."
-              )}`}
+              uk-tooltip={`title: ${loadTooltipText}`}
               onClick={() => {
                 ryzenControllerAppContext.updateCurrentSettings(props.preset);
-                const presetloadedMessage = getTranslation(
-                  "presetOnlineBtn.presetDownloaded",
-                  'Preset "{presetName}" has been loaded',
-                  { presetName: props.presetName }
-                );
-                NotificationContext.talk(presetloadedMessage);
+                const presetloadedTextVariable = variablesInTranslation(presetLoadedText, {
+                  presetName: props.presetName,
+                });
+                NotificationContext.talk(presetloadedTextVariable);
               }}
             >
-              {getTranslation("presetOnlineBtn.load", "Load")}
+              {loadText}
             </button>
           </div>
         )}
diff --git a/src/components/RyzenAdjBottomBar.tsx b/src/components/RyzenAdjBottomBar.tsx
index 6a318b0..54a6c76 100644
--- a/src/components/RyzenAdjBottomBar.tsx
+++ b/src/components/RyzenAdjBottomBar.tsx
@@ -4,10 +4,22 @@ import Notification from "../contexts/NotificationContext";
 import { createRyzenAdjCommandLine, executeRyzenAdj } from "../contexts/RyzenAdjContext";
 import LightModeContext from "../contexts/LightModeContext";
 import NotificationContext from "../contexts/NotificationContext";
-import { getTranslation } from "../contexts/LocaleContext";
+import { getTranslation, variablesInTranslation } from "../contexts/LocaleContext";
 
 const UIkit = require("uikit");
 
+const applyText = getTranslation("ryzenAdjBottomBar.apply", "Apply");
+const createPresetText = getTranslation("ryzenAdjBottomBar.createPreset", "Create preset");
+const resetText = getTranslation("ryzenAdjBottomBar.reset", "Reset");
+const promptText = getTranslation("ryzenAdjBottomBar.prompt", "New preset name");
+const mustProvideNameText = getTranslation("ryzenAdjBottomBar.mustProvideName", "You must provide a name");
+const presetCreatedText = getTranslation("ryzenAdjBottomBar.presetCreated", 'Preset "{newPresetName}" created');
+const invalidPresetText = getTranslation("ryzenAdjBottomBar.invalidPreset", "Unable to apply invalid preset");
+const presetWithSameNameExistText = getTranslation(
+  "ryzenAdjBottomBar.presetWithSameNameExist",
+  'A preset with the name "{newPresetName}" already exist'
+);
+
 class RyzenAdjBottomBar extends React.PureComponent {
   render() {
     return (
@@ -23,19 +35,19 @@ class RyzenAdjBottomBar extends React.PureComponent {
                 return (
                   <div className={`uk-padding-small uk-position-fixed uk-position-bottom-right ${classes}`}>
                     <button className="uk-button uk-button-primary" onClick={this.apply(ryzenControllerAppContext)}>
-                      {getTranslation("ryzenAdjBottomBar.apply", "Apply")}
+                      {applyText}
                     </button>
                     <button
                       className="uk-button uk-button-default uk-margin-left"
                       onClick={this.createNewPreset(ryzenControllerAppContext)}
                     >
-                      {getTranslation("ryzenAdjBottomBar.createPreset", "Create preset")}
+                      {createPresetText}
                     </button>
                     <button
                       className="uk-button uk-button-default uk-margin-left"
                       onClick={this.reset(ryzenControllerAppContext)}
                     >
-                      {getTranslation("ryzenAdjBottomBar.reset", "Reset")}
+                      {resetText}
                     </button>
                   </div>
                 );
@@ -51,8 +63,8 @@ class RyzenAdjBottomBar extends React.PureComponent {
     ryzenControllerAppContext: RyzenControllerAppContextType
   ): (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void {
     return function() {
-      const promptMessage = getTranslation("ryzenAdjBottomBar.prompt", "New preset name");
-      const mustProvideNameMessage = getTranslation("ryzenAdjBottomBar.mustProvideName", "You must provide a name");
+      const promptMessage = promptText;
+      const mustProvideNameMessage = mustProvideNameText;
 
       UIkit.modal.prompt(promptMessage, "").then((newPresetName: string | null) => {
         if (newPresetName === null) {
@@ -60,20 +72,15 @@ class RyzenAdjBottomBar extends React.PureComponent {
         } else if (newPresetName.length <= 0) {
           Notification.warning(mustProvideNameMessage);
         } else if (ryzenControllerAppContext.presets.hasOwnProperty(newPresetName)) {
-          const presetWithSameNameExistMessage = getTranslation(
-            "ryzenAdjBottomBar.presetWithSameNameExist",
-            'A preset with the name "{newPresetName}" already exist',
-            { newPresetName: newPresetName }
-          );
-          Notification.warning(presetWithSameNameExistMessage);
+          const presetWithSameNameExistTextVariable = variablesInTranslation(presetWithSameNameExistText, {
+            newPresetName: newPresetName,
+          });
+          Notification.warning(presetWithSameNameExistTextVariable);
         } else {
           ryzenControllerAppContext.addPreset(newPresetName, ryzenControllerAppContext.currentSettings);
-          const presetCreatedMessage = getTranslation(
-            "ryzenAdjBottomBar.presetCreated",
-            'Preset "{newPresetName}" created',
-            { newPresetName: newPresetName }
-          );
-          Notification.success(presetCreatedMessage);
+
+          const presetCreatedTextVariable = variablesInTranslation(presetCreatedText, { newPresetName: newPresetName });
+          Notification.success(presetCreatedTextVariable);
         }
       });
     };
@@ -82,9 +89,7 @@ class RyzenAdjBottomBar extends React.PureComponent {
   apply(ryzenControllerAppContext: RyzenControllerAppContextType) {
     return function() {
       if (!isPresetValid(ryzenControllerAppContext.currentSettings)) {
-        NotificationContext.warning(
-          getTranslation("ryzenAdjBottomBar.invalidPreset", "Unable to apply invalid preset")
-        );
+        NotificationContext.warning(invalidPresetText);
         return;
       }
       ryzenControllerAppContext.updateLatestSettings();
diff --git a/src/components/SceneSelector.tsx b/src/components/SceneSelector.tsx
index cc5de50..f16b932 100644
--- a/src/components/SceneSelector.tsx
+++ b/src/components/SceneSelector.tsx
@@ -3,6 +3,13 @@ import { Link, Switch, Route } from "react-router-dom";
 import LightModeContext from "../contexts/LightModeContext";
 import { getTranslation } from "../contexts/LocaleContext";
 
+const cpuTitleText = getTranslation("sceneSelector.cpuTitle", "CPU");
+const gpuTitleText = getTranslation("sceneSelector.gpuTitle", "GPU");
+const powerTitleText = getTranslation("sceneSelector.powerTitle", "Power");
+const presetsTitleText = getTranslation("sceneSelector.presetsTitle", "Presets");
+const settingsTitleText = getTranslation("sceneSelector.settingsTitle", "Settings");
+const releasesTitleText = getTranslation("sceneSelector.releasesTitle", "Releases");
+
 function Tabs(props: { tabName: string; tabLocation: string; currentLocation: string }) {
   let isActive = "";
   if (props.currentLocation === props.tabLocation) {
@@ -30,38 +37,18 @@ function SceneSelector() {
 
                   return (
                     <ul className="uk-tab uk-margin-remove-bottom">
-                      <Tabs
-                        tabName={getTranslation("sceneSelector.cpuTitle", "CPU")}
-                        tabLocation="/cpu"
-                        currentLocation={currentLocation}
-                      />
-                      <Tabs
-                        tabName={getTranslation("sceneSelector.gpuTitle", "GPU")}
-                        tabLocation="/gpu"
-                        currentLocation={currentLocation}
-                      />
-                      <Tabs
-                        tabName={getTranslation("sceneSelector.powerTitle", "Power")}
-                        tabLocation="/power"
-                        currentLocation={currentLocation}
-                      />
-                      <Tabs
-                        tabName={getTranslation("sceneSelector.presetsTitle", "Presets")}
-                        tabLocation="/presets"
-                        currentLocation={currentLocation}
-                      />
-                      <Tabs
-                        tabName={getTranslation("sceneSelector.settingsTitle", "Settings")}
-                        tabLocation="/settings"
-                        currentLocation={currentLocation}
-                      />
+                      <Tabs tabName={cpuTitleText} tabLocation="/cpu" currentLocation={currentLocation} />
+                      <Tabs tabName={gpuTitleText} tabLocation="/gpu" currentLocation={currentLocation} />
+                      <Tabs tabName={powerTitleText} tabLocation="/power" currentLocation={currentLocation} />
+                      <Tabs tabName={presetsTitleText} tabLocation="/presets" currentLocation={currentLocation} />
+                      <Tabs tabName={settingsTitleText} tabLocation="/settings" currentLocation={currentLocation} />
                       <li>
                         <a
                           href="https://gitlab.com/ryzen-controller-team/ryzen-controller/-/releases"
                           onClick={openExternal("https://gitlab.com/ryzen-controller-team/ryzen-controller/-/releases")}
                         >
                           <span uk-icon="link"></span>
-                          {getTranslation("sceneSelector.releasesTitle", "Releases")}
+                          {releasesTitleText}
                         </a>
                       </li>
                     </ul>
diff --git a/src/components/SettingForm.tsx b/src/components/SettingForm.tsx
index 90a33fb..2005707 100644
--- a/src/components/SettingForm.tsx
+++ b/src/components/SettingForm.tsx
@@ -1,6 +1,10 @@
 import * as React from "react";
 import { getTranslation } from "../contexts/LocaleContext";
 
+const currentPathText = getTranslation("settingForm.currentPath", "Current path:");
+const browseBtnText = getTranslation("settingForm.browseBtn", "Browse");
+const windowsBinFileTypeText = getTranslation("settingForm.windowsBinFileType", "Windows Binary");
+
 type ElectronFileDialogType = {
   filePaths?: Array<string>;
 };
@@ -47,10 +51,10 @@ class SettingForm extends React.PureComponent<SettingFormProps> {
         return (
           <React.Fragment>
             <p className="uk-margin-small-bottom">
-              {getTranslation("settingForm.currentPath", "Current path:")} <code>{path || "default"}</code>
+              {currentPathText} <code>{path || "default"}</code>
             </p>
             <button onClick={this.findFile.bind(this)} className="uk-button uk-button-default">
-              {getTranslation("settingForm.browseBtn", "Browse")}
+              {browseBtnText}
             </button>
           </React.Fragment>
         );
@@ -67,7 +71,7 @@ class SettingForm extends React.PureComponent<SettingFormProps> {
         ? []
         : [
             {
-              name: getTranslation("settingForm.windowsBinFileType", "Windows Binary"),
+              name: windowsBinFileTypeText,
               extensions: ["exe"],
             },
           ];
diff --git a/src/components/SysInfoCards.tsx b/src/components/SysInfoCards.tsx
index a5b335a..e3dc2a5 100644
--- a/src/components/SysInfoCards.tsx
+++ b/src/components/SysInfoCards.tsx
@@ -1,7 +1,18 @@
 import * as React from "react";
 import Card from "./Card";
 import SysInfoContext from "../contexts/SysInfoContext";
-import { getTranslation } from "../contexts/LocaleContext";
+import { getTranslation, variablesInTranslation } from "../contexts/LocaleContext";
+
+const unableToGetSysInfoText = getTranslation("sysInfoCards.unableToGetSysInfo", "Unable to get system info:");
+const basicInfoTitleText = getTranslation("sysInfoCards.basicInfoTitle", "Basic Information");
+const biosVersionText = getTranslation("sysInfoCards.biosVersion", "Bios version:");
+const CPUInfoTitleText = getTranslation("sysInfoCards.CPUInfoTitle", "CPU Information");
+const cpuPerfDescText = getTranslation(
+  "sysInfoCards.cpuPerfDesc",
+  "{speedmax}Ghz on {physicalCores} cores, {cores} threads."
+);
+const GPUInfoTitleText = getTranslation("sysInfoCards.GPUInfoTitle", "GPU #{index} Information");
+const gpuPerfDescText = getTranslation("sysInfoCards.gpuPerfDesc", "{ram}Mb (Dynamic vram: {dyn}).");
 
 function SysInfoCards() {
   return (
@@ -10,7 +21,7 @@ function SysInfoCards() {
         if (sysInfoContext.error) {
           return (
             <Card title="Error">
-              {getTranslation("sysInfoCards.unableToGetSysInfo", "Unable to get system info:")}
+              {unableToGetSysInfoText}
               <br />
               {sysInfoContext.error}
             </Card>
@@ -24,41 +35,36 @@ function SysInfoCards() {
         const bios = sysInfoContext.bios;
         return (
           <div className="uk-margin-small-right uk-margin-small-left uk-flex uk-flex-center uk-flex-around uk-flex-wrap">
-            <Card title={getTranslation("sysInfoCards.basicInfoTitle", "Basic Information")}>
+            <Card title={basicInfoTitleText}>
               {system === false || mem === false || bios === false ? (
                 <div uk-spinner=""></div>
               ) : (
                 <React.Fragment>
                   {system.manufacturer} {system.model} {system.version}
                   <br />
-                  {getTranslation("sysInfoCards.biosVersion", "Bios version:")} {bios.version}{" "}
-                  {bios.revision ? `rev${bios.revision}` : ""}
+                  {biosVersionText} {bios.version} {bios.revision ? `rev${bios.revision}` : ""}
                   <br />
                   {(mem.total / (1024 * 1024 * 1024)).toFixed(2)}Gb Ram
                 </React.Fragment>
               )}
             </Card>
-            <Card title={getTranslation("sysInfoCards.CPUInfoTitle", "CPU Information")}>
+            <Card title={CPUInfoTitleText}>
               {cpu === false ? (
                 <div uk-spinner=""></div>
               ) : (
                 <React.Fragment>
                   {cpu.manufacturer} {cpu.brand}
                   <br />
-                  {getTranslation(
-                    "sysInfoCards.cpuPerfDesc",
-                    "{speedmax}Ghz on {physicalCores} cores, {cores} threads.",
-                    {
-                      speedmax: cpu.speedmax,
-                      physicalCores: cpu.physicalCores.toString(),
-                      cores: cpu.cores.toString(),
-                    }
-                  )}
+                  {variablesInTranslation(cpuPerfDescText, {
+                    speedmax: cpu.speedmax,
+                    physicalCores: cpu.physicalCores.toString(),
+                    cores: cpu.cores.toString(),
+                  })}
                 </React.Fragment>
               )}
             </Card>
             {gpu === false ? (
-              <Card title={getTranslation("sysInfoCards.GPUInfoTitle", "GPU #{index} Information", { index: "0" })}>
+              <Card title={variablesInTranslation(GPUInfoTitleText, { index: "0" })}>
                 <div uk-spinner=""></div>
               </Card>
             ) : (
@@ -66,13 +72,13 @@ function SysInfoCards() {
                 {gpu.controllers.map((controller, index) => (
                   <Card
                     key={`gpu-${index}`}
-                    title={getTranslation("sysInfoCards.GPUInfoTitle", "GPU #{index} Information", {
+                    title={variablesInTranslation(GPUInfoTitleText, {
                       index: `${index}`,
                     })}
                   >
                     {controller.vendor} {controller.model}
                     <br />
-                    {getTranslation("sysInfoCards.gpuPerfDesc", "{ram}Mb (Dynamic vram: {dyn}).", {
+                    {variablesInTranslation(gpuPerfDescText, {
                       ram: controller.vram.toString(),
                       dyn: controller.vramDynamic.toString(),
                     })}
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 5d41f39..eb1a5cd 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -5,6 +5,9 @@ import LightModeContext from "../contexts/LightModeContext";
 import { getTranslation } from "../contexts/LocaleContext";
 import AppVersion from "../contexts/AppVersion";
 
+const beerText = getTranslation("topbar.beer", "Buy us some beers ❤️");
+const discordText = getTranslation("topbar.discord", "Join us on discord");
+
 function TopBar() {
   return (
     <header>
@@ -25,13 +28,13 @@ function TopBar() {
       />
       <Badge
         className="uk-margin-left"
-        value={getTranslation("topbar.beer", "Buy us some beers ❤️")}
+        value={beerText}
         onClick={openExternal("https://www.patreon.com/ryzencontrollerteam")}
         background="#888888"
       />
       <Badge
         className="uk-margin-left"
-        value={getTranslation("topbar.discord", "Join us on discord")}
+        value={discordText}
         onClick={openExternal("https://discord.gg/EahayUv")}
         background="#7289da"
       />
diff --git a/src/contexts/AppVersion.tsx b/src/contexts/AppVersion.tsx
index ea1e348..a63a305 100644
--- a/src/contexts/AppVersion.tsx
+++ b/src/contexts/AppVersion.tsx
@@ -3,4 +3,3 @@ export default {
   semver: process.env?.REACT_APP_VERSION || "dev",
   isDev: process.env?.REACT_APP_VERSION?.indexOf("dev") !== -1,
 };
-
diff --git a/src/contexts/LocaleContext.tsx b/src/contexts/LocaleContext.tsx
index 1231817..0771ee9 100644
--- a/src/contexts/LocaleContext.tsx
+++ b/src/contexts/LocaleContext.tsx
@@ -9,7 +9,6 @@ const localeSettingsKey = `${AppVersion.string}.locale`;
 const LocaleContext = createContext({
   is: "en",
   change: (to: AvailableLanguages): void => {},
-  getTranslation: (id: string, fallback?: string, variables?: Record<string, string>): string => "",
 });
 
 LocaleContext.displayName = "LocaleContext";
@@ -45,7 +44,7 @@ function addKeyToLocale(_id: string, _currentLocale: string, _fallback: string |
       if (currentLocale === "en" && fallback) {
         localeTranslation[id] = fallback;
       }
-      fs.writeFile(localeFile, JSON.stringify(localeTranslation, null, 4), function(err: string | null) {
+      fs.writeFile(localeFile, JSON.stringify(localeTranslation, null, 2), function(err: string | null) {
         electronSettings.delete("lock");
         if (err) {
           console.log("error", err);
@@ -57,6 +56,22 @@ function addKeyToLocale(_id: string, _currentLocale: string, _fallback: string |
   }, 1000);
 }
 
+/**
+ * Will replace the variables in translated sentences.
+ *
+ * @param sentence The return value of getTranslation() below.
+ * @param variables The variables to be replaced.
+ */
+function variablesInTranslation(sentence: string, variables: Record<string, string>): string {
+  for (const variable in variables) {
+    if (variables.hasOwnProperty(variable)) {
+      const value = variables[variable];
+      sentence = sentence.replace(new RegExp(`{${variable}}`, "g"), value);
+    }
+  }
+  return sentence;
+}
+
 /**
  * Will return the translated message.
  *
@@ -75,7 +90,9 @@ function addKeyToLocale(_id: string, _currentLocale: string, _fallback: string |
  * @param variables Variables to replace in the sentence
  */
 function getTranslation(id: string, fallback?: string, variables?: Record<string, string>): string {
-  const currentLocale = electronSettings.get(localeSettingsKey) ? (electronSettings.get(localeSettingsKey) as AvailableLanguages) : "en";
+  const currentLocale = electronSettings.get(localeSettingsKey)
+    ? (electronSettings.get(localeSettingsKey) as AvailableLanguages)
+    : "en";
   var sentence: string | undefined = LocaleTranslations[currentLocale][id];
 
   if (!sentence && sentence !== "") {
@@ -91,16 +108,11 @@ function getTranslation(id: string, fallback?: string, variables?: Record<string
   }
 
   if (variables) {
-    for (const variable in variables) {
-      if (variables.hasOwnProperty(variable)) {
-        const value = variables[variable];
-        sentence = sentence.replace(new RegExp(`{${variable}}`, "g"), value);
-      }
-    }
+    variablesInTranslation(sentence, variables);
   }
 
   return sentence;
 }
 
-export { localeSettingsKey, getTranslation };
+export { localeSettingsKey, getTranslation, variablesInTranslation };
 export default LocaleContext;
diff --git a/src/contexts/RyzenControllerAppContext.tsx b/src/contexts/RyzenControllerAppContext.tsx
index 31d7711..bb7b3f2 100644
--- a/src/contexts/RyzenControllerAppContext.tsx
+++ b/src/contexts/RyzenControllerAppContext.tsx
@@ -4,7 +4,7 @@ import { isNumber } from "util";
 import compareVersions from "compare-versions";
 import NotificationContext from "./NotificationContext";
 import { getTranslation } from "./LocaleContext";
-import AppVersion from './AppVersion';
+import AppVersion from "./AppVersion";
 
 const isDev = window.require("electron-is-dev");
 const electronSettings = window.require("electron-settings");
@@ -12,6 +12,16 @@ const reApplyPeriodicallySettingsKey = `${AppVersion.string}.reApplyPeriodically
 const appContextSettingsKey = `${AppVersion.string}.appContext`;
 const fileSystem = window.require("fs");
 
+const invalidPresetText = getTranslation("appContext.invalidPreset", "Unable to apply invalid preset");
+const newReleaseAvailableText = getTranslation(
+  "appContext.newReleaseAvailable",
+  "A new release is available, please check the release tab."
+);
+const ryzenAdjPathWrongPathText = getTranslation(
+  "appContext.ryzenAdjPath.wrongPath",
+  "Path to ryzenadj.exe is wrong, please fix it in settings tab."
+);
+
 const defaultPreset = {
   "--slow-time=": { enabled: false, value: getOptionDefinition("--slow-time=").default },
   "--psi0-current=": { enabled: false, value: getOptionDefinition("--psi0-current=").default },
@@ -208,12 +218,7 @@ const RyzenControllerSettingsDefinitions: RyzenControllerSettingDefinitionList =
           path = getRyzenAdjExecutablePath();
         }
         if (!fileSystem.existsSync(path)) {
-          reject(
-            getTranslation(
-              "appContext.ryzenAdjPath.wrongPath",
-              "Path to ryzenadj.exe is wrong, please fix it in settings tab."
-            )
-          );
+          reject(ryzenAdjPathWrongPathText);
         }
         resolve(true);
       });
@@ -365,7 +370,7 @@ const executeRyzenAdjUsingPreset = function(presetName: string): boolean {
     return false;
   }
   if (!isPresetValid(presets[presetName])) {
-    NotificationContext.warning(getTranslation("appContext.invalidPreset", "Unable to apply invalid preset"));
+    NotificationContext.warning(invalidPresetText);
     return false;
   }
   executeRyzenAdj(createRyzenAdjCommandLine(presets[presetName]));
@@ -392,9 +397,7 @@ const checkIfNewerReleaseExist = function(): void {
     })
     .then((isNewReleaseExist: boolean) => {
       if (isNewReleaseExist) {
-        NotificationContext.talk(
-          getTranslation("appContext.newReleaseAvailable", "A new release is available, please check the release tab.")
-        );
+        NotificationContext.talk(newReleaseAvailableText);
       }
     })
     .catch(err => {
diff --git a/src/locales/ch.json b/src/locales/ch.json
index ec66bad..f217118 100644
--- a/src/locales/ch.json
+++ b/src/locales/ch.json
@@ -106,5 +106,14 @@
   "PresetOnline.retryLoadingPresetListBtn": "重试",
   "PresetOnline.pleaseCheckInternetConnection": "请检查您的互联网连接。",
   "presetButtons.uploadError": "上载预设时发生错误",
-  "presetLine.compatibility": "兼容性:"
+  "presetLine.compatibility": "兼容性:",
+  "appContext.invalidPreset": "无法套用无效的预设",
+  "appContext.ryzenAdjPath.wrongPath": "ryzenadj.exe的路径错误，请在“设置”选项卡中对其进行修复。",
+  "presetButtons.mustWaitForSignatureGen": "您必须等待生成笔记本电脑签名",
+  "presetOnlineBtn.presetLoaded": "预设 {presetName} 已加载",
+  "PresetsScene.errorWhileSendingVote": "发送投票时出错",
+  "ryzenAdjBottomBar.invalidPreset": "无法套用无效的预设",
+  "settingForm.windowsBinFileType": "Windows可执行文件",
+  "presetOnlineBtn.presetInvalidOrObsolete": "预设 {presetName} 无效或已过时",
+  "sysInfoCards.unableToGetSysInfo": "无法获取系统信息："
 }
diff --git a/src/locales/de.json b/src/locales/de.json
index 06a426f..3466fcf 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -106,5 +106,14 @@
   "PresetOnline.retryLoadingPresetListBtn": "Wiederholen",
   "PresetOnline.pleaseCheckInternetConnection": "Bitte überprüfe deine Internetverbindung.",
   "presetButtons.uploadError": "Beim Hochladen der Voreinstellung ist ein Fehler aufgetreten",
-  "presetLine.compatibility": "Kompatibilität:"
+  "presetLine.compatibility": "Kompatibilität:",
+  "appContext.invalidPreset": "Ungültig voreingestellte Anwendung nicht möglich",
+  "appContext.ryzenAdjPath.wrongPath": "Der Pfad zu ryzenadj.exe ist falsch. Bitte korrigieren Sie ihn auf der Registerkarte Einstellungen.",
+  "ryzenAdjBottomBar.invalidPreset": "Ungültig voreingestellte Anwendung nicht möglich",
+  "presetButtons.mustWaitForSignatureGen": "Sie müssen warten, bis die Laptop-Signatur generiert wurde",
+  "sysInfoCards.unableToGetSysInfo": "Systeminformationen können nicht abgerufen werden:",
+  "settingForm.windowsBinFileType": "Windows ausführbare Datei",
+  "presetOnlineBtn.presetLoaded": "Preset {presetName} wurde geladen",
+  "presetOnlineBtn.presetInvalidOrObsolete": "Preset \"{presetName}\" ist ungültig oder veraltet",
+  "PresetsScene.errorWhileSendingVote": "Fehler beim Senden der Abstimmung"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 42d943b..c7f5b7c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -106,5 +106,14 @@
   "PresetOnline.retryLoadingPresetListBtn": "Retry",
   "PresetOnline.pleaseCheckInternetConnection": "Please check your internet connection.",
   "presetButtons.uploadError": "An error occured while uploading the preset",
-  "presetLine.compatibility": "Compatibility:"
+  "presetLine.compatibility": "Compatibility:",
+  "appContext.invalidPreset": "Unable to apply invalid preset",
+  "presetOnlineBtn.presetInvalidOrObsolete": "Preset \"{presetName}\" is invalid or obsolete",
+  "PresetsScene.errorWhileSendingVote": "Error while sending vote",
+  "sysInfoCards.unableToGetSysInfo": "Unable to get system info:",
+  "settingForm.windowsBinFileType": "Windows Binary",
+  "appContext.ryzenAdjPath.wrongPath": "Path to ryzenadj.exe is wrong, please fix it in settings tab.",
+  "ryzenAdjBottomBar.invalidPreset": "Unable to apply invalid preset",
+  "presetOnlineBtn.presetLoaded": "Preset \"{presetName}\" has been loaded",
+  "presetButtons.mustWaitForSignatureGen": "You must wait for laptop signature to be generated"
 }
diff --git a/src/locales/es.json b/src/locales/es.json
index 50bac76..e86fadb 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -105,5 +105,16 @@
   "PresetOnline.retryLoadingPresetListBtn": "Reintentar",
   "PresetOnline.pleaseCheckInternetConnection": "Verifique su conexión a Internet",
   "presetButtons.uploadError": "Se produjo un error al cargar el preset",
-  "presetLine.compatibility": "Compatibilidad:"
+  "presetLine.compatibility": "Compatibilidad:",
+  "ryzenAdj.minFclkFrequency.desc": "Infinity Fabric es el término de marketing de AMD para la conexión de bus que conecta los troqueles del procesador (GPU / CPU). Esto define el límite mínimo de reloj del bus.",
+  "notification.settingsSaveSuccess": "La configuración se ha guardado correctamente",
+  "appContext.invalidPreset": "No se puede aplicar el preajuste no válido",
+  "appContext.ryzenAdjPath.wrongPath": "La ruta a ryzenadj.exe es incorrecta, corríjala en la pestaña de configuración.",
+  "ryzenAdjBottomBar.invalidPreset": "No se puede aplicar el preajuste no válido",
+  "presetOnlineBtn.presetLoaded": "Se ha cargado el preajuste {presetName}",
+  "presetOnlineBtn.presetInvalidOrObsolete": "El preajuste \"{presetName}\" es inválido u obsoleto",
+  "PresetsScene.errorWhileSendingVote": "Error al enviar voto",
+  "sysInfoCards.unableToGetSysInfo": "No se puede obtener información del sistema:",
+  "presetButtons.mustWaitForSignatureGen": "Debe esperar a que se genere la firma de la computadora portátil",
+  "settingForm.windowsBinFileType": "Ejecutable de Windows"
 }
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 0163118..17b4211 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -106,5 +106,14 @@
   "PresetOnline.retryLoadingPresetListBtn": "Réessayer",
   "PresetOnline.pleaseCheckInternetConnection": "Veuillez vérifier votre connexion internet.",
   "presetButtons.uploadError": "Une erreur est survenu lors de l'upload du preset",
-  "presetLine.compatibility": "Compatibilité :"
+  "presetLine.compatibility": "Compatibilité :",
+  "appContext.invalidPreset": "Preset corrompu, impossible de l'appliquer",
+  "presetOnlineBtn.presetInvalidOrObsolete": "Le preset \"{presetName}\" est invalide ou obsolète",
+  "PresetsScene.errorWhileSendingVote": "Erreur lors de l'envoi du vote",
+  "sysInfoCards.unableToGetSysInfo": "Impossible d'obtenir les informations système :",
+  "settingForm.windowsBinFileType": "Executable Windows",
+  "appContext.ryzenAdjPath.wrongPath": "Le chemin vers ryzenadj.exe est invalide, veuillez le corriger dans l'onglet paramètres.",
+  "ryzenAdjBottomBar.invalidPreset": "Preset corrompu, impossible de l'appliquer",
+  "presetOnlineBtn.presetLoaded": "Le preset \"{presetName}\" est chargé",
+  "presetButtons.mustWaitForSignatureGen": "Vous devez attendre que la signature de votre PC ai été généré."
 }
diff --git a/src/locales/tr.json b/src/locales/tr.json
index c59f68f..b7c7de8 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -106,5 +106,14 @@
   "PresetOnline.retryLoadingPresetListBtn": "Yeniden Dene",
   "PresetOnline.pleaseCheckInternetConnection": "Lütfen internet bağlantınızı kontrol edin.",
   "presetButtons.uploadError": "Ön ayar yüklenirken bir hata oluştu",
-  "presetLine.compatibility": "bağdaşma:"
+  "presetLine.compatibility": "bağdaşma:",
+  "appContext.invalidPreset": "Geçersiz önayar uygulanamıyor",
+  "appContext.ryzenAdjPath.wrongPath": "Ryzenadj.exe yolu yanlış, lütfen ayarlar sekmesinde düzeltin.",
+  "ryzenAdjBottomBar.invalidPreset": "Geçersiz önayar uygulanamıyor",
+  "presetButtons.mustWaitForSignatureGen": "Dizüstü bilgisayar imzasının oluşturulmasını beklemelisiniz",
+  "presetOnlineBtn.presetLoaded": "{PresetName} hazır ayarı yüklendi",
+  "PresetsScene.errorWhileSendingVote": "Oy gönderilirken hata oluştu",
+  "sysInfoCards.unableToGetSysInfo": "Sistem bilgisi alınamıyor:",
+  "settingForm.windowsBinFileType": "Windows yürütülebilir",
+  "presetOnlineBtn.presetInvalidOrObsolete": "Önceden ayarlanmış \"{presetName}\" geçersiz veya eski"
 }
diff --git a/src/scenes/PresetsScene.tsx b/src/scenes/PresetsScene.tsx
index 4e931e9..e636a9f 100644
--- a/src/scenes/PresetsScene.tsx
+++ b/src/scenes/PresetsScene.tsx
@@ -7,11 +7,22 @@ import PresetAutoApplyCards from "../components/PresetAutoApplyCards";
 import PresetOnline from "../components/PresetOnline";
 import NotificationContext from "../contexts/NotificationContext";
 import PresetsOnlineContext from "../contexts/PresetsOnline";
-import { getTranslation } from "../contexts/LocaleContext";
+import { getTranslation, variablesInTranslation } from "../contexts/LocaleContext";
 import AppVersion from "../contexts/AppVersion";
 const uikit = window.require("uikit");
 const electronSettings = window.require("electron-settings");
+
 const votedPresetsSettingsKey = `${AppVersion.string}.votedPresets`;
+const confirmVoteText = getTranslation("PresetsScene.confirmVote", "Are you sure to {vote} this preset?");
+const errorWhileSendingVoteText = getTranslation("PresetsScene.errorWhileSendingVote", "Error while sending vote");
+const onlinePresetTitleText = getTranslation("PresetsScene.onlinePresetTitle", "Online Presets");
+const localPresetTitleText = getTranslation("PresetsScene.localPresetTitle", "Local Presets");
+const autoApplyTitleText = getTranslation("PresetsScene.autoApplyTitle", "Auto apply preset");
+const updatingVotesText = getTranslation("PresetsScene.updatingVotes", "Updating votes...");
+const cantVoteTwiceSamePresetText = getTranslation(
+  "PresetsScene.cantVoteTwiceSamePreset",
+  "You can't vote twice for the same preset"
+);
 
 class PresetsScene extends React.Component<{}, PresetsOnlineContextType> {
   _isMounted = false;
@@ -94,33 +105,31 @@ class PresetsScene extends React.Component<{}, PresetsOnlineContextType> {
   }
 
   downvote(presetId: number): Promise<ApiPreset> {
-    if (this.isUserAlreadyVotedForThisPreset(presetId)) {
-      let message = getTranslation("PresetsScene.cantVoteTwiceSamePreset", "You can't vote twice for the same preset");
-      NotificationContext.warning(message);
-      return new Promise((res, rej) => {
-        rej(message);
-      });
-    }
-    let confirmMessage = getTranslation("PresetsScene.confirmVote", "Are you sure to {vote} this preset?", {
+    const confirmVoteTextVariable = variablesInTranslation(confirmVoteText, {
       vote: "👎",
     });
-    return uikit.modal.confirm(confirmMessage).then(() => {
+    if (this.isUserAlreadyVotedForThisPreset(presetId)) {
+      NotificationContext.warning(cantVoteTwiceSamePresetText);
+      return new Promise((res, rej) => {
+        rej(cantVoteTwiceSamePresetText);
+      });
+    }
+    return uikit.modal.confirm(confirmVoteTextVariable).then(() => {
       return this.vote(presetId, "down");
     });
   }
 
   upvote(presetId: number): Promise<ApiPreset> {
-    if (this.isUserAlreadyVotedForThisPreset(presetId)) {
-      let message = getTranslation("PresetsScene.cantVoteTwiceSamePreset", "You can't vote twice for the same preset");
-      NotificationContext.warning(message);
-      return new Promise((res, rej) => {
-        rej(message);
-      });
-    }
-    let confirmMessage = getTranslation("PresetsScene.confirmVote", "Are you sure to {vote} this preset?", {
+    const confirmVoteTextVariable = variablesInTranslation(confirmVoteText, {
       vote: "👍",
     });
-    return uikit.modal.confirm(confirmMessage).then(() => {
+    if (this.isUserAlreadyVotedForThisPreset(presetId)) {
+      NotificationContext.warning(cantVoteTwiceSamePresetText);
+      return new Promise((res, rej) => {
+        rej(cantVoteTwiceSamePresetText);
+      });
+    }
+    return uikit.modal.confirm(confirmVoteTextVariable).then(() => {
       return this.vote(presetId, "up");
     });
   }
@@ -141,7 +150,7 @@ class PresetsScene extends React.Component<{}, PresetsOnlineContextType> {
         "Content-Type": "application/merge-patch+json",
       },
     };
-    NotificationContext.talk(getTranslation("PresetsScene.updatingVotes", "Updating votes..."));
+    NotificationContext.talk(updatingVotesText);
     return fetch(url, requestOptionGet)
       .then(response => response.json())
       .then((data: ApiPreset) => {
@@ -162,7 +171,7 @@ class PresetsScene extends React.Component<{}, PresetsOnlineContextType> {
           });
       })
       .catch(error => {
-        NotificationContext.error(getTranslation("PresetsScene.errorWhileSendingVote", "Error while sending vote"));
+        NotificationContext.error(errorWhileSendingVoteText);
         throw new Error(error);
       });
   }
@@ -193,9 +202,6 @@ class PresetsScene extends React.Component<{}, PresetsOnlineContextType> {
   }
 
   render() {
-    const onlinePresetTitle = getTranslation("PresetsScene.onlinePresetTitle", "Online Presets");
-    const localPresetTitle = getTranslation("PresetsScene.localPresetTitle", "Local Presets");
-    const autoApplyTitle = getTranslation("PresetsScene.autoApplyTitle", "Auto apply preset");
     return (
       <PresetsOnlineContext.Provider value={this.state}>
         <RyzenControllerAppContext.Consumer>
@@ -204,7 +210,7 @@ class PresetsScene extends React.Component<{}, PresetsOnlineContextType> {
               return (
                 <React.Fragment>
                   <PresetListEmpty />
-                  <SceneTitle title={onlinePresetTitle} />
+                  <SceneTitle title={onlinePresetTitleText} />
                   <PresetOnline />
                 </React.Fragment>
               );
@@ -213,16 +219,16 @@ class PresetsScene extends React.Component<{}, PresetsOnlineContextType> {
             const presetNames = Object.keys(ryzenControllerAppContext.presets);
             return (
               <React.Fragment>
-                <SceneTitle title={localPresetTitle} />
+                <SceneTitle title={localPresetTitleText} />
                 <ul className="uk-margin uk-list uk-list-large uk-list-striped">
                   {presetNames.map(presetName => {
                     const preset = ryzenControllerAppContext.presets[presetName];
                     return <PresetLine key={`0_${presetName}`} presetName={presetName} preset={preset} />;
                   })}
                 </ul>
-                <SceneTitle title={onlinePresetTitle} />
+                <SceneTitle title={onlinePresetTitleText} />
                 <PresetOnline />
-                <SceneTitle title={autoApplyTitle} />
+                <SceneTitle title={autoApplyTitleText} />
                 <PresetAutoApplyCards />
               </React.Fragment>
             );
diff --git a/src/scenes/Scene.tsx b/src/scenes/Scene.tsx
index bf7497f..e0ccba8 100644
--- a/src/scenes/Scene.tsx
+++ b/src/scenes/Scene.tsx
@@ -16,6 +16,11 @@ import AppVersion from "../contexts/AppVersion";
 const electronSettings = window.require("electron-settings");
 const powerMonitor = window.require("electron").remote.powerMonitor;
 
+const settingsSaveSuccessText = getTranslation(
+  "notification.settingsSaveSuccess",
+  "Settings has been saved successfully"
+);
+
 class Scene extends React.Component<{}, RyzenControllerAppContextType> {
   state: RyzenControllerAppContextType = {
     ...defaultRyzenControllerAppContext,
@@ -158,10 +163,7 @@ class Scene extends React.Component<{}, RyzenControllerAppContextType> {
     if (newSettingsPromises.length > 0) {
       Promise.all(newSettingsPromises)
         .then(results => {
-          NotificationContext.success(
-            getTranslation("notification.settingsSaveSuccess", "Settings has been saved successfully"),
-            "settings_applied"
-          );
+          NotificationContext.success(settingsSaveSuccessText, "settings_applied");
           this.setState({ settings: newSettings });
         })
         .catch((error: string) => {
diff --git a/src/scenes/SettingsScene.tsx b/src/scenes/SettingsScene.tsx
index a644199..b047c6c 100644
--- a/src/scenes/SettingsScene.tsx
+++ b/src/scenes/SettingsScene.tsx
@@ -5,30 +5,32 @@ import SettingsList from "../components/SettingsList";
 import SysInfoContext from "../contexts/SysInfoContext";
 import { getTranslation } from "../contexts/LocaleContext";
 
+const settingsTitleText = getTranslation("SettingsScene.settingsTitle", "Settings");
+const sysInfoTitleText = getTranslation("SettingsScene.sysInfoTitle", "System Info");
+const loadingSysHashText = getTranslation("SettingsScene.loadingSysHash", "Loading...");
+const systemHashDescText = getTranslation(
+  "SettingsScene.systemHashDesc",
+  "This will be used to ensure downloaded presets compatibility."
+);
+
 class SettingsScene extends React.PureComponent<{}, {}> {
   render() {
     return (
       <React.Fragment>
-        <SceneTitle title={getTranslation("SettingsScene.settingsTitle", "Settings")} />
+        <SceneTitle title={settingsTitleText} />
         <SettingsList />
-        <SceneTitle
-          title={getTranslation("SettingsScene.sysInfoTitle", "System Info")}
-          className="uk-margin-remove-bottom"
-        />
+        <SceneTitle title={sysInfoTitleText} className="uk-margin-remove-bottom" />
         <SysInfoCards />
         <SysInfoContext.Consumer>
           {sysInfoContext => (
             <p
               className="uk-text-small uk-text-italic uk-margin-left uk-margin-remove-bottom"
-              uk-tooltip={`pos: top-left; title: ${getTranslation(
-                "SettingsScene.systemHashDesc",
-                "This will be used to ensure downloaded presets compatibility."
-              )}`}
+              uk-tooltip={`pos: top-left; title: ${systemHashDescText}`}
             >
               System hash:{" "}
               {sysInfoContext.signature && sysInfoContext.permissiveSignature
                 ? `${sysInfoContext.signature} || ${sysInfoContext.permissiveSignature}`
-                : getTranslation("SettingsScene.loadingSysHash", "Loading...")}
+                : loadingSysHashText}
             </p>
           )}
         </SysInfoContext.Consumer>