Console enhancements. (codesandbox#290)

Author: lbogdan

src/app/components/sandbox/Preview/DevTools/Console/Message.js

@@ -16,7 +16,7 @@ const inspectorTheme = {
   BASE_FONT_SIZE: '14px',
   BASE_LINE_HEIGHT: '18px',
 
-  BASE_BACKGROUND_COLOR: theme.background(),
+  BASE_BACKGROUND_COLOR: 'rgba(0, 0, 0, 0)',
   BASE_COLOR: 'rgb(213, 213, 213)',
 
   OBJECT_NAME_COLOR: theme.secondary(),

src/app/components/sandbox/Preview/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 import * as React from 'react';
 import styled from 'styled-components';
-import { listen } from 'codesandbox-api';
+import { listen, dispatch } from 'codesandbox-api';
 
 import { debounce } from 'lodash';
 
@@ -267,6 +267,7 @@ export default class Preview extends React.PureComponent<Props, State> {
     } = this.props;
     if (preferences.clearConsoleEnabled) {
       console.clear(); // eslint-disable-line no-console
+      dispatch({ type: 'clear-console' });
     }
 
     // Do it here so we can see the dependency fetching screen if needed

src/app/store/preferences/reducer.js

@@ -41,7 +41,7 @@ const initialState: Preferences = Object.keys(keys).reduce(
     fontSize: 14,
     fontFamily: '',
     lineHeight: 1.15,
-    clearConsoleEnabled: false,
+    clearConsoleEnabled: true,
     prettierConfig: DEFAULT_PRETTIER_CONFIG,
     codeMirror: false,
     autoDownloadTypes: true,