feat(Settings): Add toggle button

common/app/routes/Settings/Toggle-Button/Toggle-Button.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ToggleButtonGroup as BSBG, ToggleButton as TB } from 'react-bootstrap';
+
+import ns from './ns.json';
+
+const propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.bool.isRequired
+};
+
+export default function ToggleButton({
+  onChange,
+  value
+}) {
+  return (
+    <div className={ `${ns}-container` }>
+      <BSBG
+        name='monthly-email'
+        onChange={ onChange }
+        type='radio'
+        >
+        <TB
+          bsSize='lg'
+          bsStyle='primary'
+          className={ value && 'active' }
+          disabled={ value }
+          type='radio'
+          value={ 1 }
+          >
+          On
+        </TB>
+        <TB
+          bsSize='lg'
+          bsStyle='primary'
+          className={ !value && 'active' }
+          disabled={ !value }
+          type='radio'
+          value={ 2 }
+          >
+          Off
+        </TB>
+      </BSBG>
+    </div>
+  );
+}
+
+ToggleButton.displayName = 'ToggleButton';
+ToggleButton.propTypes = propTypes;

common/app/routes/Settings/Toggle-Button/index.js

@@ -0,0 +1 @@
+export { default } from './Toggle-Button.jsx';

common/app/routes/Settings/Toggle-Button/ns.json

@@ -0,0 +1 @@
+"toggle"

common/app/routes/Settings/Toggle-Button/toggle.less

@@ -0,0 +1,20 @@
+@ns: toggle;
+
+.@{ns}-container > .btn-group {
+  float: right;
+  .btn {
+    margin-top: 20px;
+  }
+  .btn[disabled] {
+    opacity: 1;
+  }
+  @media (max-width: 768px) {
+    float: none;
+    .btn {
+      margin-top: 10px;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+

common/app/routes/Settings/index.less

@@ -0,0 +1,2 @@
+&{ @import "./settings.less"; }
+&{ @import "./Toggle-Button/toggle.less"; }

common/app/routes/index.less

@@ -1,2 +1,2 @@
 &{ @import "./Challenges/challenges.less"; }
-&{ @import "./Settings/settings.less"; }
+&{ @import "./Settings/index.less"; }