prettier command line

client/src/app.css

@@ -43,9 +43,10 @@ code {
   padding: 0.2em .6em;
   font-size: 1rem;
   margin: 0 .2em;
+  border: 0;
 }
 
-.btn-disabled {
+.btn-disabled, .btn[disabled] {
   color: #aaa;
 }
 

client/src/components/Level.tsx

@@ -33,7 +33,7 @@ import { Main } from './infoview/main'
 import type { Location } from 'vscode-languageserver-protocol';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUpload, faArrowRotateRight, faChevronLeft, faChevronRight, faBook, faHome, faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { faHome, faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
 
 import { styled, useTheme, Theme, CSSObject } from '@mui/material/styles';
 import { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';

client/src/components/infoview/CommandLine.tsx

@@ -6,6 +6,9 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
 import { DiagnosticSeverity, PublishDiagnosticsParams } from 'vscode-languageserver-protocol';
 import { MonacoEditorContext } from '../Level'
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons'
+
 
 export function CommandLine() {
 
@@ -47,7 +50,7 @@ export function CommandLine() {
   return <div className="command-line">
       <form onSubmit={handleSubmit}>
         <input type="text" ref={commandInput} disabled={processing} />
-        <input type="submit" value="Run" disabled={processing} />
+        <button type="submit" disabled={processing} className="btn"><FontAwesomeIcon icon={faWandMagicSparkles} /> Run</button>
       </form>
     </div>
 }

client/src/components/infoview/goals.tsx

@@ -141,16 +141,16 @@ export const Goal = React.memo((props: GoalProps) => {
         </LocationsContext.Provider>
     </div>
 
-    let cn = 'font-code tl pre-wrap bl bw1 pl1 b--transparent '
-    if (props.goal.isInserted) cn += 'b--inserted '
-    if (props.goal.isRemoved) cn += 'b--removed '
+    // let cn = 'font-code tl pre-wrap bl bw1 pl1 b--transparent '
+    // if (props.goal.isInserted) cn += 'b--inserted '
+    // if (props.goal.isRemoved) cn += 'b--removed '
 
     const hints = <Hints hints={goal.hints} />
     const objectHyps = hyps.filter(hyp => !hyp.isAssumption)
     const assumptionHyps = hyps.filter(hyp => hyp.isAssumption)
     const {commandLineMode} = React.useContext(InputModeContext)
 
-    return <div className={cn}>
+    return <div>
         {/* {goal.userName && <div><strong className="goal-case">case </strong>{goal.userName}</div>} */}
         {filter.reverse && goalLi}
         { objectHyps.length > 0 &&

client/src/components/infoview/info.tsx

@@ -213,7 +213,7 @@ function InfoDisplay(props0: InfoDisplayProps & InfoPinnable) {
     <RpcContext.Provider value={rpcSess}>
     {/* <details open> */}
         {/* <InfoStatusBar {...props} triggerUpdate={triggerDisplayUpdate} isPaused={isPaused} setPaused={setPaused} /> */}
-        <div className='ml1'>
+        <div>
             <InfoDisplayContent {...props} triggerUpdate={triggerDisplayUpdate} isPaused={isPaused} setPaused={setPaused} />
         </div>
     {/* </details> */}

client/src/components/infoview/infoview.css

@@ -37,9 +37,27 @@
 }
 
 .command-line {
+  background: var(--clr-primary);
+  padding: 0.5em;
   font-family: var(--ff-primary);
+  border-radius: 0.2em;
+  margin: 0.2em 0;
 }
 
 .command-line input[type="text"] {
   font-family: var(--vscode-editor-font-family);
 }
+
+.command-line form {
+  display: flex;
+}
+
+.command-line form>input{
+  display: block;
+}
+
+.command-line form>input[type="text"]{
+  flex: 1;
+  padding: 0.2em .6em;
+  font-size: 1rem;
+}

client/src/components/infoview/main.tsx

@@ -80,7 +80,7 @@ export function Main(props: {world: string, level: number}) {
     } else if (serverStoppedResult){
         ret = <div><p>{serverStoppedResult.message}</p><p className="error">{serverStoppedResult.reason}</p></div>
     } else {
-        ret = <div className="ma1 infoview vscode-light">
+        ret = <div className="infoview vscode-light">
             {completed && <div className="level-completed">Level completed! 🎉</div>}
             <Infos />
         </div>

client/src/components/infoview/messages.tsx

@@ -84,7 +84,7 @@ export const MessagesList = React.memo(({uri, messages}: {uri: DocumentUri, mess
     if (should_hide) { return <></> }
 
     return (
-    <div className="ml1">
+    <div>
         {mkMessageViewProps(uri, messages).map(m => <MessageView {...m} />)}
     </div>
     );

client/src/components/level.css

@@ -34,7 +34,7 @@
   flex-flow: column;
 }
 
-.introduction-panel {
+.infoview {
   padding: 1em;
 }
 
@@ -59,7 +59,12 @@
   margin-bottom: 0;
 }
 
+.introduction-panel {
+  padding: 1em;
+}
+
 .input-mode-switch {
+  margin: .5em 0;
   float: right;
 }