Feature/settings new design

app/javascript/components/ui/dropdown/dropdown-styles.scss

@@ -1,6 +1,6 @@
 @import '~styles/settings.scss';
 
-$dd-height: rem(35px);
+$dd-height: rem(34px);
 $dd-font-size: rem(13px);
 
 .c-dropdown {
@@ -9,7 +9,7 @@ $dd-font-size: rem(13px);
   text-align: left;
 
   .label {
-    margin-bottom: rem(10px);
+    margin-bottom: rem(5px);
     display: flex;
     justify-content: flex-start;
     align-items: center;

app/javascript/components/ui/dropdown/themes/dropdown-button.scss

@@ -6,7 +6,7 @@ $dd-button-height: rem(28px);
   text-align: center;
 
   .container {
-    max-width: rem(85px);
+    max-width: rem(70px);
 
     .selector {
       border-radius: rem(25px);

app/javascript/components/ui/switch/react-toggle.scss

@@ -0,0 +1,141 @@
+.react-toggle {
+  touch-action: pan-x;
+
+  display: block;
+  position: relative;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle-screenreader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.react-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.25s;
+  transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+  width: 50px;
+  height: 24px;
+  padding: 0;
+  border-radius: 30px;
+  background-color: #4D4D4D;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #000000;
+}
+
+.react-toggle--checked .react-toggle-track {
+  background-color: #19AB27;
+}
+
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #128D15;
+}
+
+.react-toggle-track-check {
+  position: absolute;
+  width: 14px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  left: 8px;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  right: 10px;
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+  opacity: 0;
+}
+
+.react-toggle-thumb {
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #4D4D4D;
+  border-radius: 50%;
+  background-color: #FAFAFA;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -webkit-transition: all 0.25s ease;
+  -moz-transition: all 0.25s ease;
+  transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+  left: 27px;
+  border-color: #19AB27;
+}
+
+.react-toggle--focus .react-toggle-thumb {
+  -webkit-box-shadow: 0px 0px 3px 2px #0099E0;
+  -moz-box-shadow: 0px 0px 3px 2px #0099E0;
+  box-shadow: 0px 0px 2px 3px #0099E0;
+}
+
+.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
+  -webkit-box-shadow: 0px 0px 5px 5px #0099E0;
+  -moz-box-shadow: 0px 0px 5px 5px #0099E0;
+  box-shadow: 0px 0px 5px 5px #0099E0;
+}

app/javascript/components/ui/switch/switch-component.jsx

@@ -0,0 +1,41 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Toggle from 'react-toggle';
+
+import './react-toggle.scss';
+import './switch-styles.scss';
+import './themes/switch-light.scss';
+
+class Switch extends PureComponent {
+  render() {
+    const { theme, label, value, options, onChange } = this.props;
+    return (
+      <div className={`c-switch ${theme || ''}`}>
+        {label && <div className="label">{label}</div>}
+        <Toggle
+          icons={{
+            checked: options[0].label,
+            unchecked: options[1].label
+          }}
+          defaultChecked={options[1].value === value}
+          onChange={e => {
+            const result = e.target.checked
+              ? options[1].value
+              : options[0].value;
+            onChange(result);
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+Switch.propTypes = {
+  theme: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  options: PropTypes.array,
+  onChange: PropTypes.func
+};
+
+export default Switch;

app/javascript/components/ui/switch/switch-styles.scss

@@ -0,0 +1,12 @@
+@import '~styles/settings.scss';
+
+.c-switch {
+  .label {
+    margin-bottom: rem(5px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-weight: 400;
+    font-size: 13px;
+  }
+}

app/javascript/components/ui/switch/switch.js

@@ -0,0 +1,3 @@
+import Component from './switch-component';
+
+export default Component;

app/javascript/components/ui/switch/themes/switch-light.scss

@@ -0,0 +1,49 @@
+@import '~styles/settings.scss';
+
+.theme-switch-light {
+  .react-toggle {
+    width: 100%;
+  }
+
+  .react-toggle-track {
+    width: 100%;
+    height: rem(34px);
+    background-color: transparent !important;
+    border: solid 1px $border;
+
+    > div {
+      width: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 1;
+      font-size: 13px;
+      color: $slate;
+    }
+
+    .react-toggle-track-check {
+      left: 0;
+    }
+
+    .react-toggle-track-x {
+      right: 0;
+    }
+  }
+
+  .react-toggle-thumb {
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    background-color: transparent;
+    border-radius: 30px;
+    border: solid 1px $green-gfw;
+    box-shadow: none !important;
+  }
+
+  .react-toggle--checked {
+    .react-toggle-thumb {
+      left: 50%;
+    }
+  }
+}