feat: commandline chic

client/src/components/helpers/ToggleButton.js

@@ -6,6 +6,8 @@ import {
 } from '@freecodecamp/react-bootstrap';
 
 import './toggle-button.css';
+import ToggleCheck from '../../assets/icons/ToggleCheck';
+import Spacer from '../../assets/icons/Spacer';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
@@ -26,21 +28,30 @@ export default function ToggleButton({
   onLabel = 'On',
   offLabel = 'Off'
 }) {
+  const checkIconStyle = {
+    height: '15px',
+    width: '20px'
+  };
   return (
     <Fragment>
       <BSBG name={name} onChange={onChange} type='radio'>
         <TB
-          bsSize='lg'
+          bsSize='sm'
           bsStyle='primary'
           className={`toggle-${getActiveClass(value)}`}
           disabled={value}
           type='radio'
           value={1}
         >
+          {value ? (
+            <ToggleCheck style={checkIconStyle} />
+          ) : (
+            <Spacer style={checkIconStyle} />
+          )}
           {onLabel}
         </TB>
         <TB
-          bsSize='lg'
+          bsSize='sm'
           bsStyle='primary'
           className={`toggle-${getActiveClass(!value)}`}
           disabled={!value}
@@ -48,6 +59,11 @@ export default function ToggleButton({
           value={2}
         >
           {offLabel}
+          {!value ? (
+            <ToggleCheck style={checkIconStyle} />
+          ) : (
+            <Spacer style={checkIconStyle} />
+          )}
         </TB>
       </BSBG>
     </Fragment>

client/src/components/helpers/loader.css

@@ -8,5 +8,5 @@
 
 .full-screen-wrapper .sk-spinner {
   transform: scale(2);
-  color: #006400;
+  color: var(--secondary-color);
 }

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

@@ -1,32 +1,29 @@
 .toggle-active.btn[disabled] {
-  background-color: #006400;
+  background-color: var(--secondary-color);
+  color: var(--secondary-background);
   opacity: 1;
 }
 
-.night .toggle-active {
-  color: #ddd;
-}
-
-.toggle-not-active.btn-primary.active {
-  background-color: #006400;
-}
-
 .toggle-not-active {
-  background-color: #ffffff;
-  color: rgb(0, 49, 0);
+  background-color: var(--quaternary-background);
+  color: var(--secondary-color);
 }
-
-.night .toggle-not-active {
-  background-color: #dedede;
-  color: #333;
+.toggle-not-active:hover {
+  color: var(--secondary-background);
 }
 
 .toggle-not-active:hover,
 .toggle-not-active:focus {
-  background-color: #006400;
+  background-color: var(--secondary-color);
 }
 
-.night .toggle-not-active:hover,
-.night .toggle-not-active:focus {
-  color: #ddd;
+.btn .toggle-not-active,
+.btn .toggle-active {
+  border-color: var(--secondary-color);
+}
+
+.btn-group .btn-primary,
+.btn-group .btn-primary:focus,
+.btn-group .btn-primary:hover {
+  border-color: var(--secondary-color);
 }