diff options
Diffstat (limited to 'src/components/settings')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 40 |
1 files changed, 28 insertions, 12 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 1d61a7510..3f36f5e44 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -12,6 +12,7 @@ import Button from '../../ui/button'; | |||
12 | import Toggle from '../../ui/Toggle'; | 12 | import Toggle from '../../ui/Toggle'; |
13 | import Select from '../../ui/Select'; | 13 | import Select from '../../ui/Select'; |
14 | import Input from '../../ui/Input'; | 14 | import Input from '../../ui/Input'; |
15 | import ColorPickerInput from '../../ui/ColorPickerInput'; | ||
15 | import Infobox from '../../ui/Infobox'; | 16 | import Infobox from '../../ui/Infobox'; |
16 | import { H1, H2, H3, H5 } from '../../ui/headline'; | 17 | import { H1, H2, H3, H5 } from '../../ui/headline'; |
17 | 18 | ||
@@ -115,15 +116,19 @@ const messages = defineMessages({ | |||
115 | id: 'settings.app.sectionServiceIconsSettings', | 116 | id: 'settings.app.sectionServiceIconsSettings', |
116 | defaultMessage: 'Service Icons Settings', | 117 | defaultMessage: 'Service Icons Settings', |
117 | }, | 118 | }, |
118 | universalDarkModeInfo: { | 119 | sectionAccentColorSettings: { |
119 | id: 'settings.app.universalDarkModeInfo', | 120 | id: 'settings.app.sectionAccentColorSettings', |
120 | defaultMessage: | 121 | defaultMessage: 'Accent Color Settings', |
121 | 'Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.', | ||
122 | }, | 122 | }, |
123 | accentColorInfo: { | 123 | accentColorInfo: { |
124 | id: 'settings.app.accentColorInfo', | 124 | id: 'settings.app.accentColorInfo', |
125 | defaultMessage: | 125 | defaultMessage: |
126 | 'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})', | 126 | 'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)', |
127 | }, | ||
128 | universalDarkModeInfo: { | ||
129 | id: 'settings.app.universalDarkModeInfo', | ||
130 | defaultMessage: | ||
131 | 'Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.', | ||
127 | }, | 132 | }, |
128 | headlinePrivacy: { | 133 | headlinePrivacy: { |
129 | id: 'settings.app.headlinePrivacy', | 134 | id: 'settings.app.headlinePrivacy', |
@@ -595,18 +600,29 @@ class EditSettingsForm extends Component { | |||
595 | )} | 600 | )} |
596 | 601 | ||
597 | <Hr /> | 602 | <Hr /> |
598 | 603 | <H2 className='settings__section_header'> | |
599 | <Input | 604 | {intl.formatMessage(messages.sectionAccentColorSettings)} |
600 | placeholder="Accent Color" | 605 | </H2> |
601 | onChange={e => this.submit(e)} | 606 | <div className="settings__settings-group__apply-color"> |
602 | field={form.$('accentColor')} | 607 | <ColorPickerInput |
603 | /> | 608 | onChange={e => this.submit(e)} |
609 | field={form.$('accentColor')} | ||
610 | className='color-picker-input' | ||
611 | /> | ||
612 | <> | ||
613 | <Button | ||
614 | buttonType="secondary" | ||
615 | className="settings__settings-group__apply-color__button" | ||
616 | label="Apply color" | ||
617 | onClick={(e) => { this.submit(e) }} | ||
618 | /> | ||
619 | </> | ||
620 | </div> | ||
604 | <p> | 621 | <p> |
605 | {intl.formatMessage(messages.accentColorInfo, { | 622 | {intl.formatMessage(messages.accentColorInfo, { |
606 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, | 623 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, |
607 | })} | 624 | })} |
608 | </p> | 625 | </p> |
609 | |||
610 | <Hr /> | 626 | <Hr /> |
611 | 627 | ||
612 | <H2 className='settings__section_header'> | 628 | <H2 className='settings__section_header'> |