Add ability to set the progressbar color from the Settings screen

2 files changed, 37 insertions, 24 deletions

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}