bugs fixes from other comp

1 files changed, 62 insertions, 34 deletions

diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index a87b0e466..5346efe0e 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -153,7 +153,6 @@ $light-background: #ececec;
         margin-left: 5px;
         margin-top: 5px;
         margin-bottom: 5px;
-        margin-right: 5px;
         width: max-content;
         justify-content: center;
         align-items: center;
@@ -161,6 +160,29 @@ $light-background: #ececec;
         padding-left: 10px;
     }
 
+    .ribbon-propertyUpDown {
+        height: 20;
+        width: 20;
+        margin-top: 5px;
+        display: grid;
+        grid-template-rows: 10px 10px;
+
+        .ribbon-propertyUpDownItem {
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            background: black;
+        }
+
+        .ribbon-propertyUpDownItem:hover {
+            background: darkgrey;
+            transform: scale(1.05);
+        }
+    }
+
     .presBox-subheading {
         font-size: 11;
         font-weight: 400;
@@ -254,6 +276,18 @@ $light-background: #ececec;
         width: 100%;
     }
 
+    .presBox-input {
+        width: 30;
+        height: 100%;
+        background: none;
+        border: none;
+        text-align: right;
+    }
+
+    .presBox-input:focus {
+        outline: none;
+    }
+
     .ribbon-frameSelector {
         border: black solid 1px;
         width: 60px;
@@ -399,11 +433,9 @@ $light-background: #ececec;
         grid-template-rows: max-content auto;
         justify-self: center;
         margin-top: 10px;
-        /* padding-left: 10px; */
         padding-right: 10px;
         letter-spacing: normal;
         width: 100%;
-        /* max-width: 100%; */
         height: max-content;
         font-weight: 500;
         position: relative;
@@ -412,9 +444,33 @@ $light-background: #ececec;
         border-bottom: solid 1px darkgrey;
 
         .presBox-dropdown:hover {
-            border: solid 1px #378AD8;
-            border-bottom-left-radius: 0px;
+            border: solid 1px $dark-blue;
+
+            .presBox-dropdownIcon {
+                color: $dark-blue;
+            }
+        }
+
+        .presBox-dropdown {
+            display: grid;
+            grid-template-columns: auto 20%;
+            position: relative;
+            border: solid 1px black;
+            background-color: $light-background;
+            border-radius: 5px;
+            font-size: 10;
+            height: 25;
+            padding-left: 5px;
+            align-items: center;
+            margin-top: 5px;
+            margin-bottom: 5px;
+            font-weight: 200;
+            width: 100%;
+            min-width: max-content;
+            max-width: 200px;
+            overflow: visible;
 
+            
             .presBox-dropdownOption {
                 font-size: 11;
                 display: block;
@@ -431,7 +487,7 @@ $light-background: #ececec;
 
             .presBox-dropdownOption.active {
                 position: relative;
-                background-color: #aedef8;
+                background-color: $light-blue;
             }
 
             .presBox-dropdownOptions {
@@ -449,34 +505,6 @@ $light-background: #ececec;
             }
 
             .presBox-dropdownIcon {
-                color: #378AD8;
-            }
-        }
-
-        .presBox-dropdown {
-            display: grid;
-            grid-template-columns: auto 20%;
-            position: relative;
-            border: solid 1px black;
-            background-color: $light-background;
-            border-radius: 5px;
-            font-size: 10;
-            height: 25;
-            padding-left: 5px;
-            align-items: center;
-            margin-top: 5px;
-            margin-bottom: 5px;
-            font-weight: 200;
-            width: 100%;
-            min-width: max-content;
-            max-width: 200px;
-            overflow: visible;
-
-            .presBox-dropdownOptions {
-                display: none;
-            }
-
-            .presBox-dropdownIcon {
                 position: relative;
                 color: black;
                 align-self: center;