refactor: Update SVG attributes for consistency and improve styling in analysis icons; remove unused imports in ProductionCapacity component; enhance simulation player UI with custom slider wrapper

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

@@ -45,8 +45,7 @@
         .sub-header {
           font-weight: 300;
           font-size: var(--font-size-tiny);
-          color: var(--text-color);
-          opacity: 0.8;
+          color: var(--text-button-color);
         }
       }
 
@@ -98,6 +97,7 @@
 
       .metrics-section {
         padding-top: 16px;
+        border-top: 1px solid var(--background-color-gray);
 
         .metric {
           display: flex;
@@ -164,9 +164,6 @@
 
         .footer-card {
           width: 100%;
-          background: var(--background-color-gray);
-
-          border: 1px solid var(--border-color);
           background: var(--background-color);
           border-radius: 6px;
           padding: 8px;
@@ -231,7 +228,6 @@
               width: 100%;
               gap: 6px;
               padding-top: 3px;
-
               .shift-wrapper {
                 display: flex;
                 align-items: center;
@@ -275,11 +271,6 @@
     }
   }
 
-  .roiSummary-container {
-    max-height: 60vh;
-    overflow-y: auto;
-  }
-
   .roiSummary-wrapper {
     max-width: 470px;
     background-color: var(--background-color);
@@ -300,19 +291,15 @@
       border: 1px solid var(--border-color);
 
       .info {
-        opacity: 0.8;
-
         span {
           font-size: var(--font-size-xlarge);
 
           &:first-child {
             color: #31c756;
-            opacity: 1;
           }
 
           &:last-child {
             color: var(--text-color);
-            opacity: 1;
           }
         }
       }
@@ -363,8 +350,6 @@
 
           &:last-child {
             align-items: center;
-
-
           }
 
           .metric-label {
@@ -382,21 +367,13 @@
           }
         }
 
-        .metric-item.net-profit {
-          .metric-label {
-
-            span {
-              color: #21ad50;
-            }
-          }
-        }
-
         .metric-wrapper {
           display: flex;
           gap: 6px;
 
           .metric-item {
-            border-radius: #{$border-radius-small};
+            padding: 8px;
+            border-radius: #{$border-radius-large};
             background: var(--background-color);
             border: 1px solid var(--border-color);
           }
@@ -461,7 +438,6 @@
           padding: 8px;
           text-align: left;
           border: 1px solid var(--border-color);
-          font-size: var(--font-size-small);
         }
 
         th {
@@ -502,24 +478,6 @@
             color: #488ef6;
           }
         }
-
-        .placeHolder-wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: 6px;
-          padding-top: 6px;
-
-          .placeHolder {
-            height: 11px;
-            width: 100%;
-            background: #EAEAEA;
-            border-radius: 4px;
-
-            &:nth-child(2) {
-              width: 50%;
-            }
-          }
-        }
       }
     }
 

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

@@ -144,14 +144,21 @@
 
         &::after {
           content: "";
-          background-color: #e5e5ea;
+          background: var(--background-color-solid);
+          opacity: 0.4;
           position: absolute;
           top: 50%;
           transform: translate(0, -50%);
           width: 100%;
           height: 3px;
         }
-
+        .custom-slider-wrapper {
+          height: 100%;
+          width: 100%;
+          padding: 0 26px;
+          background: transparent;
+          border-radius: #{$border-radius-large};
+        }
         .custom-slider {
           height: 100%;
           width: 100%;
@@ -185,11 +192,13 @@
 
         .marker {
           position: absolute;
-          background-color: var(--text-disabled);
+          background: var(--background-color-solid);
+          opacity: 0.6;
           width: 2px;
           height: 12px;
           border-radius: 1px;
           top: 8px;
+          z-index: 1;
         }
 
         .marker.marker-10 {