From e1261526d89354905eea11752b22c54c6738670a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Markus=20To=CC=88ro=CC=88k?= <markus.toeroek@wikitude.com>
Date: Wed, 21 Dec 2016 09:16:45 +0100
Subject: [PATCH 1/2] fix(night-mode): Add css classes to unsubscribe button

Add class btn-toggle and remove bg-color from inactive buttons in night mode
---
 client/less/main.less                         |  6 ++
 .../settings/components/Email-Setting.jsx     | 18 +++++-
 .../settings/components/Locked-Settings.jsx   | 63 ++++++++++---------
 3 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/client/less/main.less b/client/less/main.less
index 010dafeb59..1a491f0f98 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -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
diff --git a/common/app/routes/settings/components/Email-Setting.jsx b/common/app/routes/settings/components/Email-Setting.jsx
index 3e60efdb7a..1e9aaef08f 100644
--- a/common/app/routes/settings/components/Email-Setting.jsx
+++ b/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 }
             >
diff --git a/common/app/routes/settings/components/Locked-Settings.jsx b/common/app/routes/settings/components/Locked-Settings.jsx
index 077661d3f7..5fad5c2fb5 100644
--- a/common/app/routes/settings/components/Locked-Settings.jsx
+++ b/common/app/routes/settings/components/Locked-Settings.jsx
@@ -1,37 +1,38 @@
-import React, { PropTypes } from 'react';
-import { Button, Row, Col } from 'react-bootstrap';
+import React, {PropTypes} from 'react';
+import {Button, Row, Col} from 'react-bootstrap';
 import classnames from 'classnames';
 
-export default function LockSettings({ isLocked, toggle }) {
-  const className = classnames({
-    'positive-20': true,
-    active: isLocked
-  });
-  return (
-    <Row>
-      <Col xs={ 9 }>
-        <p className='large-p'>
-          Make all of my solutions private
-          <br />
-          (this disables your certificates)
-        </p>
-      </Col>
-      <Col xs={ 3 }>
-        <Button
-          block={ true }
-          bsSize='lg'
-          bsStyle='primary'
-          className={ className }
-          onClick={ toggle }
-          >
-          { isLocked ? 'On' : 'Off' }
-        </Button>
-      </Col>
-    </Row>
-  );
+export default function LockSettings({isLocked, toggle}) {
+    const className = classnames({
+        'positive-20': true,
+        active: isLocked,
+        'btn-toggle': true
+    });
+    return (
+        <Row>
+            <Col xs={ 9 }>
+                <p className='large-p'>
+                    Make all of my solutions private
+                    <br />
+                    (this disables your certificates)
+                </p>
+            </Col>
+            <Col xs={ 3 }>
+                <Button
+                    block={ true }
+                    bsSize='lg'
+                    bsStyle='primary'
+                    className={ className }
+                    onClick={ toggle }
+                    >
+                    { isLocked ? 'On' : 'Off' }
+                </Button>
+            </Col>
+        </Row>
+    );
 }
 
 LockSettings.propTypes = {
-  isLocked: PropTypes.bool,
-  toggle: PropTypes.func.isRequired
+    isLocked: PropTypes.bool,
+    toggle: PropTypes.func.isRequired
 };

From f262bfd9606be114d5da6cc84f9aaf8c9eb66415 Mon Sep 17 00:00:00 2001
From: Mrugesh Mohapatra <me@raisedadead.com>
Date: Fri, 6 Jan 2017 11:55:08 +0530
Subject: [PATCH 2/2] fix(night-mode): Update indenting and change border color

---
 client/less/main.less                         |  2 +-
 .../settings/components/Email-Setting.jsx     | 18 +++---
 .../settings/components/Locked-Settings.jsx   | 64 +++++++++----------
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/client/less/main.less b/client/less/main.less
index 1a491f0f98..c4075778fd 100644
--- a/client/less/main.less
+++ b/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 {
diff --git a/common/app/routes/settings/components/Email-Setting.jsx b/common/app/routes/settings/components/Email-Setting.jsx
index 1e9aaef08f..76b940bb70 100644
--- a/common/app/routes/settings/components/Email-Setting.jsx
+++ b/common/app/routes/settings/components/Email-Setting.jsx
@@ -71,9 +71,9 @@ export default function EmailSettings({
             bsStyle='primary'
             className={
               classnames(
-                  'positive-20',
-                  { active: sendMonthlyEmail },
-                  'btn-toggle'
+                'positive-20',
+                { active: sendMonthlyEmail },
+                'btn-toggle'
               )
             }
             onClick={ toggleMonthlyEmail }
@@ -97,9 +97,9 @@ export default function EmailSettings({
             bsStyle='primary'
             className={
               classnames(
-                  'positive-20',
-                  { active: sendNotificationEmail },
-                  'btn-toggle'
+                'positive-20',
+                { active: sendNotificationEmail },
+                'btn-toggle'
               )
             }
             onClick={ toggleNotificationEmail }
@@ -123,9 +123,9 @@ export default function EmailSettings({
             bsStyle='primary'
             className={
               classnames(
-                  'positive-20',
-                  { active: sendQuincyEmail },
-                  'btn-toggle'
+                'positive-20',
+                { active: sendQuincyEmail },
+                'btn-toggle'
               )
             }
             onClick={ toggleQuincyEmail }
diff --git a/common/app/routes/settings/components/Locked-Settings.jsx b/common/app/routes/settings/components/Locked-Settings.jsx
index 5fad5c2fb5..c1065c3570 100644
--- a/common/app/routes/settings/components/Locked-Settings.jsx
+++ b/common/app/routes/settings/components/Locked-Settings.jsx
@@ -1,38 +1,38 @@
-import React, {PropTypes} from 'react';
-import {Button, Row, Col} from 'react-bootstrap';
+import React, { PropTypes } from 'react';
+import { Button, Row, Col } from 'react-bootstrap';
 import classnames from 'classnames';
 
-export default function LockSettings({isLocked, toggle}) {
-    const className = classnames({
-        'positive-20': true,
-        active: isLocked,
-        'btn-toggle': true
-    });
-    return (
-        <Row>
-            <Col xs={ 9 }>
-                <p className='large-p'>
-                    Make all of my solutions private
-                    <br />
-                    (this disables your certificates)
-                </p>
-            </Col>
-            <Col xs={ 3 }>
-                <Button
-                    block={ true }
-                    bsSize='lg'
-                    bsStyle='primary'
-                    className={ className }
-                    onClick={ toggle }
-                    >
-                    { isLocked ? 'On' : 'Off' }
-                </Button>
-            </Col>
-        </Row>
-    );
+export default function LockSettings({ isLocked, toggle }) {
+  const className = classnames({
+    'positive-20': true,
+    active: isLocked,
+    'btn-toggle': true
+  });
+  return (
+    <Row>
+      <Col xs={ 9 }>
+        <p className='large-p'>
+          Make all of my solutions private
+          <br />
+          (this disables your certificates)
+        </p>
+      </Col>
+      <Col xs={ 3 }>
+        <Button
+          block={ true }
+          bsSize='lg'
+          bsStyle='primary'
+          className={ className }
+          onClick={ toggle }
+          >
+          { isLocked ? 'On' : 'Off' }
+        </Button>
+      </Col>
+    </Row>
+  );
 }
 
 LockSettings.propTypes = {
-    isLocked: PropTypes.bool,
-    toggle: PropTypes.func.isRequired
+  isLocked: PropTypes.bool,
+  toggle: PropTypes.func.isRequired
 };