updating UI

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

@@ -104,7 +104,6 @@
 
       .metrics-section {
         padding-top: 16px;
-        border-top: 1px solid var(--background-color-gray);
 
         .metric {
           display: flex;
@@ -124,7 +123,7 @@
       }
     }
 
-    .throughoutSummary-wrapper {
+    .production-wrapper {
       .process-container {
         display: flex;
         flex-direction: row;
@@ -172,6 +171,8 @@
         .footer-card {
           width: 100%;
           background: var(--background-color-gray);
+
+          border: 1px solid var(--border-color);
           border-radius: 6px;
           padding: 8px;
           display: flex;
@@ -303,15 +304,19 @@
       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;
           }
         }
       }
@@ -361,6 +366,8 @@
 
           &:last-child {
             align-items: center;
+
+
           }
 
           .metric-label {
@@ -378,6 +385,15 @@
           }
         }
 
+        .metric-item.net-profit {
+          .metric-label {
+
+            span {
+              color: #21ad50;
+            }
+          }
+        }
+
         .metric-wrapper {
           display: flex;
           gap: 6px;
@@ -446,6 +462,7 @@
           padding: 8px;
           text-align: left;
           border: 1px solid var(--border-color);
+          font-size: var(--font-size-small);
         }
 
         th {
@@ -486,6 +503,24 @@
             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%;
+            }
+          }
+        }
       }
     }