diff options
Diffstat (limited to 'src/components/settings/settings/EditSettingsForm.js')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 47 |
1 files changed, 35 insertions, 12 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({ | |||
118 | accentColorInfo: { | 118 | accentColorInfo: { |
119 | id: 'settings.app.accentColorInfo', | 119 | id: 'settings.app.accentColorInfo', |
120 | defaultMessage: | 120 | defaultMessage: |
121 | 'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)', | 121 | 'Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)', |
122 | }, | ||
123 | overallTheme: { | ||
124 | id: 'settings.app.overallTheme', | ||
125 | defaultMessage: 'Overall Theme', | ||
126 | }, | ||
127 | progressbarTheme: { | ||
128 | id: 'settings.app.progressbarTheme', | ||
129 | defaultMessage: 'Progressbar Theme', | ||
122 | }, | 130 | }, |
123 | universalDarkModeInfo: { | 131 | universalDarkModeInfo: { |
124 | id: 'settings.app.universalDarkModeInfo', | 132 | id: 'settings.app.universalDarkModeInfo', |
@@ -598,25 +606,40 @@ class EditSettingsForm extends Component { | |||
598 | <H2 className='settings__section_header'> | 606 | <H2 className='settings__section_header'> |
599 | {intl.formatMessage(messages.sectionAccentColorSettings)} | 607 | {intl.formatMessage(messages.sectionAccentColorSettings)} |
600 | </H2> | 608 | </H2> |
609 | <p> | ||
610 | {intl.formatMessage(messages.accentColorInfo, { | ||
611 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, | ||
612 | })} | ||
613 | </p> | ||
614 | <p> | ||
615 | {intl.formatMessage(messages.overallTheme)} | ||
601 | <div className="settings__settings-group__apply-color"> | 616 | <div className="settings__settings-group__apply-color"> |
602 | <ColorPickerInput | 617 | <ColorPickerInput |
603 | onChange={e => this.submit(e)} | 618 | onChange={e => this.submit(e)} |
604 | field={form.$('accentColor')} | 619 | field={form.$('accentColor')} |
605 | className='color-picker-input' | 620 | className='color-picker-input' |
606 | /> | 621 | /> |
607 | <> | ||
608 | <Button | ||
609 | buttonType="secondary" | ||
610 | className="settings__settings-group__apply-color__button" | ||
611 | label="Apply color" | ||
612 | onClick={(e) => { this.submit(e) }} | ||
613 | /> | ||
614 | </> | ||
615 | </div> | 622 | </div> |
623 | </p> | ||
624 | <p> | ||
625 | {intl.formatMessage(messages.progressbarTheme)} | ||
626 | <div className="settings__settings-group__apply-color"> | ||
627 | <ColorPickerInput | ||
628 | onChange={e => this.submit(e)} | ||
629 | field={form.$('progressbarAccentColor')} | ||
630 | className='color-picker-input' | ||
631 | /> | ||
632 | </div> | ||
633 | </p> | ||
616 | <p> | 634 | <p> |
617 | {intl.formatMessage(messages.accentColorInfo, { | 635 | <div className="settings__settings-group__apply-color"> |
618 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, | 636 | <Button |
619 | })} | 637 | buttonType="secondary" |
638 | className="settings__settings-group__apply-color__button" | ||
639 | label="Apply color" | ||
640 | onClick={(e) => { this.submit(e) }} | ||
641 | /> | ||
642 | </div> | ||
620 | </p> | 643 | </p> |
621 | <Hr /> | 644 | <Hr /> |
622 | 645 | ||