preliminary react-spring anims

1 files changed, 34 insertions, 18 deletions

diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 7f687c2dc..23c170cf7 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -17,6 +17,10 @@
     // gap: 16px;
 }
 
+.presBox-icon-list {
+    display: flex;
+    gap: 8px;
+}
 .pres-chatbox-container {
     padding: 16px;
     outline: 1px solid #999999;
@@ -42,12 +46,15 @@
     border-radius: 4px;
 }
 
-.presBox-easing-function-options {
+.presBox-option-block {
     display: flex;
     flex-direction: column;
-    align-items: center;
     gap: 1rem;
-    padding: 8px;
+    // padding: 8px;
+}
+
+.presBox-option-center {
+    align-items: center;
 }
 
 .presBox-cont {
@@ -231,7 +238,9 @@
     transition: 0.7s;
 
     .ribbon-doubleButton {
-        display: inline-flex;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
     }
 
     .presBox-reactiveGrid {
@@ -259,16 +268,18 @@
     .ribbon-property {
         font-size: 11;
         font-weight: 200;
-        height: 20;
-        display: flex;
-        margin-left: 5px;
-        margin-top: 5px;
-        margin-bottom: 5px;
-        width: max-content;
-        justify-content: center;
-        align-items: center;
-        padding-right: 10px;
-        padding-left: 10px;
+        padding: 8px;
+        border-radius: 4px;
+        // height: 20;
+        // display: flex;
+        // margin-left: 5px;
+        // margin-top: 5px;
+        // margin-bottom: 5px;
+        // width: max-content;
+        // justify-content: center;
+        // align-items: center;
+        // padding-right: 10px;
+        // padding-left: 10px;
     }
 
     .ribbon-propertyUpDown {
@@ -465,11 +476,16 @@
     }
 
     .presBox-input {
-        width: 30;
-        height: 100%;
-        background: none;
         border: none;
-        text-align: right;
+        background-color: transparent;
+        width: 40;
+        // padding: 8px;
+        // border-radius: 4px;
+        // width: 30;
+        // height: 100%;
+        // background: none;
+        // border: none;
+        // text-align: right;
     }
 
     .presBox-input:focus {