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;
+}

client/src/components/settings/Theme.js

@@ -1,9 +1,30 @@
+import PropTypes from 'prop-types';
 import React from 'react';
+import { ControlLabel } from '@freecodecamp/react-bootstrap';
 
-function ThemeSettings() {
+import TB from '../helpers/ToggleButton';
-  return (<h1>ThemeSettings</h1>);
+
+import './theme-settings.css';
+
+const propTypes = {
+  currentTheme: PropTypes.string.isRequired,
+  toggleNightMode: PropTypes.func.isRequired
+};
+
+export default function ThemeSettings({ currentTheme, toggleNightMode }) {
+  return (
+    <div id='theme-settings-container'>
+      <ControlLabel className='theme-label' htmlFor='night-mode'>
+        <strong>Night Mode</strong>
+      </ControlLabel>
+      <TB
+        name='night-mode'
+        onChange={() => toggleNightMode(currentTheme)}
+        value={currentTheme === 'night'}
+      />
+    </div>
+  );
 }
 
 ThemeSettings.displayName = 'ThemeSettings';
-
+ThemeSettings.propTypes = propTypes;
-export default ThemeSettings;

client/src/components/settings/theme-settings.css

@@ -0,0 +1,10 @@
+#theme-settings-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+#theme-settings-container .theme-label {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}