From 8c3323bc6c1743f04dee7598e186e07cd793ab7f Mon Sep 17 00:00:00 2001
From: Vijay A <vraravam@users.noreply.github.com>
Date: Sat, 18 Jun 2022 11:47:47 +0530
Subject: Add ability to set the progressbar color from the Settings screen

---
 .../settings/settings/EditSettingsForm.js          | 47 ++++++++++++++++------
 1 file changed, 35 insertions(+), 12 deletions(-)

(limited to 'src/components/settings')

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 />
 
-- 
cgit v1.2.3-70-g09d2