From efd8c18f5ad53015c5ecea4941eaac5688757c5f Mon Sep 17 00:00:00 2001
From: Bouncey <staylor1012@gmail.com>
Date: Fri, 14 Sep 2018 13:20:51 +0100
Subject: [PATCH] feat(theme): Add theme settings UI

---
 client/src/components/helpers/ToggleButton.js | 58 +++++++++++++++++++
 .../src/components/helpers/toggle-button.css  | 16 +++++
 client/src/components/settings/Theme.js       | 29 ++++++++--
 .../components/settings/theme-settings.css    | 10 ++++
 4 files changed, 109 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/helpers/ToggleButton.js
 create mode 100644 client/src/components/helpers/toggle-button.css
 create mode 100644 client/src/components/settings/theme-settings.css

diff --git a/client/src/components/helpers/ToggleButton.js b/client/src/components/helpers/ToggleButton.js
new file mode 100644
index 0000000000..5ea23b5692
--- /dev/null
+++ b/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;
diff --git a/client/src/components/helpers/toggle-button.css b/client/src/components/helpers/toggle-button.css
new file mode 100644
index 0000000000..4269e2cfa3
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/src/components/settings/Theme.js b/client/src/components/settings/Theme.js
index 83bb323ecd..adf6975103 100644
--- a/client/src/components/settings/Theme.js
+++ b/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() {
-  return (<h1>ThemeSettings</h1>);
+import TB from '../helpers/ToggleButton';
+
+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';
-
-export default ThemeSettings;
+ThemeSettings.propTypes = propTypes;
diff --git a/client/src/components/settings/theme-settings.css b/client/src/components/settings/theme-settings.css
new file mode 100644
index 0000000000..2ab12b8b33
--- /dev/null
+++ b/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;
+}