updated realTime vis panel smooth transition

app/src/styles/components/analysis/ROISummary.scss

@@ -239,25 +239,25 @@
         height: 125px;
         overflow-y: hidden;
         position: relative;
+        .semi-circle {
+            width: 100%;
+            height: 250px;
+            border-radius: 50%;
+            position: relative;
+            transition: background 0.5s ease;
+        }
+        .progress-cover {
+            position: absolute;
+            width: 75%;
+            height: 75%;
+            top: 12.5%;
+            left: 12.5%;
+            background: #000000cc;
+            border-radius: 50%;
+        }
     }
 
-    .semi-circle {
-        width: 100%;
-        height: 250px;
-        border-radius: 50%;
-        position: relative;
-        transition: background 0.5s ease;
-    }
 
-    .progress-cover {
-        position: absolute;
-        width: 75%;
-        height: 75%;
-        top: 12.5%;
-        left: 12.5%;
-        background-color: var(--background-color);
-        border-radius: 50%;
-    }
 
     .label-wrapper {
         .label {
@@ -305,14 +305,7 @@
             text-align: left;
         }
 
-        .total-row {
-            background-color: #f4f4f4;
-            font-weight: bold;
-        }
 
-        .net-profit-row {
-            background-color: #dff0d8;
-            font-weight: bold;
-        }
+
     }
 }

app/src/styles/components/analysis/analysis.scss

@@ -7,7 +7,7 @@
     align-items: start;
     width: 100%;
     height: 100vh;
-    // pointer-events: none;k
+    // pointer-events: none;
     z-index: 10000;
 
     .analysis-wrapper {
@@ -25,6 +25,7 @@
     padding: 8px;
 
     .analysis-card-wrapper {
+        width: 100%;
         background: var(--background-color);
         border-radius: 14px;
         padding: 16px;
@@ -66,7 +67,8 @@
 
             .progress-bar {
                 position: relative;
-                width: 36px;
+                // width: 36px;
+                width: 100%;
                 height: 4px;
                 border-radius: 13px;
                 overflow: hidden;

app/src/styles/components/simulation/simulation.scss

@@ -10,7 +10,7 @@
   width: 70%;
 
   .simulation-player-container {
-    background-color: var(--background-color);
+    background: var(--background-color);
     padding: 7px;
     border-radius: 15px;
     display: flex;
@@ -18,7 +18,10 @@
     gap: 8px;
 
     .progresser-wrapper {
-      background-color: var(--highlight-accent-color);
+
+      outline: 1px solid var(--border-color);
+      background: var(--background-color);
+      // background-color: var(--highlight-accent-color);
       padding: 4px 5px;
       border-radius: 12px;
       display: flex;
@@ -61,7 +64,8 @@
             height: 8px;
             border-radius: 5px;
             // overflow: hidden;
-            background-color: var(--highlight-accent-color);
+            outline: 1px solid var(--border-color);
+            background: var(--background-color);
 
             .progress {
               border-radius: 5px;
@@ -82,7 +86,8 @@
         cursor: pointer;
 
         &:hover {
-          background: var(--highlight-accent-color);
+          outline: 1px solid var(--border-color);
+          background: var(--background-color);
           color: var(--accent-color);
 
           path {
@@ -94,7 +99,7 @@
 
     .speed-control-container {
       @include flex-center;
-      gap: 18px;
+      gap: 32px;
       padding: 5px 16px;
       // background: var(--background-color);
       border-radius: #{$border-radius-medium};
@@ -122,7 +127,8 @@
         .speed-label {
           font-size: var(--font-size-tiny);
           position: absolute;
-          bottom: -4px;
+          bottom: -7px;
+          transform: translate(-50%, -0%);
 
           &:first-child {
             left: 0;
@@ -171,13 +177,14 @@
             z-index: 2;
           }
         }
-        .marker{
-            position: absolute;
-            background-color: var(--text-disabled);
-            width: 2px;
-            height: 12px;
-            border-radius: 1px;
-            top: 8px;
+
+        .marker {
+          position: absolute;
+          background-color: var(--text-disabled);
+          width: 2px;
+          height: 12px;
+          border-radius: 1px;
+          top: 8px;
         }
 
         .marker.marker-10 {
@@ -239,9 +246,8 @@
 
         .timeline {
           padding: 16px;
-          // background: #f5f3fa;
-          background: linear-gradient(90.17deg, rgba(255, 255, 255, 0.64) 1.53%, rgba(255, 255, 255, 0.48) 98.13%);
-
+          outline: 1px solid var(--border-color);
+          background: var(--background-color);
           border-radius: 30px;
           display: flex;
           align-items: center;
@@ -271,9 +277,8 @@
               background-color: #d3d3e2;
 
               &.filled {
-                background-color: #8f5cf2;
-
-                border: 4px solid var(--accent-color);
+                background-color: var(--accent-color);
+                border: 4px solid #8f5cf2;
               }
             }
           }
@@ -302,7 +307,8 @@
 .processDisplayer {
   border-radius: 5px;
   // overflow: hidden;
-  background-color: var(--highlight-accent-color);
+  outline: 1px solid var(--border-color);
+  background: var(--background-color);
   padding: 14px 6px;
   position: relative;