From 5501542e10f53927e631a0be5836e7654bf3a56f Mon Sep 17 00:00:00 2001
From: Peter Weinberg <pweinberg633@gmail.com>
Date: Tue, 23 May 2017 21:00:59 -0400
Subject: [PATCH] feat(views): create global challenge-description component

---
 .../challenges/Challenge-Description.jsx      | 24 ++++++++++
 common/app/routes/challenges/challenges.less  | 38 +++++++++++++++
 .../challenges/views/backend/Back-End.jsx     | 16 ++++---
 .../challenges/views/classic/Side-Panel.jsx   | 13 ++---
 .../challenges/views/classic/classic.less     | 48 -------------------
 5 files changed, 76 insertions(+), 63 deletions(-)
 create mode 100644 common/app/routes/challenges/Challenge-Description.jsx

diff --git a/common/app/routes/challenges/Challenge-Description.jsx b/common/app/routes/challenges/Challenge-Description.jsx
new file mode 100644
index 0000000000..566684a0c0
--- /dev/null
+++ b/common/app/routes/challenges/Challenge-Description.jsx
@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import { Col, Row } from 'react-bootstrap';
+
+import ns from './ns.json';
+
+const propTypes = {
+  children: PropTypes.array
+};
+
+export default function ChallengeDescription({ children }) {
+  return (
+    <Row>
+      <Col
+        className={ `${ns}-instructions` }
+        xs={ 12 }
+        >
+        { children }
+      </Col>
+    </Row>
+  );
+}
+
+ChallengeDescription.displayName = 'ChallengeDescription';
+ChallengeDescription.propTypes = propTypes;
diff --git a/common/app/routes/challenges/challenges.less b/common/app/routes/challenges/challenges.less
index efda7469a8..e17598104f 100644
--- a/common/app/routes/challenges/challenges.less
+++ b/common/app/routes/challenges/challenges.less
@@ -38,6 +38,44 @@
   }
 }
 
+.@{ns}-instructions {
+  margin-bottom: 5px;
+  h4 {
+    margin-bottom: 0;
+  }
+  blockquote {
+    font-size: 90%;
+    font-family: @font-family-monospace !important;
+    color: @code-color;
+    background-color: #fffbe5;
+    border-radius: @border-radius-base;
+    border: 1px solid @pre-border-color;
+    white-space: pre;
+    padding: 5px 10px;
+    margin-bottom: 10px;
+    margin-top: -5px;
+    overflow: auto;
+  }
+  dfn {
+    font-family: @font-family-monospace;
+    color: @code-color;
+    background-color: @code-bg;
+    border-radius: @border-radius-base;
+    padding: 1px 5px;
+  }
+  & a, #MDN-links a {
+    color: #31708f;
+  }
+  & a::after, #MDN-links a::after {
+    font-size: 70%;
+    font-family: FontAwesome;
+    content: " \f08e";
+  }
+  ol {
+    font-size: 16px;
+  }
+}
+
 .night {
   .@{ns}-instructions blockquote {
     background-color: #242424;
diff --git a/common/app/routes/challenges/views/backend/Back-End.jsx b/common/app/routes/challenges/views/backend/Back-End.jsx
index f15ed99ba4..78e6692a8f 100644
--- a/common/app/routes/challenges/views/backend/Back-End.jsx
+++ b/common/app/routes/challenges/views/backend/Back-End.jsx
@@ -8,6 +8,7 @@ import {
 } from 'react-bootstrap';
 
 import ChallengeTitle from '../../Challenge-Title.jsx';
+import ChallengeDescription from '../../Challenge-Description.jsx';
 import SolutionInput from '../../Solution-Input.jsx';
 import TestSuite from '../../Test-Suite.jsx';
 import Output from '../../Output.jsx';
@@ -117,13 +118,16 @@ export class BackEnd extends PureComponent {
     return (
       <Row>
         <Col
-          md={ 6 }
-          mdOffset={ 3 }
-          xs={ 12 }
+          xs={ 6 }
+          xsOffset={ 3 }
           >
-          <Row className='challenge-instructions'>
-            <ChallengeTitle>{ title }</ChallengeTitle>
-            { this.renderDescription(description) }
+          <Row>
+            <ChallengeTitle>
+              { title }
+            </ChallengeTitle>
+            <ChallengeDescription>
+              { this.renderDescription(description) }
+            </ChallengeDescription>
           </Row>
           <Row>
             <form
diff --git a/common/app/routes/challenges/views/classic/Side-Panel.jsx b/common/app/routes/challenges/views/classic/Side-Panel.jsx
index 3d928a85b2..ac5f87a686 100644
--- a/common/app/routes/challenges/views/classic/Side-Panel.jsx
+++ b/common/app/routes/challenges/views/classic/Side-Panel.jsx
@@ -3,11 +3,11 @@ import ReactDom from 'react-dom';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
 import PureComponent from 'react-pure-render/component';
-import { Col, Row } from 'react-bootstrap';
 
 import ns from './ns.json';
 
 import ChallengeTitle from '../../Challenge-Title.jsx';
+import ChallengeDescription from '../../Challenge-Description.jsx';
 import TestSuite from '../../Test-Suite.jsx';
 import Output from '../../Output.jsx';
 import ToolPanel from './Tool-Panel.jsx';
@@ -125,14 +125,9 @@ export class SidePanel extends PureComponent {
           <ChallengeTitle>
             { title }
           </ChallengeTitle>
-          <Row>
-            <Col
-              className={ `${ns}-instructions` }
-              xs={ 12 }
-              >
-              { this.renderDescription(description) }
-            </Col>
-          </Row>
+          <ChallengeDescription>
+            { this.renderDescription(description) }
+          </ChallengeDescription>
         </div>
         <ToolPanel
           executeChallenge={ executeChallenge }
diff --git a/common/app/routes/challenges/views/classic/classic.less b/common/app/routes/challenges/views/classic/classic.less
index de511f9f51..55f0bc9be4 100644
--- a/common/app/routes/challenges/views/classic/classic.less
+++ b/common/app/routes/challenges/views/classic/classic.less
@@ -21,55 +21,7 @@
   padding-right: 5px;
 }
 
-.@{ns}-instructions {
-  margin-bottom: 5px;
-  h4 {
-    margin-bottom: 0;
-  }
-  blockquote {
-    font-size: 90%;
-    font-family: @font-family-monospace;
-    color: @code-color;
-    background-color: #fffbe5;
-    border-radius: @border-radius-base;
-    border: 1px solid @pre-border-color;
-    white-space: pre;
-    padding: 5px 10px;
-    margin-bottom: 10px;
-    margin-top: -5px;
-    overflow: auto;
-  }
-  dfn {
-    font-family: @font-family-monospace;
-    color: @code-color;
-    background-color: @code-bg;
-    border-radius: @border-radius-base;
-    padding: 1px 5px;
-  }
-  & a, #MDN-links a {
-    color: #31708f;
-  }
-  & a::after, #MDN-links a::after {
-    font-size: 70%;
-    font-family: FontAwesome;
-    content: " \f08e";
-  }
-  ol {
-    font-size: 16px;
-  }
-}
-
-
 .night {
-  .@{ns}-instructions blockquote {
-    background-color: #242424;
-    border-color: #515151;
-    color: #ABABAB
-  }
-  .@{ns}-instructions dfn {
-    background-color: #242424;
-    color: #02a902;
-  }
   .@{ns}-editor .CodeMirror {
     background-color:#242424;
     color:#ABABAB;