Refactor UI components and styles for improved layout and consistency

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,11 +191,11 @@
         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: white;
+        background-color: var(--background-color);
         position: relative;
 
         .kebab {
@@ -534,7 +533,7 @@
 
 .zone {
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--highlight-accent-color);
   border-radius: 5px;
   cursor: pointer;
 }
@@ -614,10 +613,6 @@
   }
 }
 
-
-
-
-
 .distance-line {
   position: absolute;
   border-style: dashed;