1 files changed, 133 insertions, 30 deletions

diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 08d9e6010..da1d352f2 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -5,42 +5,136 @@
     width: 100%;
     height: 100%;
     position: relative;
+    background: gray;
     z-index: 0;
     pointer-events: none;
     display: flex;
     p {
+        // bcz: what is this styling for?  if text in the comparison box is colored, then this causes it to render with a black outline
         color: rgb(0, 0, 0);
         -webkit-text-stroke-color: black;
         -webkit-text-stroke-width: 0.2px;
     }
-
     .input-box {
-        position: relative;
+        position: absolute;
+        top: 50;
         padding: 10px;
         width: 100%;
-        height: 100%;
+        height: 70%;
         display: flex;
     }
 
     .submit-button {
-        position: relative;
+        position: absolute;
         padding-bottom: 10px;
+        padding-top: 5px;
         padding-left: 5px;
         padding-right: 5px;
-        width: 100%;
-        height: 15%;
-        display: flex;
+        // width: 80%;
+        border-radius: 2px;
+        height: 17%;
+        display: inline-block;
+        bottom: 0;
+        // right: 0;
+
+        &.schema-header-button {
+            color: gray;
+            margin: 3px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            svg {
+                width: 15px;
+            }
+        }
+
+        &.pronunciation {
+            width: 40%;
+            align-items: center;
+            justify-content: center;
+        }
+        &.submit {
+            width: 40%;
+            // float: right;
+
+            // position: absolute;
+            // position: 10px;
+            // padding-left: 35%;
+            // padding-right: 80%;
+            // // width: 80px;
+            // // right: 0;
+            // right: 0;
+            // bottom: 0;
+        }
+        &.record {
+            width: 20%;
+            float: left;
+            border-radius: 2px;
+            // right: 0;
+            // height: 30%;
+        }
 
         button {
-            flex: 1;
-            position: relative;
+            // flex: 1;
+            // position: relative;
         }
     }
+
+    .dropbtn {
+        background-color: #3498db;
+        color: white;
+        padding: 16px;
+        font-size: 16px;
+        border: none;
+    }
+
+    .dropup {
+        position: absolute;
+        display: inline-block;
+        margin-top: 150px;
+        bottom: 0;
+    }
+
+    .dropup-content {
+        display: none;
+        position: absolute;
+        background-color: #f1f1f1;
+        min-width: 160px;
+        bottom: 40px;
+        z-index: 1000;
+    }
+
+    .dropup-content a {
+        color: black;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+    }
+
+    .dropup-content a:hover {
+        background-color: #ccc;
+    }
+
+    .dropup:hover .dropup-content {
+        display: block;
+    }
+
+    .dropup:hover .dropbtn {
+        background-color: #2980b9;
+    }
+
     textarea {
         flex: 1;
         padding: 10px;
-        position: relative;
+        // position: relative;
         resize: none;
+        position: 'absolute';
+        width: '91%';
+        height: '80%';
+        z-index: '-1';
+        overscroll-behavior: contain;
     }
 
     .clip-div {
@@ -117,6 +211,33 @@
             opacity: 0.5;
         }
     }
+
+    .loading-spinner {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 90%;
+        width: 93%;
+        font-size: 20px;
+        font-weight: bold;
+        color: #0b0a0a;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+}
+
+.comparisonBox-explain {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 200;
+    // padding: 5px;
+    background: #dfdfdf;
+    pointer-events: none;
 }
 
 .comparisonBox-interactive {
@@ -128,8 +249,9 @@
             display: flex;
         }
     }
+
     // .input-box {
-    //     position: relative;
+    //     position: absolute;
     //     padding: 10px;
     // }
     // input[type='text'] {
@@ -216,24 +338,5 @@
                 }
             }
         }
-
-        .loading-circle {
-            position: relative;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: 3px solid #ccc;
-            border-top-color: #333;
-            animation: spin 1s infinite linear;
-        }
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
     }
 }