Pretty up the IDE a little

web/src/components/IdeConsole/IdeConsole.js

@@ -1,17 +1,35 @@
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 
 const IdeConsole = () => {
   const { state } = useContext(IdeContext)
+  useEffect(() => {
+    const element = document.querySelector('.console-tile .mosaic-window-body')
+    if (element) {
+      element.scrollTop = element.scrollHeight - element.clientHeight
+    }
+  }, [state.consoleMessages])
+  const matchEditorVsDarkThemeBg = { backgroundColor: 'rgb(30,30,30)' }
+  const matchEditorVsDarkThemeText = { color: 'rgb(212,212,212)' }
+  const matchEditorVsDarkThemeTextBrown = { color: 'rgb(206,144,120)' }
   return (
-    <div className="p-8 border-2 m-2 overflow-y-auto">
+    <div className="p-2 px-4 min-h-full" style={matchEditorVsDarkThemeBg}>
       <div>
-        {state.consoleMessages?.map(({ type, message }, index) => (
+        {state.consoleMessages?.map(({ type, message, time }, index) => (
           <pre
-            className={'font-mono ' + (type === 'error' ? 'text-red-500' : '')}
+            className="font-mono text-sm"
+            style={matchEditorVsDarkThemeText}
             key={message + index}
           >
-            {message}
+            <div
+              className="text-xs font-bold pt-2"
+              style={matchEditorVsDarkThemeTextBrown}
+            >
+              {time?.toLocaleString()}
+            </div>
+            <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>
+              {message}
+            </div>
           </pre>
         ))}
       </div>

web/src/components/IdeContainer/IdeContainer.js

@@ -58,15 +58,22 @@ const IdeContainer = () => {
   }, [])
 
   return (
-    <div id="cadhub-ide" className="flex-auto h-full">
+    <div id="cadhub-ide" className="mosaic-toolbar-overrides flex-auto h-full">
       <Mosaic
         renderTile={(id, path) => {
-          const title = id === 'Editor' ? `${id} (${state.ideType})` : id
           return (
             <MosaicWindow
               path={path}
-              title={title}
-              className={id.toLowerCase()}
+              renderToolbar={() => (
+                <div
+                  className="text-xs text-gray-400 pl-4 w-full py-px font-bold leading-loose border-b border-gray-700"
+                  style={{ backgroundColor: 'rgb(55,55,55)' }}
+                >
+                  {id}
+                  {id === 'Editor' && ` (${state.ideType})`}
+                </div>
+              )}
+              className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`}
             >
               {id === 'Viewer' ? (
                 <div id="view-wrapper" className="h-full" ref={viewerDOM}>

web/src/components/IdeEditor/IdeEditor.js

@@ -1,5 +1,4 @@
-import { useContext, useEffect, Suspense, lazy } from 'react'
-import { isBrowser } from '@redwoodjs/prerender/browserUtils'
+import { useContext, Suspense, lazy } from 'react'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 import { codeStorageKey } from 'src/helpers/hooks/useIdeState'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
@@ -34,15 +33,27 @@ const IdeEditor = () => {
       localStorage.setItem(codeStorageKey, state.code)
     }
   }
+  const loading = (
+    <div
+      className="text-gray-700 font-ropa-sans relative"
+      style={{ backgroundColor: 'red' }}
+    >
+      <div className="absolute inset-0 text-center flex items-center w-32">
+        . . . loading
+      </div>
+    </div>
+  )
   return (
     <div // eslint-disable-line jsx-a11y/no-static-element-interactions
       className="h-full"
       onKeyDown={handleSaveHotkey}
     >
-      <Suspense fallback={<div>. . . loading</div>}>
+      <Suspense fallback={loading}>
         <Editor
           defaultValue={state.code}
           value={state.code}
+          theme="vs-dark"
+          loading={loading}
           // TODO #247 cpp seems better than js for the time being
           defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}
           language={ideTypeToLanguageMap[state.ideType] || 'cpp'}