Merge remote-tracking branch 'origin/zaul-new-branch' into moreUpgrading

1 files changed, 114 insertions, 4 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 9b00c30cf..8353ecc0e 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -14,15 +14,124 @@
     .mapBox-searchbar {
         display: flex;
         flex-direction: row;
+        gap: 5px;
+        align-items: center;
         width: calc(100% - 40px);
-        .editableText-container {
-            width: 100%;
-            font-size: 16px !important;
+
+        // .editableText-container {
+        //     width: 100%;
+        //     font-size: 16px !important;
+        // }
+        // input {
+        //     width: 100%;
+        // }
+    }
+
+    .mapbox-settings-panel{
+        z-index: 900;
+        padding: 10px 20px;
+        display: flex;
+        background-color: rgb(187, 187, 187);
+        font-size: 1.3em;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 7px;
+        position: absolute;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        .mapbox-style-select{
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            gap: 4px;
         }
-        input {
+
+        .mapbox-terrain-selection{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 4px;
+        }
+
+    }
+
+    .mapbox-geocoding-search-results {
+        z-index: 900;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        position: absolute;
+        background-color: rgb(187, 187, 187);
+        font-size: 1.4em;
+        padding: 10px;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+
+        .search-result-container {
             width: 100%;
+            padding: 10px;
+            &:hover{
+                background-color: lighten(rgb(187, 187, 187), 10%);
+            }
         }
+
+    }
+
+    .animation-panel {
+        z-index: 900;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        position: absolute;
+        background-color: rgb(187, 187, 187);
+        padding: 10px;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        width: 100%;
+
+        #route-to-animate-title {
+            font-size: 1.25em;
+            font-weight: bold;
+        }
+
+        .route-animation-options {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            gap: 7px;
+
+            .animation-suboptions{
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                gap: 7px;
+
+                label{
+                    margin-bottom: 0;
+                }
+    
+                .speed-label{
+                    margin-right: 5px;
+                }
+
+                #last-divider{
+                    margin-left: 10px;
+                    margin-right: 10px;
+                }
+            }
+
+            
+        }
+
     }
+
+
     .mapBox-topbar {
         display: flex;
         flex-direction: row;
@@ -106,3 +215,4 @@
         display: block;
     }
 }
+