Merge branch 'main' into simulation

app/src/styles/abstracts/variables.scss

@@ -27,7 +27,7 @@ $input-text-color-dark: #b5b5c8; // Input field text color for dark mode
 
 // Accent colors
 $accent-color: #6f42c1; // Primary accent color
-$accent-color-dark: #b392f0; // Primary accent color for dark mode
+$accent-color-dark: #c4abf1; // Primary accent color for dark mode
 $highlight-accent-color: #e0dfff; // Highlighted accent for light mode
 $highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode
 
@@ -45,6 +45,7 @@ $border-color-dark: #403e6a; // Border color for dark mode
 
 // Shadow color
 $shadow-color: #3c3c431a; // Shadow base color for light and dark mode
+$shadow-color-dark: #8f8f8f1a; // Shadow base color for light and dark mode
 
 // Gradients
 $acent-gradient-dark: linear-gradient(

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}; // Main shadow color
+  --shadow-main-dark: #{$shadow-color-dark}; // 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

app/src/styles/components/input.scss

@@ -1,6 +1,22 @@
 @use "../abstracts/variables" as *;
 @use "../abstracts/mixins" as *;
 
+// global input style
+
+input {
+  width: 100%;
+  padding: 2px 4px;
+  border-radius: #{$border-radius-small};
+  border: 1px solid var(--border-color);
+  outline: none;
+  background: transparent;
+
+  &:focus,
+  &:active {
+    border: 1px solid var(--accent-color);
+  }
+}
+
 .input-value {
   color: var(--input-text-color);
   font-size: var(--font-size-regular);
@@ -169,7 +185,6 @@
     display: flex;
     justify-content: space-between;
     cursor: pointer;
-    border: 1px solid var(--primary-color);
     border-radius: 6px;
     background-color: var(--background-color);
   }
@@ -214,8 +229,8 @@
   position: relative;
 
   .dropdown {
-    top: 3px;
-    right: 3px;
+    top: 2px;
+    right: 2px;
     position: absolute;
     background: var(--highlight-accent-color);
     border-radius: #{$border-radius-small};
@@ -228,19 +243,6 @@
   }
 }
 
-input {
-  width: 100%;
-  padding: 2px 4px;
-  border-radius: #{$border-radius-small};
-  border: 1px solid var(--border-color);
-  outline: none;
-
-  &:focus,
-  &:active {
-    border: 1px solid var(--accent-color);
-  }
-}
-
 .eye-dropper-input-container {
   display: flex;
   align-items: center;
@@ -607,6 +609,7 @@ input {
 
     input {
       border: none;
+      background: transparent;
 
       &::placeholder {
         color: var(--text-disabled);

app/src/styles/components/menu/menu.scss

@@ -96,7 +96,10 @@
             }
             &:hover {
               background-color: var(--highlight-accent-color);
-              color: var(--highlight-accent-color);
+              span,
+              .menu-item-right span {
+                color: var(--accent-color);
+              }
             }
 
             .menu-item-right {
@@ -138,7 +141,9 @@
               color: var(--text-color);
               &:hover {
                 background-color: var(--highlight-accent-color);
-                color: var(--highlight-accent-color);
+                span {
+                  color: var(--accent-color);
+                }
               }
               .shortcut {
                 color: var(--text-color);
@@ -150,7 +155,9 @@
 
       &:hover {
         background-color: var(--highlight-accent-color);
-        color: var(--highlight-accent-color);
+        .menu-button {
+          color: var(--accent-color);
+        }
       }
     }
   }

app/src/styles/layout/sidebar.scss

@@ -253,6 +253,10 @@
 
       .user-profile-container {
         display: flex;
+        .user-profile{
+          background: var(--accent-color);
+          color: var(--primary-color);
+        }
 
         .user-organization {
           height: 26px;
@@ -665,6 +669,10 @@
         font-weight: var(--font-weight-regular);
         padding: 8px 0;
       }
+      .input-toggle-container{
+        padding: 0;
+        margin-bottom: 6px;
+      }
 
       .value-field-container {
         margin-bottom: 6px;

app/src/styles/main.scss

@@ -32,7 +32,10 @@
 @use 'layout/toast';
 
 // pages
-@use 'pages/dashboard.scss';
+@use 'pages/dashboard';
 @use 'pages/home';
 @use 'pages/realTimeViz';
-@use 'pages/userAuth';
+@use 'pages/userAuth';
+
+// 
+@use './scene/scene'

app/src/styles/pages/realTimeViz.scss

@@ -22,7 +22,7 @@
     min-height: 83px;
     background: var(--background-color);
     border: 1.23px solid var(--border-color);
-    box-shadow: 0px 4.91px 4.91px 0px #0000001c;
+    box-shadow: var(--box-shadow-heavy);
     border-radius: $border-radius-medium;
     padding: 18px;
     position: absolute;
@@ -31,6 +31,7 @@
 
   .scene-container {
     overflow: hidden;
+    background: #232323;
   }
 
   .icon {

app/src/styles/scene/scene.scss

@@ -0,0 +1,23 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.distance-text-wrapper {
+  pointer-events: none !important;
+}
+.distance-text {
+  pointer-events: none !important;
+  .distance {
+    position: absolute;
+    transform: translate(-50%, -50%) scale(.8);
+    pointer-events: none !important;
+    white-space: nowrap;
+    // style
+    font-size: var(--font-size-large);
+    padding: 2px 8px;
+    background: var(--primary-color);
+    color: var(--accent-color);
+    outline: 1px solid var(--accent-color);
+    border-radius: #{$border-radius-medium};
+    box-shadow: var(--box-shadow-light);
+  }
+}