fix(merge): Fix merge conflicts

client/less/main.less

@@ -686,6 +686,26 @@ code {
  z-index: 20000 !important;
 }
 
+.email-settings {
+  @media (max-width: 768px) {
+    text-align: center;
+  }
+}
+
+.toggle-btn-group {
+  float: right;
+  .btn[disabled] {
+    opacity: 1;
+  }
+  @media (max-width: 768px) {
+    float: none;
+    .btn-toggle {
+      margin-top: 10px;
+      margin-bottom: 20px;
+    }
+  }
+}
+
 
 //uncomment this to see the dimensions of all elements outlined in red
 //* {

common/app/app.less

@@ -8,7 +8,6 @@
   // they are painted using css so the
   // nav is on top again
   .grid(@direction: column-reverse);
-  width: 100vw;
 }
 
 .@{ns}-content {

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

@@ -1,6 +1,12 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Button, Row, Col } from 'react-bootstrap';
+import {
+  ToggleButtonGroup,
+  ToggleButton,
+  Button,
+  Row,
+  Col
+} from 'react-bootstrap';
 import FA from 'react-fontawesome';
 import classnames from 'classnames';
 
@@ -57,7 +63,7 @@ export default function EmailSettings({
     );
   }
   return (
-    <div>
+    <div className='email-settings'>
       <Row>
         <p className='large-p text-center'>
           <em>{ email }</em>
@@ -67,16 +73,21 @@ export default function EmailSettings({
         <UpdateEmailButton />
       </Row>
       <Row>
-        <Col xs={ 9 }>
+        <Col sm={ 8 }>
           <p className='large-p'>
             Send me announcement emails
             <br />
             (we'll send you these every Thursday)
           </p>
         </Col>
-        <Col xs={ 3 }>
+        <Col sm={ 4 }>
-          <Button
+          <ToggleButtonGroup
-            block={ true }
+            className='toggle-btn-group'
+            name='monthly-email'
+            onChange={ toggleMonthlyEmail }
+            type='radio'
+            >
+            <ToggleButton
               bsSize='lg'
               bsStyle='primary'
               className={
@@ -86,23 +97,47 @@ export default function EmailSettings({
                   'btn-toggle'
                 )
               }
-            onClick={ toggleMonthlyEmail }
+              disabled={ sendMonthlyEmail }
+              type='radio'
+              value={ 1 }
               >
-            { sendMonthlyEmail ? 'On' : 'Off' }
+              On
-          </Button>
+            </ToggleButton>
+            <ToggleButton
+              bsSize='lg'
+              bsStyle='primary'
+              className={
+                classnames(
+                  'positive-20',
+                  { active: !sendMonthlyEmail },
+                  'btn-toggle'
+                )
+              }
+              disabled={ !sendMonthlyEmail }
+              type='radio'
+              value={ 2 }
+              >
+              Off
+            </ToggleButton>
+          </ToggleButtonGroup>
         </Col>
       </Row>
       <Row>
-        <Col xs={ 9 }>
+        <Col sm={ 8 }>
           <p className='large-p'>
             Send me notification emails
             <br />
             (these will pertain to your account)
           </p>
         </Col>
-        <Col xs={ 3 }>
+        <Col sm={ 4 }>
-          <Button
+          <ToggleButtonGroup
-            block={ true }
+            className='toggle-btn-group'
+            name='notification-email'
+            onChange={ toggleNotificationEmail }
+            type='radio'
+            >
+            <ToggleButton
               bsSize='lg'
               bsStyle='primary'
               className={
@@ -112,23 +147,47 @@ export default function EmailSettings({
                   'btn-toggle'
                 )
               }
-            onClick={ toggleNotificationEmail }
+              disabled={ sendNotificationEmail }
+              type='radio'
+              value={ 1 }
               >
-            { sendNotificationEmail ? 'On' : 'Off' }
+              On
-          </Button>
+            </ToggleButton>
+            <ToggleButton
+              bsSize='lg'
+              bsStyle='primary'
+              className={
+                classnames(
+                  'positive-20',
+                  { active: !sendNotificationEmail },
+                  'btn-toggle'
+                )
+              }
+              disabled={ !sendNotificationEmail }
+              type='radio'
+              value={ 2 }
+              >
+              Off
+            </ToggleButton>
+          </ToggleButtonGroup>
         </Col>
       </Row>
       <Row>
-        <Col xs={ 9 }>
+        <Col sm={ 8 }>
           <p className='large-p'>
             Send me Quincy's weekly email
             <br />
             (with new articles every Tuesday)
           </p>
         </Col>
-        <Col xs={ 3 }>
+        <Col sm={ 4 }>
-          <Button
+          <ToggleButtonGroup
-            block={ true }
+            className='toggle-btn-group'
+            name='quincy-email'
+            onChange={ toggleQuincyEmail }
+            type='radio'
+            >
+            <ToggleButton
               bsSize='lg'
               bsStyle='primary'
               className={
@@ -138,10 +197,29 @@ export default function EmailSettings({
                   'btn-toggle'
                 )
               }
-            onClick={ toggleQuincyEmail }
+              disabled={ sendQuincyEmail }
+              type='radio'
+              value={ 1 }
               >
-            { sendQuincyEmail ? 'On' : 'Off' }
+              On
-          </Button>
+            </ToggleButton>
+            <ToggleButton
+              bsSize='lg'
+              bsStyle='primary'
+              className={
+                classnames(
+                  'positive-20',
+                  { active: !sendQuincyEmail },
+                  'btn-toggle'
+                )
+              }
+              disabled={ !sendQuincyEmail }
+              type='radio'
+              value={ 2 }
+              >
+              Off
+            </ToggleButton>
+          </ToggleButtonGroup>
         </Col>
       </Row>
     </div>

common/app/routes/settings/Settings.jsx

@@ -138,6 +138,7 @@ export class Settings extends React.Component {
     }
     return (
       <ChildContainer>
+        <div className='container'>
           <Row>
             <Col xs={ 12 }>
               <Button
@@ -164,9 +165,9 @@ export class Settings extends React.Component {
                 bsSize='lg'
                 bsStyle='primary'
                 className='btn-link-social'
-              href={ 'mail:team@freecodecamp.org' }
+                href={ 'mail:team@freecodecamp.com' }
                 >
-              Email us at team@freecodecamp.org
+                Email us at team@freecodecamp.com
               </Button>
             </Col>
           </Row>
@@ -305,6 +306,7 @@ export class Settings extends React.Component {
               </Button>
             </Col>
           </Row>
+      </div>
       </ChildContainer>
     );
   }