Add command and result icons, rerender console when changing theme and font size

Author: catarak

client/images/command.svg

@@ -41,7 +41,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/images/result.svg

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -25,6 +25,9 @@ import infoDarkUrl from '../../../images/console-info-dark.svg?byUrl';
 import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
 import ConsoleInput from './ConsoleInput';
 
+import commandIconUrl from '../../../images/command.svg?byUrl';
+import resultIconUrl from '../../../images/result.svg?byUrl';
+
 import UpArrowIcon from '../../../images/up-arrow.svg';
 import DownArrowIcon from '../../../images/down-arrow.svg';
 
@@ -60,6 +63,8 @@ const getConsoleFeedStyle = (theme, times, fontSize) => {
     ARROW_FONT_SIZE: fontSize,
     LOG_ICON_WIDTH: fontSize,
     LOG_ICON_HEIGHT: 1.45 * fontSize,
+    LOG_COMMAND_ICON: `url(${commandIconUrl})`,
+    LOG_RESULT_ICON: `url(${resultIconUrl})`
   };
 
   if (times > 1) {
@@ -87,10 +92,10 @@ const Console = ({ t }) => {
     collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent
   } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
 
-  useDidUpdate(() => {
-    clearConsole();
-    dispatchConsoleEvent(consoleEvents);
-  }, [theme, fontSize]);
+  // useEffect(() => {
+  //   clearConsole();
+  //   dispatchConsoleEvent(consoleEvents);
+  // }, [theme, fontSize]);
 
   const cm = useRef({});
 
@@ -138,6 +143,7 @@ const Console = ({ t }) => {
                 <ConsoleFeed
                   styles={getConsoleFeedStyle(theme, times, fontSize)}
                   logs={[consoleEvent]}
+                  key={Date.now()}
                 />
               </div>
             );

client/modules/App/App.jsx

@@ -9,10 +9,11 @@
 
 .console__input .console-active__arrow {
   width: auto;
-  height: 55%;
-  & g {
+  height: 38%;
+  & path {
     @include themify() {
-      fill: getThemifyVariable('console-active-arrow-color');  
+      fill: getThemifyVariable('console-active-arrow-color');
+      opacity: 1; 
     }
   }
 }

client/modules/IDE/components/Console.jsx

@@ -135,7 +135,6 @@
 	height: calc(100% - #{30 / $base-font-size}rem);
 
 	.preview-console__message {
-		flex: 1 0 auto;
 		position: relative;
 		@include themify() {
 			color: getThemifyVariable('console-logged-times-color');