updated web app layoug

web-app/StringFormat.hs

@@ -11,10 +11,10 @@ envToStr :: Environment -> String
 envToStr env = do 
   let tys = getTypes (MkModule "") env
   let tyStrs = (\(nm,ty) -> replStr (show nm) <> "::" <> replStr (show ty)) <$> tys
-  intercalate "<br/>" tyStrs
+  intercalate "\n" tyStrs
 
 traceToStr :: [Command] -> String
-traceToStr cmds = intercalate "<br />" (replStr . show  <$> cmds)
+traceToStr cmds = intercalate "\n" (replStr . show  <$> cmds)
 
 repl :: Char -> String
 repl '<' = "&lt;"

web-app/index.html

@@ -39,11 +39,13 @@ <h1>One Sided Sequent Calculus</h1>
     </div>
     <div class="results">
       <h2>Results</h2>
-      <div id="resultStr"></div>
-      Types: <br/>
-      <div id="typesStr"></div>
-      Trace: <br/>
-      <div id="traceStr"></div>
+      Result: <div class="code" id="resultStr"></div>
+      <br/>
+      Types in Program: <br/> 
+      <textarea readonly id="typesStr"></textarea>
+      <br/>
+      Evaluation Trace: <br/>
+      <textarea readonly id="traceStr"></textarea>
     </div>
     <div id="examples">
       <div id="tuple">

web-app/main.css

@@ -1,30 +1,50 @@
 body {
-  font-family: "Noto", sans-serif
+  font-family: "Noto Sans", sans-serif;
+  background-color: #505060;
+  color: #dddddd;
+}
+textarea { 
+  width: 100%;
+  height: 8em;
+  resize:none;
+  font-family: "DejaVu Sans Mono", sans-serif;
+  background-color:#505050;
+  color: #eeeeff;
+  border-radius:10px;
+  line-height: 1.3;
 }
 
 #progInput {
   width:100%;
-  height:90%
+  height:90%;
+  background-color: #505050;
+  color: #eeeeee;
 }
 
 #runButton {
   width:5%;
-  height:2em;
   border-radius:2px;
 }
 
 #examples {
   display:none
 }
 
+#typesStr { 
+  width: 100%;
+  height: 5em;
+}
+
 .evalSucc {
-  color: green
+  color: #00ff55; 
 }
 
 .evalError {
-  color: red
+  color: #ff0033; 
 }
 
 .prog {
   height:40em
 }
+
+