css for commands

client/src/components/infoview/infoview.css

@@ -55,7 +55,7 @@
   display: flex;
 }
 
-.command-line button {
+.command-line button, .undo-button {
   display: block;
   white-space: nowrap;
   flex: 0;
@@ -153,19 +153,23 @@
   flex: 1;
 }
 
-.undo-button {
+.exercise .command {
-  border: 1px solid #bbb;
+  background-color: #bbb;
-  display: block;
+  padding: .5em;
-  padding-left: .3rem;
+  border-radius: .2em;
-  padding-right: .5rem;
+  margin-top: 2rem;
-  float: right;
+  display: flex;
-  border-radius: .5rem;
+  flex-direction: row;
+}
+
+.exercise .command-text {
+  flex: 1;
   background-color: #fff;
-  color: #888;
+  font-family: "Droid Sans Mono", "monospace", monospace;
+  font-size: 14px;
+  padding: 0.4em .6em 0;
 }
 
-.undo-button:hover {
+.undo-button {
-  border: 1px solid #888;
+  color: #888;
-  background-color: #ffdcc7;
-  cursor: pointer;
 }

client/src/components/infoview/main.tsx

@@ -201,10 +201,10 @@ function Command({ command, deleteProof }: { command: string, deleteProof: any }
   // The first step will always have an empty command
   if (!command) { return <></> }
   return <div className="command">
-    {command}
+    <div className="command-text">{command}</div>
-    <div className="undo-button" title="Delete this and future commands" onClick={deleteProof}>
+    <Button to="" className="undo-button btn btn-inverted" title="Delete this and future commands" onClick={deleteProof}>
-      <FontAwesomeIcon icon={faDeleteLeft} />
+      <FontAwesomeIcon icon={faDeleteLeft} />&nbsp;Delete
-    </div>
+    </Button>
   </div>
 }
 

client/src/components/level.css

@@ -233,17 +233,6 @@ td code  {
   padding: .5em;
 }
 
-/* TODO: Create a nice style and move this to a better place */
-
-.exercise .command {
-  /* background-color: rgb(167, 167, 167); */
-  border: 1px solid #bbb;
-  background-color: #eee;
-  padding: .5rem;
-  border-radius: .5rem;
-  margin-top: 2rem;
-}
-
 .exercise .step {
   /* background-color: #e6f0f4; */
   margin-top: 5px;

client/src/components/welcome.css

@@ -17,6 +17,7 @@
 .welcome .column {
   height: 100%;
   overflow: auto;
+  scroll-behavior: smooth;
 }
 
 .welcome-text {

client/src/components/welcome.tsx

@@ -91,7 +91,9 @@ function Welcome() {
     let elems = Array.from(document.getElementsByClassName("playable-world"))
     if (elems.length) {
       // It seems that the last element is the one furthest up in the tree
-      let elem = elems.pop()
+      // TODO: I think they appear in random order. Check there position and select the lowest one
+      // of these positions to scroll to.
+      let elem = elems[0]
       console.debug(`scrolling to ${elem.textContent}`)
       elem.scrollIntoView({block: "center"})
     }