Merge remote-tracking branch 'origin/simulation' into realTimeVisulization

app/src/styles/base/base.scss

@@ -58,7 +58,7 @@
   --border-color: #{$border-color-dark}; // Border color for dark theme
 
   // Shadow variables
-  --shadow-main-dark: #{$shadow-color-dark}; // Main shadow color
+  --shadow-main-dark: #{$shadow-color}; // Main shadow color
   --box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow
   --box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow
   --box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow
@@ -75,6 +75,7 @@
   height: 100vh; // Full viewport height
   width: 100vw; // Full viewport width
   overflow: hidden; // Prevent scrollbars
+  background-color: #232323;
 }
 
 // Root overlay styles
@@ -123,7 +124,7 @@ body {
   /* Scrollbar handle color */
   border-radius: 4px;
   /* Rounded corners */
-  border: 2px solid #f4f4f4;
+  border: 2px solid var(--primary-color);
   /* Padding around the scrollbar handle */
 }
 

app/src/styles/components/input.scss

@@ -10,6 +10,7 @@ input {
   border: 1px solid var(--border-color);
   outline: none;
   background: transparent;
+  color: var(--input-text-color);
 
   &:focus,
   &:active {
@@ -552,6 +553,11 @@ input {
     .input-value {
       width: 40px;
       text-align: center;
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
     }
   }
 }

app/src/styles/components/marketPlace/marketPlace.scss

@@ -26,9 +26,6 @@
     width: 100%;
     height: 100%;
     overflow: auto;
-    left: calc(120px / 2);
-    top: 100px;
-    padding: 14px;
     padding-bottom: 60px;
     display: flex;
     flex-direction: column;
@@ -39,6 +36,8 @@
       display: flex;
       align-items: center;
       gap: 12px;
+      margin-top: 2px;
+      padding: 0 24px;
 
       .search-wrapper {
         min-width: 60%;
@@ -143,6 +142,7 @@
           .assets-container {
             display: flex;
             justify-content: space-between;
+            padding: 0;
 
             .name-container {
               display: flex;
@@ -177,6 +177,9 @@
           }
 
           .vendor-icon {
+            display: flex;
+            align-items: center;
+            gap: 4px;
             font-weight: #{$bold-weight};
             font-size: $regular;
           }

app/src/styles/pages/realTimeViz.scss

@@ -3,7 +3,7 @@
 
 // Main Container
 .realTime-viz {
-  background-color: var(--background-color);
+  background-color: #131313;
   border-radius: 20px;
   box-shadow: $box-shadow-medium;
   width: calc(100% - (320px + 270px + 90px));
@@ -22,7 +22,7 @@
     min-height: 83px;
     background: var(--background-color);
     border: 1.23px solid var(--border-color);
-    box-shadow: var(--box-shadow-heavy);
+    box-shadow: 0px 4.91px 4.91px 0px #0000001c;
     border-radius: $border-radius-medium;
     padding: 18px;
     position: absolute;
@@ -31,7 +31,6 @@
 
   .scene-container {
     overflow: hidden;
-    background: #232323;
   }
 
   .icon {
@@ -192,9 +191,9 @@
         height: 25% !important;
         min-height: 150px;
         max-height: 100%;
-        border: 1px dashed #a9a9a9;
+        // border: 1px dashed var(--background-color-gray);
         border-radius: 8px;
-        box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1);
+        box-shadow: var(--box-shadow-medium);
         padding: 6px 0;
         background-color: var(--background-color);
         position: relative;
@@ -534,7 +533,7 @@
 
 .zone {
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--highlight-accent-color);
   border-radius: 5px;
   cursor: pointer;
 }
@@ -615,10 +614,6 @@
   }
 }
 
-
-
-
-
 .distance-line {
   position: absolute;
   border-style: dashed;

app/src/styles/pages/userAuth.scss

@@ -69,7 +69,7 @@
   }
 
   .error-message {
-    color: #ff4d4f;
+    color: #f3453f;
     font-size: 12px;
     margin-bottom: 10px;
   }
@@ -89,7 +89,7 @@
       border-radius: #{$border-radius-extra-large};
       background: var(--background-color);
       font-size: 14px;
-      color: #333;
+      color: var(--input-text-color);
 
       &:focus {
         border-color: var(--accent-color);