Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/slider/index.ts

@@ -0,0 +1 @@
+export * from "./slider"

src/renderer/components/slider/slider.scss

@@ -0,0 +1,17 @@
+.Slider {
+  .track {
+    background: $lensBlue;
+  }
+
+  .thumb {
+    background: $lensBlue;
+
+    &.activated, &.jumped, &.focused {
+      box-shadow: 0 0 0 $unit * 2 rgba($lensBlue, 0.16)!important;
+    }
+
+    &:hover{
+      box-shadow: 0 0 0 $unit rgba($lensBlue, 0.16);
+    }
+  }
+}

src/renderer/components/slider/slider.tsx

@@ -0,0 +1,42 @@
+// Wrapper for <Slider/> component
+// API docs: https://material-ui.com/lab/api/slider/
+import "./slider.scss";
+
+import React, { Component } from "react";
+import { cssNames } from "../../utils";
+import MaterialSlider, { SliderClassKey, SliderProps } from "@material-ui/core/Slider";
+
+interface Props extends Omit<SliderProps, "onChange"> {
+  className?: string;
+  onChange?(evt: React.FormEvent<any>, value: number): void;
+}
+
+const defaultProps: Partial<Props> = {
+  step: 1,
+  min: 0,
+  max: 100,
+};
+
+export class Slider extends Component<Props> {
+  static defaultProps = defaultProps as object;
+
+  private classNames: Partial<{ [P in SliderClassKey]: string }> = {
+    track: "track",
+    thumb: "thumb",
+    disabled: "disabled",
+    vertical: "vertical",
+  };
+
+  render() {
+    const { className, ...sliderProps } = this.props;
+    return (
+      <MaterialSlider
+        {...sliderProps}
+        classes={{
+          root: cssNames("Slider", className),
+          ...this.classNames
+        }}
+      />
+    )
+  }
+}