fix: apply conventional styling changes

client/src/components/settings/DangerZone.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Alert, Panel } from '@freecodecamp/react-bootstrap';
+import { Button, Panel } from '@freecodecamp/react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
@@ -18,10 +18,13 @@ const propTypes = {
 
 const mapStateToProps = () => ({});
 const mapDispatchToProps = dispatch =>
-  bindActionCreators({
+  bindActionCreators(
-    deleteAccount,
+    {
-    resetProgress
+      deleteAccount,
-  }, dispatch);
+      resetProgress
+    },
+    dispatch
+  );
 
 class DangerZone extends Component {
   constructor(props) {
@@ -37,33 +40,33 @@ class DangerZone extends Component {
       ...state,
       reset: !state.reset
     }));
-  }
+  };
 
   toggleDeleteModal = () => {
     return this.setState(state => ({
       ...state,
       delete: !state.delete
     }));
-  }
+  };
 
   render() {
     const { deleteAccount, resetProgress } = this.props;
     return (
-      <div className='danger-zone'>
+      <div className='danger-zone text-center'>
         <FullWidthRow>
-          <Panel>
+          <Panel bsStyle='danger'>
+            <Panel.Heading>Danger Zone</Panel.Heading>
             <Spacer />
-            <Alert bsStyle='danger' className='alert-danger-zone'>
+            <p>Please be careful. Changes in this section are permanent.</p>
-              Please be careful! Changes in this section are permanent.
-            </Alert>
             <FullWidthRow>
               <Button
                 block={true}
                 bsSize='lg'
                 bsStyle='danger'
                 className='btn-danger'
+                onClick={() => this.toggleResetModal()}
                 type='button'
-                onClick={() => this.toggleResetModal()}>
+              >
                 Reset all of my progress
               </Button>
               <ButtonSpacer />
@@ -72,20 +75,25 @@ class DangerZone extends Component {
                 bsSize='lg'
                 bsStyle='danger'
                 className='btn-danger'
+                onClick={() => this.toggleDeleteModal()}
                 type='button'
-                onClick={() => this.toggleDeleteModal()}>
+              >
                 Delete my account
               </Button>
+              <Spacer />
             </FullWidthRow>
           </Panel>
+
           <ResetModal
-            reset={resetProgress}
             onHide={() => this.toggleResetModal()}
-            show={this.state.reset} />
+            reset={resetProgress}
+            show={this.state.reset}
+          />
           <DeleteModal
             delete={deleteAccount}
             onHide={() => this.toggleDeleteModal()}
-            show={this.state.delete} />
+            show={this.state.delete}
+          />
         </FullWidthRow>
       </div>
     );

client/src/components/settings/DeleteModal.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { ButtonSpacer } from '../helpers';
-import { Button, Modal } from '@freecodecamp/react-bootstrap'
+import { Button, Modal } from '@freecodecamp/react-bootstrap';
 
 import './danger-zone.css';
 
@@ -20,20 +20,22 @@ function DeleteModal(props) {
       autoFocus={true}
       backdrop={true}
       bsSize='lg'
+      className='text-center'
       keyboard={true}
       onHide={onHide}
-      show={show}>
+      show={show}
+    >
       <Modal.Header closeButton={true}>
         <Modal.Title id='modal-title'>Delete My Account</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <p>
-          This will really delete all your data, including all your progress
+          This will really delete all your data, including all your progress and
-          and account information.
+          account information.
         </p>
         <p>
-          We won't be able to recover any of it for you later,
+          We won't be able to recover any of it for you later, even if you
-          even if you change your mind.
+          change your mind.
         </p>
         <p>
           If there's something we could do better, send us an email instead and
@@ -48,8 +50,9 @@ function DeleteModal(props) {
           bsSize='lg'
           bsStyle='primary'
           className='btn-invert'
+          onClick={props.onHide}
           type='button'
-          onClick={props.onHide}>
+        >
           Nevermind, I don't want to delete my account
         </Button>
         <ButtonSpacer />
@@ -58,8 +61,9 @@ function DeleteModal(props) {
           bsSize='lg'
           bsStyle='danger'
           className='btn-danger'
+          onClick={props.delete}
           type='button'
-          onClick={props.delete}>
+        >
           I am 100% certain. Delete everything related to this account
         </Button>
       </Modal.Body>

client/src/components/settings/ResetModal.js

@@ -2,13 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { ButtonSpacer } from '../helpers';
-import { Button, Modal } from '@freecodecamp/react-bootstrap'
+import { Button, Modal } from '@freecodecamp/react-bootstrap';
-
-import './DangerZone'
 
 const propTypes = {
-  reset: PropTypes.func.isRequired,
   onHide: PropTypes.func.isRequired,
+  reset: PropTypes.func.isRequired,
   show: PropTypes.bool
 };
 
@@ -20,9 +18,11 @@ function ResetModal(props) {
       autoFocus={true}
       backdrop={true}
       bsSize='lg'
+      className='text-center'
       keyboard={true}
       onHide={onHide}
-      show={show}>
+      show={show}
+    >
       <Modal.Header closeButton={true}>
         <Modal.Title id='modal-title'>Reset My Progress</Modal.Title>
       </Modal.Header>
@@ -42,8 +42,9 @@ function ResetModal(props) {
           bsSize='lg'
           bsStyle='primary'
           className='btn-invert'
+          onClick={props.onHide}
           type='button'
-          onClick={props.onHide}>
+        >
           Nevermind, I don't want to delete all of my progress
         </Button>
         <ButtonSpacer />
@@ -52,8 +53,9 @@ function ResetModal(props) {
           bsSize='lg'
           bsStyle='danger'
           className='btn-danger'
+          onClick={props.reset}
           type='button'
-          onClick={props.reset}>
+        >
           Reset everything. I want to start from the beginning
         </Button>
       </Modal.Body>

client/src/components/settings/danger-zone.css

@@ -1,4 +1,21 @@
 .btn-danger {
   background-color: #fff;
-  color: #f11e00;
+  color: #ad1601;
+  border-color: #ad1601;
+}
+
+.btn-danger:hover, .btn-danger:focus {
+  background-color: #ad1601;
+}
+.danger-zone .panel-heading {
+  background-color: #ad1601;
+  color: #fff;
+}
+
+.danger-zone .panel-danger {
+  border-color: #ad1601;
+}
+
+.danger-zone p {
+  color: #ad1601;
 }