feat(theme): Add theme settings UI

client/src/components/helpers/ToggleButton.js

@@ -0,0 +1,58 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import {
+  ToggleButtonGroup as BSBG,
+  ToggleButton as TB
+} from '@freecodecamp/react-bootstrap';
+
+import './toggle-button.css';
+
+const propTypes = {
+  name: PropTypes.string.isRequired,
+  offLabel: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onLabel: PropTypes.string,
+  value: PropTypes.bool.isRequired
+};
+
+function getActiveClass(condition) {
+  return condition ? 'active' : 'not-active';
+}
+
+export default function ToggleButton({
+  name,
+  onChange,
+  value,
+  onLabel = 'On',
+  offLabel = 'Off'
+}) {
+  return (
+    <Fragment>
+      <BSBG name={name} onChange={onChange} type='radio'>
+        <TB
+          bsSize='lg'
+          bsStyle='primary'
+          className={`toggle-${getActiveClass(value)}`}
+          disabled={value}
+          type='radio'
+          value={1}
+          >
+          {onLabel}
+        </TB>
+        <TB
+          bsSize='lg'
+          bsStyle='primary'
+          className={`toggle-${getActiveClass(!value)}`}
+          disabled={!value}
+          type='radio'
+          value={2}
+          >
+          {offLabel}
+        </TB>
+      </BSBG>
+    </Fragment>
+  );
+}
+
+ToggleButton.displayName = 'ToggleButton';
+ToggleButton.propTypes = propTypes;

client/src/components/helpers/toggle-button.css

@@ -0,0 +1,16 @@
+.toggle-active.btn[disabled] {
+  background-color: #006400;
+  opacity: 1;
+}
+
+.toggle-not-active.btn-primary.active {
+  background-color: #006400;
+}
+
+.toggle-not-active {
+  background-color: #dedede;
+  color: rgb(0, 49, 0);
+}
+.toggle-not-active:hover, .toggle-not-active:focus {
+  background-color: #006400;
+}