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 {
-  border: 1px solid #bbb;
-  display: block;
-  padding-left: .3rem;
-  padding-right: .5rem;
-  float: right;
-  border-radius: .5rem;
-  background-color: #fff;
-  color: #888;
+.exercise .command {
+  background-color: #bbb;
+  padding: .5em;
+  border-radius: .2em;
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: row;
 }
 
-.undo-button:hover {
-  border: 1px solid #888;
-  background-color: #ffdcc7;
-  cursor: pointer;
+.exercise .command-text {
+  flex: 1;
+  background-color: #fff;
+  font-family: "Droid Sans Mono", "monospace", monospace;
+  font-size: 14px;
+  padding: 0.4em .6em 0;
+}
+
+.undo-button {
+  color: #888;
 }

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="undo-button" title="Delete this and future commands" onClick={deleteProof}>
-      <FontAwesomeIcon icon={faDeleteLeft} />
-    </div>
+    <div className="command-text">{command}</div>
+    <Button to="" className="undo-button btn btn-inverted" title="Delete this and future commands" onClick={deleteProof}>
+      <FontAwesomeIcon icon={faDeleteLeft} />&nbsp;Delete
+    </Button>
   </div>
 }