From 12a2b47b17259250bca3fab12d4c3d7f796a5262 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Thu, 22 Aug 2019 12:52:38 +0200
Subject: [PATCH] fix: bring buttons closer and reduce repetition

---
 .../src/components/helpers/toggle-button.css  |  1 -
 client/src/components/settings/Theme.js       | 22 +++++++++----------
 .../components/settings/toggle-setting.css    |  1 +
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/components/helpers/toggle-button.css b/client/src/components/helpers/toggle-button.css
index 0716239096..b5a1cc1409 100644
--- a/client/src/components/helpers/toggle-button.css
+++ b/client/src/components/helpers/toggle-button.css
@@ -52,7 +52,6 @@
 label.toggle-label {
   display: flex;
   flex-direction: column;
-  justify-content: center;
 }
 
 @media (max-width: 550px) {
diff --git a/client/src/components/settings/Theme.js b/client/src/components/settings/Theme.js
index 87bf19dcf6..acf9d0fc76 100644
--- a/client/src/components/settings/Theme.js
+++ b/client/src/components/settings/Theme.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { ControlLabel } from '@freecodecamp/react-bootstrap';
+import { Form } from '@freecodecamp/react-bootstrap';
 
-import TB from '../helpers/ToggleButton';
+import ToggleSetting from './ToggleSetting';
 
 import './theme-settings.css';
 
@@ -13,18 +13,18 @@ const propTypes = {
 
 export default function ThemeSettings({ currentTheme, toggleNightMode }) {
   return (
-    <div className='toggle-setting-container' id='theme-settings-container'>
-      <ControlLabel className='theme-label' htmlFor='night-mode'>
-        <strong>Night Mode</strong>
-      </ControlLabel>
-      <TB
-        name='night-mode'
-        onChange={() =>
+    <Form inline={true} onSubmit={e => e.preventDefault()}>
+      <ToggleSetting
+        action='Night Mode'
+        flag={currentTheme === 'night'}
+        flagName='currentTheme'
+        offLabel='Off'
+        onLabel='On'
+        toggleFlag={() =>
           toggleNightMode(currentTheme === 'night' ? 'default' : 'night')
         }
-        value={currentTheme === 'night'}
       />
-    </div>
+    </Form>
   );
 }
 
diff --git a/client/src/components/settings/toggle-setting.css b/client/src/components/settings/toggle-setting.css
index 6582064e4c..bf3b2c039c 100644
--- a/client/src/components/settings/toggle-setting.css
+++ b/client/src/components/settings/toggle-setting.css
@@ -1,6 +1,7 @@
 .toggle-setting-container .form-group {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 5px;
 }
 
 .toggle-setting-container .btn-group {