Feature: Add color picker component for accent color setting (#228)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

4 files changed, 157 insertions, 13 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';
 import Toggle from '../../ui/Toggle';
 import Select from '../../ui/Select';
 import Input from '../../ui/Input';
+import ColorPickerInput from '../../ui/ColorPickerInput';
 import Infobox from '../../ui/Infobox';
 import { H1, H2, H3, H5 } from '../../ui/headline';
 
@@ -115,15 +116,19 @@ const messages = defineMessages({
     id: 'settings.app.sectionServiceIconsSettings',
     defaultMessage: 'Service Icons Settings',
   },
-  universalDarkModeInfo: {
-    id: 'settings.app.universalDarkModeInfo',
-    defaultMessage:
-      'Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.',
+  sectionAccentColorSettings: {
+    id: 'settings.app.sectionAccentColorSettings',
+    defaultMessage: 'Accent Color Settings',
   },
   accentColorInfo: {
     id: 'settings.app.accentColorInfo',
     defaultMessage:
-      'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})',
+      'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)',
+  },
+  universalDarkModeInfo: {
+    id: 'settings.app.universalDarkModeInfo',
+    defaultMessage:
+      'Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.',
   },
   headlinePrivacy: {
     id: 'settings.app.headlinePrivacy',
@@ -595,18 +600,29 @@ class EditSettingsForm extends Component {
                 )}
 
                 <Hr />
-
-                <Input
-                  placeholder="Accent Color"
-                  onChange={e => this.submit(e)}
-                  field={form.$('accentColor')}
-                />
+                <H2 className='settings__section_header'>
+                  {intl.formatMessage(messages.sectionAccentColorSettings)}
+                </H2>
+                <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>
                   {intl.formatMessage(messages.accentColorInfo, {
                     defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor,
                   })}
                 </p>
-
                 <Hr />
 
                 <H2 className='settings__section_header'>
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx
new file mode 100644
index 000000000..7cbdb295b
--- /dev/null
+++ b/src/components/ui/ColorPickerInput.tsx
@@ -0,0 +1,107 @@
+import { ChangeEvent, Component } from 'react';
+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;
+  className?: string;
+  focus?: boolean;
+};
+
+interface IState {
+  background: string;
+}
+
+class ColorPickerInput extends Component<IProps, IState> {
+  static defaultProps = {
+    className: null,
+    focus: false,
+  };
+
+  state = {
+    background: DEFAULT_APP_SETTINGS.accentColor,
+  };
+
+  inputElement: HTMLInputElement | null | undefined;
+
+  componentDidMount() {
+    if (this.props.focus) {
+      this.focus();
+    }
+  }
+
+  onChange(e: ChangeEvent<HTMLInputElement>) {
+    const { field } = this.props;
+
+    field.onChange(e);
+  }
+
+  focus() {
+    this.inputElement?.focus();
+  }
+
+  handleChangeComplete = (color: { hex: string; }) => {
+    const { field } = this.props;
+    this.setState({ background: color.hex });
+    field.value = color.hex
+  };
+
+  render() {
+    const {
+      field,
+      className,
+    } = this.props;
+
+    let { type } = field;
+    type = 'text';
+
+    return (
+      <div
+        className={classnames({
+          'franz-form__field': true,
+          'has-error': field.error,
+          [`${className}`]: className,
+        })}
+      >
+        <SliderPicker
+          color={ this.state.background }
+          onChangeComplete={ this.handleChangeComplete }
+          id={field.id}
+          type={type}
+          className="franz-form__input"
+          name={field.name}
+          value={field.value}
+          placeholder={field.placeholder}
+          onBlur={field.onBlur}
+          onFocus={field.onFocus}
+          ref={(element: HTMLInputElement | null | undefined) => {
+            this.inputElement = element;
+          }}
+          disabled={field.disabled}
+        />
+        <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker">
+          <input
+            id={field.id}
+            type={type}
+            className="franz-form__input"
+            name={field.name}
+            value={field.value}
+            placeholder={field.placeholder}
+            onChange={e => this.onChange(e)}
+            onBlur={field.onBlur}
+            onFocus={field.onFocus}
+            ref={element => {
+              this.inputElement = element;
+            }}
+            disabled={field.disabled}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default observer(ColorPickerInput);
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f787b90e4..3c5eef258 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})",
+  "settings.app.accentColorInfo": "Write your accent color 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",
@@ -267,6 +267,7 @@
   "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.",
+  "settings.app.sectionAccentColorSettings": "Accent Color Settings",
   "settings.app.sectionGeneralUi": "General UI",
   "settings.app.sectionHibernation": "Hibernation",
   "settings.app.sectionMain": "Main",
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 2bb9074ba..e2cf46478 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -176,6 +176,26 @@
     overflow: hidden;
     background: #fff;
   }
+  
+  .settings__section_header {
+    text-align: center;
+  }
+
+  .settings__settings-group__apply-color {
+    display: flex;
+  }
+
+  .settings__settings-group__apply-color__button {
+    height: 60px;
+  }
+
+  .franz-form__input-wrapper__color-picker {
+    width: 20% !important;
+    margin-top: 2%;
+  }
+  .color-picker-input {
+    align-items: center;
+  }
 
   .settings__header {
     align-items: center;