Update the style on the unit conversion modal.

views/dashboardPage/css/modal.css

@@ -195,17 +195,19 @@
 
         .convertUnitOption{
             display: flex;
-            justify-content: space-between;
-            margin: 10px;
-            height: 35px;
+            flex-direction: column;
+            margin: 10px 0;
+            border-bottom: 3px solid rgb(255, 99, 107);
         }
 
-            .convertUnitOption div{
-                display: flex;
-                align-items: center;
-                width: 33%;
+            .convertInputBox{
+                margin: 0 10px;
             }
 
-            .convertUnitOption input{
-                max-width: 75%;
+            .convertInputBox > input{
+                max-width: 150px;
+            }
+
+            .convertUnitOption > div{
+                display: flex;
             }

views/dashboardPage/ejs/modal.ejs

@@ -109,18 +109,22 @@
 
                 <template id="convertUnitOption">
                     <div class="convertUnitOption">
-                        <div>
-                            <input type="number" step="0.01">
-
-                            <h2></h2>
-                        </div>
-
-                        <h1>=</h1>
+                        <h2></h2>
 
                         <div>
-                            <input type="number" step="0.01">
-
-                            <h2></h2>
+                            <div class="convertInputBox">
+                                <input type="number" step="0.01">
+    
+                                <p></p>
+                            </div>
+    
+                            <h1>=</h1>
+    
+                            <div class="convertInputBox">
+                                <input type="number" step="0.01">
+    
+                                <p></p>
+                            </div>
                         </div>
                     </div>
                 </template>

views/dashboardPage/js/modal.js

@@ -300,19 +300,20 @@ let modal = {
 
         for(let i = 0; i < data.mismatchUnits.length; i++){
             let conversion = template.cloneNode(true);
-            conversion.children[0].children[0].value = data.mismatchUnits[i].newIngredient.quantity;
-            conversion.children[0].children[1].innerText = data.mismatchUnits[i].newIngredient.unit.toUpperCase();
-            conversion.children[2].children[1].innerText = data.mismatchUnits[i].ingredient.unit.toUpperCase();
+            conversion.children[0].innerText = data.mismatchUnits[i].ingredient.name;
+            conversion.children[1].children[0].children[0].value = data.mismatchUnits[i].newIngredient.quantity;
+            conversion.children[1].children[0].children[1].innerText = data.mismatchUnits[i].newIngredient.unit.toUpperCase();
+            conversion.children[1].children[2].children[1].innerText = data.mismatchUnits[i].ingredient.unit.toUpperCase();
             container.appendChild(conversion);
         }
 
         //Submit conversions
         document.getElementById("submitAlternateUnits").onclick = ()=>{
             for(let i = 0; i < container.children.length; i++){
-                let inputLeft = container.children[i].children[0].children[0].value;
-                let inputRight = container.children[i].children[2].children[0].value;
+                let inputLeft = container.children[i].children[1].children[0].children[0].value;
+                let inputRight = container.children[i].children[1].children[2].children[0].value;
                 if(inputLeft === "" || inputRight === "" || inputLeft === 0 || inputRight === 0){
-                    controller.createBanner("ALL FIELDS ARE REQUIRED");
+                    controller.createBanner("ALL FIELDS ARE REQUIRED", "error");
                     return;
                 }