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>

2 files changed, 55 insertions, 0 deletions

diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1e9ed5714..ceec4a95e 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -40,3 +40,4 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './searchInput.scss';
 @import './select.scss';
 @import './image-upload.scss';
+@import './slider.scss';
\ No newline at end of file
diff --git a/src/styles/slider.scss b/src/styles/slider.scss
new file mode 100644
index 000000000..36e0638c4
--- /dev/null
+++ b/src/styles/slider.scss
@@ -0,0 +1,54 @@
+@import './config.scss';
+
+.theme__dark .franz-form .franz-form__slider-wrapper .slider {
+  border: 1px solid $dark-theme-gray;
+  background: $dark-theme-gray;
+
+}
+
+
+.franz-form {
+  .franz-form__slider-wrapper { 
+    display: flex;
+    flex-direction: row;
+
+    .franz-form__label { margin-left: 20px; }
+
+    .slider-container {
+      width: 100%; /* Width of the outside container */ 
+    }
+      
+    /* The slider itself */
+    .slider {
+      -webkit-appearance: none;
+      width: 100%;
+      height: 14px;
+      border-radius: $theme-border-radius;  
+      background: $theme-gray-lighter;
+      outline: none;
+      opacity: 1.0;
+      -webkit-transition: .2s;
+      transition: opacity .2s;
+    }
+    
+    .slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%; 
+      background: $theme-brand-primary;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+      cursor: pointer;
+    }
+    
+    .slider::-moz-range-thumb {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: $theme-brand-primary;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+      cursor: pointer;
+    }
+    }
+}