Merge pull request #12144 from MarkusToe/fix/remove-bg-color-from-inactive-button

Fix Night Mode Inactive Button Colour

client/less/main.less

@@ -1129,7 +1129,7 @@ code {
   }
   .btn-primary {
     background-color: @brand-primary;
-    border-color: #292929;
+    border-color: #777;
     color:#CCC;
     transition: color 0.2s, background-color 0.2s;
     &:hover {
@@ -1151,6 +1151,12 @@ code {
   .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
     border-color: @night-text-color;
   }
+  .btn-toggle {
+    background-color: transparent;
+  }
+  .btn-toggle.active {
+    background-color: @brand-primary;
+  }
 }
 
 //make about page contact table reponsive on small screens

common/app/routes/settings/components/Email-Setting.jsx

@@ -70,7 +70,11 @@ export default function EmailSettings({
             bsSize='lg'
             bsStyle='primary'
             className={
-              classnames('positive-20', { active: sendMonthlyEmail })
+              classnames(
+                'positive-20',
+                { active: sendMonthlyEmail },
+                'btn-toggle'
+              )
             }
             onClick={ toggleMonthlyEmail }
             >
@@ -92,7 +96,11 @@ export default function EmailSettings({
             bsSize='lg'
             bsStyle='primary'
             className={
-              classnames('positive-20', { active: sendNotificationEmail })
+              classnames(
+                'positive-20',
+                { active: sendNotificationEmail },
+                'btn-toggle'
+              )
             }
             onClick={ toggleNotificationEmail }
             >
@@ -114,7 +122,11 @@ export default function EmailSettings({
             bsSize='lg'
             bsStyle='primary'
             className={
-              classnames('positive-20', { active: sendQuincyEmail })
+              classnames(
+                'positive-20',
+                { active: sendQuincyEmail },
+                'btn-toggle'
+              )
             }
             onClick={ toggleQuincyEmail }
             >

common/app/routes/settings/components/Locked-Settings.jsx

@@ -5,7 +5,8 @@ import classnames from 'classnames';
 export default function LockSettings({ isLocked, toggle }) {
   const className = classnames({
     'positive-20': true,
-    active: isLocked
+    active: isLocked,
+    'btn-toggle': true
   });
   return (
     <Row>