Design changes

Author: joom

index.html

@@ -19,27 +19,46 @@
         position: fixed;
         width: 100%;
         height: 2em;
-        border: 1px solid black;
+        border: 1px solid #212529;
         z-index: 10;
         padding: 0.2em;
-        background: #ddd;
+        background: #212529;
       }
 
       button {
-        background: #A2BFFF;
-        border: 1px solid black;
+        /*
+        background: #0d6efd;
+        */
+        background: #FFA500;
+        color: #212529;
+        border: 1px solid #212529;
+        border-radius: 0.375rem;
       }
       button.solver {
-        background: #ffc2df;
+        background: #6610f2;
+        color: white;
       }
-      button#help {
+      /*
+      button.ok {
         background: #00CC84;
+        color: black;
+      }
+      button.cancel {
+        background: #dc3545;
+        color: white;
+      }
+      */
+      button#help {
+        background: #c29cff;
+        color: black;
       }
       button#showLKRules {
-        background: #00CC84;
+        background: #c29cff;
+        color: black;
       }
       button#showHoareRules {
-        background: #00CC84;
+        background: #c29cff;
+        color: black;
       }
 
       .help-list {
@@ -50,10 +69,12 @@
       }
       .help-examples li button{
         background: #FFA500;
+        color: black;
         font-size: 0.8em;
         height: 1.5em;
         width: auto;
         margin-left: 1em;
+        border-radius: 0.25rem;
       }
       .modal code {
         user-select: all;
@@ -76,19 +97,31 @@
       #left-bar {
         position: fixed;
         height: 100%;
-        width: 11em;
+        width: 15em;
         top: 2.5em;
         left: 0;
-        border: 1px solid black;
+        border: 1px solid #212529;
         z-index: 10;
         padding: 0.2em;
-        background: #ddd;
+        color: white;
+        background: #212529;
+        resize: horizontal;
+        overflow: auto;
       }
       #left-bar ol {
-        margin-left: 1em;
+        margin-left: 0.2em;
+      }
+      #left-bar ol li {
+        list-style-type: none;
+        border-bottom: 1px solid white;
+        padding: 1em 0.2em 1em 0.2em;
+      }
+      .selected {
+        background: #0d6efd;
       }
       #left-bar button {
-        height: 1.5em;
+        height: 2em;
+        padding: 0.2em;
       }
 
       canvas {
@@ -146,6 +179,8 @@
         right: 0;
         bottom: 0;
         background-color: orange;
+        color: white;
+        border-radius: 0.375rem;
         -webkit-transition: .6s;
         transition: .6s;
       }
@@ -157,13 +192,15 @@
         width: 26px;
         left: 4px;
         bottom: 4px;
-        background-color: white;
+        border-radius: 0.375rem;
+        background-color: #212529;
         -webkit-transition: .6s;
         transition: .6s;
       }
 
       input:checked + .slider {
-        background-color: #2ab934;
+        background-color: #4cd625;
+        color: white;
       }
 
       input:focus + .slider {
@@ -179,7 +216,7 @@
       .on { display: none; }
 
       .on, .off {
-        color: white;
+        color: #212529;
         position: absolute;
         transform: translate(-50%,-50%);
         top: 50%;
@@ -225,6 +262,7 @@
         padding-bottom: 5px;
         height: 28px;
         border-bottom: 1px solid #888;
+        border-radius: 0.5rem 0.5rem 0 0;
       }
 
       .modal-header:hover {
@@ -237,7 +275,8 @@
         border: 1px solid #888;
         width: 60%;
         max-height: 100%;
-        overflow: scroll;
+        overflow-y: auto;
+        border-radius: 0.5rem;
       }
 
       @media screen and (max-width: 992px) {
@@ -294,6 +333,22 @@
       }
       th, td { padding: 0.5em 1em 0.5em 1em; }
 
+      .latex sub, .latex sup {
+        text-transform: uppercase;
+      }
+
+      .latex sub {
+        vertical-align: -0.5ex;
+        margin-left: -0.1667em;
+        margin-right: -0.125em;
+      }
+
+      .latex sup {
+        font-size: 0.80em;
+        vertical-align: 0.15em;
+        margin-left: -0.36em;
+        margin-right: -0.15em;
+      }
     </style>
   </head>
   <body>

src/app.js

@@ -6,8 +6,8 @@ canvas.setWidth(window.innerWidth)
 canvas.setHeight(window.innerHeight)
 
 let incompleteColor = '#FFA500'
-let successColor = '#00CC84'
-let failureColor = '#FF2500'
+let successColor = '#4cd625'
+let failureColor = '#dc3545'
 let goodColor = 'black'
 
 const isLearnMode = () => document.getElementById('mode').checked
@@ -156,7 +156,7 @@ ${pf.latex()}
 \\end{prooftree}
 \\end{document}`
   copyToClipboard(code)
-  modalAlert(`LaTeX output for the <code>${pf.conclusion.unicode()}</code> proof tree is copied to the clipboard!`)
+  modalAlert(`<span class="latex">L<sup>a</sup>T<sub>e</sub>X</span> output for the <code>${pf.conclusion.unicode()}</code> proof tree is copied to the clipboard!`)
 }
 
 const removeProof = i => {
@@ -185,7 +185,7 @@ const refreshList = () => {
     ol.innerHTML += `<li value="${i}">
                         ${entry.proof.conclusion.unicode()}
                         <br>
-                        <button onclick="javascript:giveLatex(${i})">LaTeX</button>
+                        <button onclick="javascript:giveLatex(${i})" class="latex">L<sup>a</sup>T<sub>e</sub>X</button>
                         <button onclick="javascript:removeProof(${i})">✖ Delete</button>
                         <button onclick="javascript:saveProof(${i})">💾 Save</button>
                      </li>`
@@ -303,7 +303,7 @@ const help = () => {
 You can click on the <span style="color: ${incompleteColor}">orange</span> scissors button (✄) to <strong>detach</strong> a proof, i.e. to create a separate proof tree with the current branch and changing the original one into an incomplete one. You can also <strong>attach</strong> a separate proof on another one by <strong>dragging</strong> the subtree and <strong>dropping</strong> on the main one.
   </p>
   <p>
-    As you work on the proof, you can click on the buttons on the left bar to either copy the LaTeX output for a given proof, or to save that proof onto your computer as a file. You can later reload the proof file into the proof assistant by clicking the "Load proof file" button on the top bar.
+    As you work on the proof, you can click on the buttons on the left bar to either copy the <span class="latex">L<sup>a</sup>T<sub>e</sub>X</span> output for a given proof, or to save that proof onto your computer as a file. You can later reload the proof file into the proof assistant by clicking the "Load proof file" button on the top bar.
   </p>
   <br>
   <h3>Modes of usage</h3>