Merge pull request #16551 from huyenltnguyen/fix/console-theme-in-night-mode
fix(ui): Add logic to toggle console themepull/16575/head^2
commit
e6110fe718
|
@ -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);
|
||||
|
|
|
@ -88,6 +88,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.@{ns}-log {
|
||||
border: 1px solid @brand-primary;
|
||||
}
|
||||
|
||||
.night {
|
||||
.@{ns}-instructions blockquote {
|
||||
background-color: #242424;
|
||||
|
@ -118,9 +122,8 @@
|
|||
caret-color:#ABABAB;
|
||||
}
|
||||
}
|
||||
.@{ns}-log .CodeMirror {
|
||||
background-color: #282a36;
|
||||
color: #f8f8f2;
|
||||
.@{ns}-log {
|
||||
border: none;
|
||||
}
|
||||
.refresh-icon {
|
||||
color: @icon-light-gray;
|
||||
|
|
Loading…
Reference in New Issue