fix: bring buttons closer and reduce repetition

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) {

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'>
+    <Form inline={true} onSubmit={e => e.preventDefault()}>
-      <ControlLabel className='theme-label' htmlFor='night-mode'>
+      <ToggleSetting
-        <strong>Night Mode</strong>
+        action='Night Mode'
-      </ControlLabel>
+        flag={currentTheme === 'night'}
-      <TB
+        flagName='currentTheme'
-        name='night-mode'
+        offLabel='Off'
-        onChange={() =>
+        onLabel='On'
+        toggleFlag={() =>
           toggleNightMode(currentTheme === 'night' ? 'default' : 'night')
         }
-        value={currentTheme === 'night'}
       />
-    </div>
+    </Form>
   );
 }
 

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 {