Add ability to set the progressbar color from the Settings screen

30 files changed, 104 insertions, 60 deletions

diff --git a/src/app.js b/src/app.js
index aa140832c..54fba0c71 100644
--- a/src/app.js
+++ b/src/app.js
@@ -4,7 +4,6 @@ import { render } from 'react-dom';
 import { Provider } from 'mobx-react';
 import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
 import { hashHistory } from 'react-router';
-import TopBarProgress from 'react-topbar-progress-indicator';
 
 import ServerApi from './api/server/ServerApi';
 import LocalApi from './api/server/LocalApi';
@@ -64,13 +63,3 @@ window.addEventListener('dragover', event => event.preventDefault());
 window.addEventListener('drop', event => event.preventDefault());
 window.addEventListener('dragover', event => event.stopPropagation());
 window.addEventListener('drop', event => event.stopPropagation());
-
-TopBarProgress.config({
-  barThickness: 4,
-  barColors: {
-    '0': '#f00',
-    '0.5': '#0f0',
-    '1.0': '#00f',
-  },
-  shadowBlur: 5
-});
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index b45c7ea56..96ae5a5ed 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -118,7 +118,15 @@ const messages = defineMessages({
   accentColorInfo: {
     id: 'settings.app.accentColorInfo',
     defaultMessage:
-      'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)',
+      'Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)',
+  },
+  overallTheme: {
+    id: 'settings.app.overallTheme',
+    defaultMessage: 'Overall Theme',
+  },
+  progressbarTheme: {
+    id: 'settings.app.progressbarTheme',
+    defaultMessage: 'Progressbar Theme',
   },
   universalDarkModeInfo: {
     id: 'settings.app.universalDarkModeInfo',
@@ -598,25 +606,40 @@ class EditSettingsForm extends Component {
                 <H2 className='settings__section_header'>
                   {intl.formatMessage(messages.sectionAccentColorSettings)}
                 </H2>
+                <p>
+                  {intl.formatMessage(messages.accentColorInfo, {
+                    defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor,
+                  })}
+                </p>
+                <p>
+                {intl.formatMessage(messages.overallTheme)}
                 <div className="settings__settings-group__apply-color">
                   <ColorPickerInput
                     onChange={e => this.submit(e)}
                     field={form.$('accentColor')}
                     className='color-picker-input'
                   />
-                  <>
-                    <Button
-                      buttonType="secondary"
-                      className="settings__settings-group__apply-color__button"
-                      label="Apply color"
-                      onClick={(e) => { this.submit(e) }}
-                    />
-                  </>
                 </div>
+                </p>
+                <p>
+                {intl.formatMessage(messages.progressbarTheme)}
+                <div className="settings__settings-group__apply-color">
+                  <ColorPickerInput
+                    onChange={e => this.submit(e)}
+                    field={form.$('progressbarAccentColor')}
+                    className='color-picker-input'
+                  />
+                </div>
+                </p>
                 <p>
-                  {intl.formatMessage(messages.accentColorInfo, {
-                    defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor,
-                  })}
+                <div className="settings__settings-group__apply-color">
+                  <Button
+                    buttonType="secondary"
+                    className="settings__settings-group__apply-color__button"
+                    label="Apply color"
+                    onClick={(e) => { this.submit(e) }}
+                  />
+                </div>
                 </p>
                 <Hr />
 
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx
index 7cbdb295b..8a4d3129a 100644
--- a/src/components/ui/ColorPickerInput.tsx
+++ b/src/components/ui/ColorPickerInput.tsx
@@ -3,7 +3,6 @@ import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 import { SliderPicker } from 'react-color';
-import { DEFAULT_APP_SETTINGS } from '../../config';
 
 interface IProps {
   field: Field;
@@ -11,20 +10,12 @@ interface IProps {
   focus?: boolean;
 };
 
-interface IState {
-  background: string;
-}
-
-class ColorPickerInput extends Component<IProps, IState> {
+class ColorPickerInput extends Component<IProps> {
   static defaultProps = {
     className: null,
     focus: false,
   };
 
-  state = {
-    background: DEFAULT_APP_SETTINGS.accentColor,
-  };
-
   inputElement: HTMLInputElement | null | undefined;
 
   componentDidMount() {
@@ -45,7 +36,6 @@ class ColorPickerInput extends Component<IProps, IState> {
 
   handleChangeComplete = (color: { hex: string; }) => {
     const { field } = this.props;
-    this.setState({ background: color.hex });
     field.value = color.hex
   };
 
@@ -67,7 +57,7 @@ class ColorPickerInput extends Component<IProps, IState> {
         })}
       >
         <SliderPicker
-          color={ this.state.background }
+          color={ field.value }
           onChangeComplete={ this.handleChangeComplete }
           id={field.id}
           type={type}
diff --git a/src/config.ts b/src/config.ts
index 2df09e03d..2aad2e931 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -252,6 +252,7 @@ export const DEFAULT_APP_SETTINGS = {
   userAgentPref: '',
   adaptableDarkMode: true,
   accentColor: DEFAULT_ACCENT_COLOR,
+  progressbarAccentColor: DEFAULT_ACCENT_COLOR,
   serviceRibbonWidth: 68,
   sidebarServicesLocation: SIDEBAR_SERVICES_LOCATION_TOPLEFT,
   iconSize: iconSizeBias,
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 46c8232e4..bae19d3b6 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -234,6 +234,10 @@ const messages = defineMessages({
     id: 'settings.app.form.accentColor',
     defaultMessage: 'Accent color',
   },
+  progressbarAccentColor: {
+    id: 'settings.app.form.progressbarAccentColor',
+    defaultMessage: 'Progressbar Accent color',
+  },
   showDisabledServices: {
     id: 'settings.app.form.showDisabledServices',
     defaultMessage: 'Display disabled services tabs',
@@ -368,6 +372,7 @@ class EditSettingsScreen extends Component {
         hideSettingsButton: Boolean(settingsData.hideSettingsButton),
         alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces),
         accentColor: settingsData.accentColor,
+        progressbarAccentColor: settingsData.progressbarAccentColor,
         showMessageBadgeWhenMuted: Boolean(
           settingsData.showMessageBadgeWhenMuted,
         ),
@@ -758,6 +763,11 @@ class EditSettingsScreen extends Component {
           value: settings.all.app.accentColor,
           default: DEFAULT_APP_SETTINGS.accentColor,
         },
+        progressbarAccentColor: {
+          label: intl.formatMessage(messages.progressbarAccentColor),
+          value: settings.all.app.progressbarAccentColor,
+          default: DEFAULT_APP_SETTINGS.progressbarAccentColor,
+        },
         enableGPUAcceleration: {
           label: intl.formatMessage(messages.enableGPUAcceleration),
           value: settings.all.app.enableGPUAcceleration,
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index 7562475a6..42de5e4cc 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -1,5 +1,7 @@
 import color from 'color';
 import { reaction } from 'mobx';
+import TopBarProgress from 'react-topbar-progress-indicator';
+
 import { isWindows, isLinux } from '../../environment';
 import {
   DEFAULT_APP_SETTINGS,
@@ -9,8 +11,6 @@ import {
   SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT,
 } from '../../config';
 
-
-
 const STYLE_ELEMENT_ID = 'custom-appearance-style';
 
 function createStyleElement() {
@@ -398,19 +398,33 @@ function generateStyle(settings) {
 
   return style;
 }
+
+function updateProgressbar(settings) {
+  TopBarProgress.config({
+    barThickness: 4,
+    barColors: {
+      '0': settings.progressbarAccentColor,
+    },
+    shadowBlur: 5
+  });
+}
+
 function updateStyle(settings) {
   const style = generateStyle(settings);
   setAppearance(style);
+  updateProgressbar(settings);
 }
 
 export default function initAppearance(stores) {
   const { settings } = stores;
   createStyleElement();
+  updateProgressbar(settings);
 
   // Update style when settings change
   reaction(
     () => [
       settings.all.app.accentColor,
+      settings.all.app.progressbarAccentColor,
       settings.all.app.serviceRibbonWidth,
       settings.all.app.iconSize,
       settings.all.app.showDragArea,
diff --git a/src/i18n/locales/af.json b/src/i18n/locales/af.json
index df8644929..6aa9e3a8b 100644
--- a/src/i18n/locales/af.json
+++ b/src/i18n/locales/af.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/be.json b/src/i18n/locales/be.json
index a912d44e5..e04082b4d 100644
--- a/src/i18n/locales/be.json
+++ b/src/i18n/locales/be.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/bs.json b/src/i18n/locales/bs.json
index df8644929..6aa9e3a8b 100644
--- a/src/i18n/locales/bs.json
+++ b/src/i18n/locales/bs.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json
index bea42901b..d97d40e80 100644
--- a/src/i18n/locales/ca.json
+++ b/src/i18n/locales/ca.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Torna a provar-ho",
   "settings.account.userInfoRequestFailed": "No s'ha pogut carregar la informació de l'usuari",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Buida la memòria cau",
   "settings.app.buttonInstallUpdate": "Reinicia i instal·la l'actualització",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index c7a2c8355..6401f9ec8 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3059,7 +3059,7 @@
         }
       },
       {
-        "defaultMessage": "!!!Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+        "defaultMessage": "!!!Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
         "end": {
           "column": 3,
           "line": 86
@@ -4640,6 +4640,19 @@
         }
       },
       {
+        "defaultMessage": "!!!Accent color",
+        "end": {
+          "column": 3,
+          "line": 173
+        },
+        "file": "src/containers/settings/EditSettingsScreen.js",
+        "id": "settings.app.form.progressbarAccentColor",
+        "start": {
+          "column": 15,
+          "line": 170
+        }
+      },
+      {
         "defaultMessage": "!!!Display disabled services tabs",
         "end": {
           "column": 3,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 896ac359f..fa54fcd35 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
@@ -230,6 +230,7 @@
   "settings.app.form.passwordToggle": "Password toggle",
   "settings.app.form.predefinedTodoServer": "Todo Server",
   "settings.app.form.privateNotifications": "Don't show message content in notifications",
+  "settings.app.form.progressbarAccentColor": "Progressbar Accent color",
   "settings.app.form.reloadAfterResume": "Reload Ferdium after system resume",
   "settings.app.form.runInBackground": "Keep Ferdium in background when closing the window",
   "settings.app.form.scheduledDNDEnabled": "Enable scheduled Do-not-Disturb",
@@ -263,6 +264,8 @@
   "settings.app.lockInfo": "Password Lock allows you to keep your messages protected.\nUsing Password Lock, you will be prompted to enter your password everytime you start Ferdium or lock Ferdium yourself using the lock symbol in the bottom left corner or the shortcut {lockShortcut}.",
   "settings.app.lockedPassword": "Password",
   "settings.app.lockedPasswordInfo": "Please make sure to set a password you'll remember.\nIf you loose this password, you will have to reinstall Ferdium.",
+  "settings.app.overallTheme": "Overall Theme",
+  "settings.app.progressbarTheme": "Progressbar Theme",
   "settings.app.restartRequired": "Changes require restart",
   "settings.app.scheduledDNDInfo": "Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdium.",
   "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.",
diff --git a/src/i18n/locales/fa.json b/src/i18n/locales/fa.json
index df8644929..6aa9e3a8b 100644
--- a/src/i18n/locales/fa.json
+++ b/src/i18n/locales/fa.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/ga.json b/src/i18n/locales/ga.json
index 2b0abb224..390ceaa78 100644
--- a/src/i18n/locales/ga.json
+++ b/src/i18n/locales/ga.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Atriail",
   "settings.account.userInfoRequestFailed": "Ní féidir eolas úsáideora a lódáil",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Glan taisce",
   "settings.app.buttonInstallUpdate": "Atosaigh ⁊ suiteáil nuashonrú",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/he.json b/src/i18n/locales/he.json
index 0f1eeed2f..db24dc6ce 100644
--- a/src/i18n/locales/he.json
+++ b/src/i18n/locales/he.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "נסה שוב",
   "settings.account.userInfoRequestFailed": "אי אפשר לטעון את פרטי המשתמש",
   "settings.account.yourLicense": "רישיון הפרדי שלך:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "ניקוי המטמון",
   "settings.app.buttonInstallUpdate": "הפעל מחדש והתקן עדכונים",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/hi.json b/src/i18n/locales/hi.json
index df8644929..6aa9e3a8b 100644
--- a/src/i18n/locales/hi.json
+++ b/src/i18n/locales/hi.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/hr.json b/src/i18n/locales/hr.json
index 13eab01a8..9859a819f 100644
--- a/src/i18n/locales/hr.json
+++ b/src/i18n/locales/hr.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Pokušajte ponovno",
   "settings.account.userInfoRequestFailed": "Nije moguće učitati informacije o korisniku",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Očisti memoriju",
   "settings.app.buttonInstallUpdate": "Ponovo pokreni i instaliraj ažuriranje",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/hu.json b/src/i18n/locales/hu.json
index a63a98362..b67a371ad 100644
--- a/src/i18n/locales/hu.json
+++ b/src/i18n/locales/hu.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Próbáld újra",
   "settings.account.userInfoRequestFailed": "A felhasználói adatok betöltése sikertelen",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Gyorsítótár törlése",
   "settings.app.buttonInstallUpdate": "Újraindítás és frissítés telepítése",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/id.json b/src/i18n/locales/id.json
index 12cd811ae..ad3c82944 100644
--- a/src/i18n/locales/id.json
+++ b/src/i18n/locales/id.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Coba lagi",
   "settings.account.userInfoRequestFailed": "Gagal memuat informasi pengguna",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Bersihkan singgahan",
   "settings.app.buttonInstallUpdate": "Mulai ulang & instal pembaruan",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/ka.json b/src/i18n/locales/ka.json
index 9028959eb..968274a24 100644
--- a/src/i18n/locales/ka.json
+++ b/src/i18n/locales/ka.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "სცადეთ ხელახლა",
   "settings.account.userInfoRequestFailed": "მომხმარებლის ინფორმაციის ჩატვირთვა ვერ მოხერხდა",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "გადატვირთეთ და დააყენეთ განახლება",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/ko.json b/src/i18n/locales/ko.json
index fddd04941..544e706ee 100644
--- a/src/i18n/locales/ko.json
+++ b/src/i18n/locales/ko.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "다시 시도하세요.",
   "settings.account.userInfoRequestFailed": "사용자 정보를 불러올 수 없습니다.",
   "settings.account.yourLicense": "Ferdium 라이센스:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "캐시 지우기",
   "settings.app.buttonInstallUpdate": "재시작 후 업데이트 설치",
   "settings.app.buttonOpenFerdiumProfileFolder": "프로파일 폴더 열기",
diff --git a/src/i18n/locales/nl-BE.json b/src/i18n/locales/nl-BE.json
index 8bccbe1d1..e78ab1987 100644
--- a/src/i18n/locales/nl-BE.json
+++ b/src/i18n/locales/nl-BE.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Probeer opnieuw",
   "settings.account.userInfoRequestFailed": "Kon gebruikersinformatie niet laden",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Cache wissen",
   "settings.app.buttonInstallUpdate": "Opnieuw opstarten & update installeren",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/si.json b/src/i18n/locales/si.json
index 263f02dc4..e041e2936 100644
--- a/src/i18n/locales/si.json
+++ b/src/i18n/locales/si.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "යළි උත්සාහය",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "ඔබගේ ෆර්ඩි බලපත්‍රය:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "පැතිකඩ බහාලුම විවෘත",
diff --git a/src/i18n/locales/sl.json b/src/i18n/locales/sl.json
index cdec79f29..879911129 100644
--- a/src/i18n/locales/sl.json
+++ b/src/i18n/locales/sl.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/sr.json b/src/i18n/locales/sr.json
index 6dc449650..d8b9913ed 100644
--- a/src/i18n/locales/sr.json
+++ b/src/i18n/locales/sr.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Pokušajte ponovno",
   "settings.account.userInfoRequestFailed": "Nije moguće učitati informacije o korisniku",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Очисти кеш",
   "settings.app.buttonInstallUpdate": "Ponovo pokreni i instaliraj ažuriranje",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/te.json b/src/i18n/locales/te.json
index cdec79f29..879911129 100644
--- a/src/i18n/locales/te.json
+++ b/src/i18n/locales/te.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/vls.json b/src/i18n/locales/vls.json
index df8644929..6aa9e3a8b 100644
--- a/src/i18n/locales/vls.json
+++ b/src/i18n/locales/vls.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/zh-HANT.json b/src/i18n/locales/zh-HANT.json
index ca7e05fde..c636888b4 100644
--- a/src/i18n/locales/zh-HANT.json
+++ b/src/i18n/locales/zh-HANT.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "再試一次",
   "settings.account.userInfoRequestFailed": "無法載入帳戶資訊",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "清除緩存",
   "settings.app.buttonInstallUpdate": "重新啟動並且更新",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index df8644929..6aa9e3a8b 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -182,7 +182,7 @@
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
diff --git a/src/stores.types.ts b/src/stores.types.ts
index 10cc395fd..d09916653 100644
--- a/src/stores.types.ts
+++ b/src/stores.types.ts
@@ -58,6 +58,7 @@ interface Api {
 interface AppStore {
   actions: Actions;
   accentColor: string;
+  progressbarAccentColor: string;
   api: Api;
   authRequestFailed: () => void;
   autoLaunchOnStart: () => void;