From b1325ba930de5cded1debc272256db39045ac56e Mon Sep 17 00:00:00 2001
From: huyenltnguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Sun, 21 Jan 2018 20:02:02 +0700
Subject: [PATCH] fix(ui): output theme in night mode

---
 common/app/routes/Challenges/Output.jsx      | 14 +++++++++++---
 common/app/routes/Challenges/challenges.less |  9 ++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/common/app/routes/Challenges/Output.jsx b/common/app/routes/Challenges/Output.jsx
index b63b6f1b6b..d73d0cef48 100644
--- a/common/app/routes/Challenges/Output.jsx
+++ b/common/app/routes/Challenges/Output.jsx
@@ -1,10 +1,12 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import NoSSR from 'react-no-ssr';
 import Codemirror from 'react-codemirror';
 
 import ns from './ns.json';
 import CodeMirrorSkeleton from './Code-Mirror-Skeleton.jsx';
+import { themeSelector } from '../../redux';
 
 const defaultOptions = {
   lineNumbers: false,
@@ -13,19 +15,23 @@ const defaultOptions = {
   readOnly: 'nocursor'
 };
 
+const mapStateToProps = state => ({ theme: themeSelector(state) });
+
 const propTypes = {
   defaultOutput: PropTypes.string,
-  output: PropTypes.string
+  output: PropTypes.string,
+  theme: PropTypes.string
 };
 
-export default class Output extends PureComponent {
+export class Output extends PureComponent {
   render() {
     const { output, defaultOutput } = this.props;
+    const cmTheme = this.props.theme === 'default' ? 'default' : 'dracula';
     return (
       <div className={ `${ns}-log` }>
         <NoSSR onSSR={ <CodeMirrorSkeleton content={ output } /> }>
           <Codemirror
-            options={ defaultOptions }
+            options={{ ...defaultOptions, theme: cmTheme }}
             value={ output || defaultOutput }
           />
         </NoSSR>
@@ -36,3 +42,5 @@ export default class Output extends PureComponent {
 
 Output.displayName = 'Output';
 Output.propTypes = propTypes;
+
+export default connect(mapStateToProps)(Output);
diff --git a/common/app/routes/Challenges/challenges.less b/common/app/routes/Challenges/challenges.less
index ea71e73058..983d048132 100644
--- a/common/app/routes/Challenges/challenges.less
+++ b/common/app/routes/Challenges/challenges.less
@@ -87,6 +87,10 @@
   }
 }
 
+.@{ns}-log {
+  border: 1px solid @brand-primary;
+}
+
 .night {
   .@{ns}-instructions blockquote {
     background-color: #242424;
@@ -117,9 +121,8 @@
       caret-color:#ABABAB;
     }
   }
-  .@{ns}-log .CodeMirror {
-    background-color: #282a36;
-    color: #f8f8f2;
+  .@{ns}-log {
+    border: none;
   }
   .refresh-icon {
     color: @icon-light-gray;