From 53ccca391d317f3d9b7c5cb693979451a4655836 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Sun, 28 Apr 2024 13:48:41 -0400
Subject: fix transform origin

---
 src/client/views/nodes/trails/PresBox.scss | 12 ++++++++----
 src/client/views/nodes/trails/PresBox.tsx  |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 7a2733146..2c56cf698 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -47,9 +47,12 @@
 .presBox-effect-container {
     cursor: pointer;
     overflow: hidden;
-    position: relative;
+    // position: relative;
     width: 80px;
     height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     /* background-color: #1f2028; */
     border: 1px solid rgb(118, 118, 118);
     border-radius: 8px;
@@ -58,12 +61,13 @@
 .presBox-effect-demo-box {
     width: 40px;
     height: 40px;
-    position: absolute;
-    top: 20px;
-    left: 20px;
+    // position: absolute;
+    // top: 20px;
+    // left: 20px;
     border-radius: 4px;
     // default bg
     background-color: rgb(37, 161, 255);
+    // transform-origin: center;
 }
 
 // Bezier editor
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index d6bfda54f..2d93f8656 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -2301,7 +2301,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                                 });
                                             }}>
                                             <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={elem.effect as PresEffect} tension={elem.stiffness} friction={elem.damping} mass={elem.mass} infinite>
-                                                <div className="presBox-effect-demo-box" style={{ top: elem.effect === PresEffect.Flip ? 0 : '20px', left: elem.effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#ff2599' }}></div>
+                                                <div className="presBox-effect-demo-box"></div>
                                             </SlideEffect>
                                         </div>
                                     ))}
-- 
cgit v1.2.3-70-g09d2