Expose Dark Reader settings (#568)

* feat: Expose DarkReader settings to users
  - In the service model, expose an object darkReaderSetting which contains  brightness, contrast and sepia values.
  - In EditServiceScreen, provide 3 form options for brightness, contrast and Sepia. Additionally onSubmit() form, capture the darkreader settings data onto formdata.darkReaderSettings to update in the service
  - In EditServiceForm, if darkModeEnabled is checked, show 3 sliders for controlling darkreader settings
  - Create a new Slider control and customize it according to the application's theme and dark theme.
  - In Webview Recipe, load the darkReader settings from service settings and pass it to the darkReader library.

* feat: Darkreader settings
 - Lint fixes

* feat: DarkReader settings
  - refactor code in editservicescreen.js

Co-Authored-By: Sampath Kumar Krishnan <sampath3493@gmail.com>

* feat: Darkreader settings
 - Fix a crash where service.darkReaderSettings is null while creating a new service
 - Remove isDarkModeEnabled prop to EditServiceForm as it is no longer required.

* fix: Update EditServiceScreen

- Set the default value of darkReader Brightness, Contrast and Sepia to undefined as per @vantezzen 's suggestion.
- Updated the check provided by @mahadevans87

Co-authored-by: Sampath Kumar Krishnan <sampath3493@gmail.com>
Co-authored-by: Sampath Kumar Krishnan <sampathBlam@users.noreply.github.com>

1 files changed, 65 insertions, 0 deletions

diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
new file mode 100644
index 000000000..b00a6a3f8
--- /dev/null
+++ b/src/components/ui/Slider.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { Field } from 'mobx-react-form';
+
+export default @observer class Slider extends Component {
+    static propTypes = {
+      field: PropTypes.instanceOf(Field).isRequired,
+      className: PropTypes.string,
+      showLabel: PropTypes.bool,
+      disabled: PropTypes.bool,
+    };
+
+    static defaultProps = {
+      className: '',
+      showLabel: true,
+      disabled: false,
+    };
+
+    onChange(e) {
+      const { field } = this.props;
+
+      field.onChange(e);
+    }
+
+    render() {
+      const {
+        field,
+        className,
+        showLabel,
+        disabled,
+      } = this.props;
+
+      if (field.value === '' && field.default !== '') {
+        field.value = field.default;
+      }
+
+      return (
+        <div
+          className={classnames([
+            'franz-form__field',
+            'franz-form__slider-wrapper',
+            className,
+          ])}
+        >
+          <div className="slider-container">
+            <input
+              className="slider"
+              type="range"
+              id={field.id}
+              name={field.name}
+              value={field.value}
+              min="1"
+              max="100"
+              onChange={e => (!disabled ? this.onChange(e) : null)}
+            />
+          </div>
+
+          {field.error && <div className={field.error}>{field.error}</div>}
+          {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+        </div>
+      );
+    }
+}