Refactor styles to use 'background' shorthand property instead of 'background-color' for consistency across components. Updated various components including confirmation pop-up, input fields, lists, marketplace, menu, module toggle, simulation, and more. Enhanced visual effects with backdrop filters and adjusted padding/margins for improved layout. Removed unnecessary styles and optimized hover effects for better user experience.

2025-04-29 16:27:03 +05:30
parent 77a6dda068
commit 45fea9465e
37 changed files with 491 additions and 525 deletions
--- a/app/src/styles/abstracts/variables.scss
+++ b/app/src/styles/abstracts/variables.scss
@@ -10,16 +10,19 @@ $text-color: #2b3344;
 $text-disabled: #b7b7c6;
 $input-text-color: #595965;
 $highlight-text-color: #6f42c1;
+$text-button-color: #f3f3fd;

 // ---------- dark mode ----------
 $text-color-dark: #f3f3fd;
 $text-disabled-dark: #6f6f7a;
 $input-text-color-dark: #b5b5c8;
 $highlight-text-color-dark: #B392F0;
+$text-button-color-dark: #f3f3fd;

 // background colors
 // ---------- light mode ----------
 $background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
+$background-color-solid: #fcfdfd;
 $background-color-secondary: #FCFDFD4D;
 $background-color-accent: #6f42c1;
 $background-color-button: #6f42c1;
@@ -32,6 +35,7 @@ $background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46

 // ---------- dark mode ----------
 $background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
+$background-color-solid-dark: #19191d;
 $background-color-secondary-dark: #19191D99;
 $background-color-accent-dark: #6f42c1;
 $background-color-button-dark: #6f42c1;
@@ -85,15 +89,15 @@ $accent-color-dark: #c4abf1;
 $highlight-accent-color: #e0dfff;
 $highlight-accent-color-dark: #403e6a;

-$background-color: #fcfdfd;
-$background-color-dark: #19191d;
-$background-color-secondary: #e1e0ff80;
-$background-color-secondary-dark: #39394f99;
+// $background-color: #fcfdfd;
+// $background-color-dark: #19191d;
+// $background-color-secondary: #e1e0ff80;
+// $background-color-secondary-dark: #39394f99;
 $background-color-gray: #f3f3f3;
 $background-color-gray-dark: #232323;

-$border-color: #e0dfff;
-$border-color-dark: #403e6a;
+// $border-color: #e0dfff;
+// $border-color-dark: #403e6a;

 $shadow-color: #3c3c431a;
 $shadow-color-dark: #8f8f8f1a;
@@ -141,3 +145,4 @@ $border-radius-medium: 6px;
 $border-radius-large: 12px;
 $border-radius-circle: 50%;
 $border-radius-extra-large: 20px;
+$border-radius-xxx: 30px;
--- a/app/src/styles/base/base.scss
+++ b/app/src/styles/base/base.scss
@@ -4,11 +4,13 @@
  // text colors
  --text-color: #{$text-color};
  --text-disabled: #{$text-disabled};
+  --text-button-color: #{$text-button-color};
  --input-text-color: #{$input-text-color};
  --highlight-text-color: #{$highlight-text-color};

  // background colors
  --background-color: #{$background-color};
+  --background-color-solid: #{$background-color-solid};
  --background-color-secondary: #{$background-color-secondary};
  --background-color-accent: #{$background-color-accent};
  --background-color-button: #{$background-color-button};
@@ -52,11 +54,13 @@
  // text colors
  --text-color: #{$text-color-dark};
  --text-disabled: #{$text-disabled-dark};
+  --text-button-color: #{$text-button-color-dark};
  --input-text-color: #{$input-text-color-dark};
  --highlight-text-color: #{$highlight-text-color-dark};

  // background colors
  --background-color: #{$background-color-dark};
+  --background-color-solid: #{$background-color-solid-dark};
  --background-color-secondary: #{$background-color-secondary-dark};
  --background-color-accent: #{$background-color-accent-dark};
  --background-color-button: #{$background-color-button-dark};
@@ -100,7 +104,7 @@
  height: 100vh;
  width: 100vw;
  overflow: hidden;
-  background-color: var(--background-color-gray);
+  background: var(--background-color-gray);
 }

 #root-over {
@@ -132,8 +136,8 @@ body {
 }

 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 4px;
+  height: 4px;
 }

 ::-webkit-scrollbar-track {
@@ -142,13 +146,12 @@ body {
 }

 ::-webkit-scrollbar-thumb {
-  background: var(--accent-color);
+  background: var(--background-color-button);
  border-radius: 4px;
-  border: 2px solid var(--primary-color);
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: var(--accent-color);
+  background: var(--background-color-button);
 }

 ::-webkit-scrollbar-corner {
--- a/app/src/styles/base/global.scss
+++ b/app/src/styles/base/global.scss
@@ -1,5 +1,9 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 section, .section{
    padding: 12px;
    outline: 1px solid var(--border-color);
-    border-radius: 16px;
+    border-radius: #{$border-radius-large};
+    background: var(--background-color);
 }
--- a/app/src/styles/components/analysis/analysis.scss
+++ b/app/src/styles/components/analysis/analysis.scss
@@ -63,14 +63,14 @@
                height: 4px;
                border-radius: 13px;
                overflow: hidden;
-                background-color: #FBEBD7;
+                background: #FBEBD7;

                .bar-fill {
                    position: absolute;
                    height: 100%;
                    top: 0;
                    left: 0;
-                    background-color: #FC9D2F;
+                    background: #FC9D2F;
                    border-radius: 13px;
                }

@@ -144,7 +144,7 @@
                }

                canvas {
-                    background-color: transparent;
+                    background: transparent;
                }
            }
        }
@@ -200,15 +200,15 @@
                            height: 5px;

                            &:nth-child(1) {
-                                background-color: #F3C64D;
+                                background: #F3C64D;
                            }

                            &:nth-child(2) {
-                                background-color: #67B3F4;
+                                background: #67B3F4;
                            }

                            &:nth-child(3) {
-                                background-color: #7981F5;
+                                background: #7981F5;
                            }
                        }
                    }
@@ -228,21 +228,21 @@
                            &:nth-child(1) {
                                .indicator {

-                                    background-color: #F3C64D;
+                                    background: #F3C64D;
                                }
                            }

                            &:nth-child(2) {
                                .indicator {

-                                    background-color: #67B3F4;
+                                    background: #67B3F4;
                                }
                            }

                            &:nth-child(3) {
                                .indicator {

-                                    background-color: #7981F5;
+                                    background: #7981F5;
                                }
                            }

--- a/app/src/styles/components/confirmationPopUp.scss
+++ b/app/src/styles/components/confirmationPopUp.scss
@@ -11,7 +11,7 @@
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
-        background-color: var(--background-color);
+        background: var(--background-color);
        padding: 14px 12px;
        border-radius: 6px;

@@ -32,7 +32,7 @@
                }

                &:last-child {
-                    background-color: #ffe3e0;
+                    background: #ffe3e0;
                    color: #f65648;
                }

--- a/app/src/styles/components/input.scss
+++ b/app/src/styles/components/input.scss
@@ -15,7 +15,8 @@ input {

  &:focus,
  &:active {
-    outline: 1px solid var(--accent-color);
+    outline: 1px solid var(--border-color-accent);
+    background: var(--background-color-input-focus);
  }

  &:-webkit-autofill,
@@ -27,26 +28,19 @@ input {
    caret-color: var(--input-text-color);

    // Background styles
-    background-color: var(--background-color) !important;
-    -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
+    background: var(--background-color-solid) !important;
+    -webkit-box-shadow: 0 0 0px 1000px var(--background-color-solid) inset !important;
  }

  // File input specific style adjustments
  &::file-selector-button {
    font-size: 14px;
-    color: var(--accent-color);
-    background-color: var(--background-color-secondary);
+    background: var(--background-color-secondary);
    border: none;
    outline: none;
    border-radius: #{$border-radius-small};
    padding: 2px;
    cursor: pointer;
-
-    // Hover effect for the file button
-    &:hover {
-      color: var(--primary-color);
-      background-color: var(--accent-color);
-    }
  }
 }

@@ -93,8 +87,8 @@ input {
  }

  .active {
-    background-color: var(--accent-color);
-    color: var(--primary-color);
+    background: var(--background-color-button);
+    color: var(--text-button-color);
  }
 }

@@ -102,14 +96,13 @@ input {
  position: sticky;
  top: 0;
  padding: 8px 10px;
-  background: var(--background-color);
+  width: 100%;
  z-index: 1;

  .search-container {
    @include flex-center;
    width: 100%;
    border-radius: #{$border-radius-small};
-    background-color: var(--background-color);
    padding: 6px 2px;
    position: relative;
    border: 1px solid var(--border-color);
@@ -129,7 +122,7 @@ input {
      font-weight: var(--font-weight-regular);
      border: none;
      outline: none;
-      background-color: transparent;
+      background: transparent;
      padding-left: 36px;
    }

@@ -141,16 +134,17 @@ input {
      height: 24px;
      border: none;
      cursor: pointer;
-      background-color: transparent;
+      background: transparent;

      &:hover {
-        background-color: var(--highlight-accent-color);
+        background: var(--highlight-accent-color);
      }
    }
  }

  .active {
    border: 1px solid var(--accent-color);
+    background: var(--background-color-input-focus);
  }
 }

@@ -166,7 +160,7 @@ input {
    position: absolute;
    left: 10px;
    top: 12px;
-    background-color: var(--background-color);
+    background: var(--background-color);
    border-radius: #{$border-radius-small};
    box-shadow: var(--box-shadow-medium);
    z-index: 1;
@@ -182,7 +176,7 @@ input {
      gap: 2px;

      &:hover {
-        background-color: var(--background-color-secondary);
+        background: var(--background-color-secondary);
      }

      .icon-container {
@@ -197,11 +191,11 @@ input {
    }

    .selected {
-      background-color: var(--highlight-accent-color);
+      background: var(--highlight-accent-color);
      color: var(--accent-color);

      &:hover {
-        background-color: var(--highlight-accent-color);
+        background: var(--highlight-accent-color);
      }
    }

@@ -226,13 +220,13 @@ input {
    justify-content: space-between;
    cursor: pointer;
    border-radius: 6px;
-    background-color: var(--background-color);
+    background: var(--background-color);
  }

  .dropdown-options {
    position: absolute;
    width: 100%;
-    background-color: var(--primary-color);
+    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: #{$border-radius-small};
    z-index: 10;
@@ -241,6 +235,7 @@ input {
    left: 0;
    top: 110%;
    padding: 4px;
+    backdrop-filter: blur(8px);

    .dropdown-search {
      margin-bottom: 4px;
@@ -253,8 +248,8 @@ input {
      border-radius: #{$border-radius-small};

      &:hover {
-        color: var(--accent-color);
-        background-color: var(--highlight-accent-color);
+        color: var(--highlight-text-color);
+        background: var(--highlight-accent-color);
      }
    }
  }
@@ -318,7 +313,7 @@ input {

  .dropdown-button {
    width: 100%;
-    background-color: var(--background-color) !important;
+    background: var(--background-color) !important;
    border: 1px solid var(--border-color) !important;
    padding: 5px 10px;

@@ -335,11 +330,11 @@ input {
    transition: background-color 0.3s ease;

    &:hover {
-      background-color: #333333;
+      background: #333333;
    }

    &.open {
-      background-color: #333333;
+      background: #333333;
    }
  }

@@ -347,7 +342,7 @@ input {
    position: absolute;
    top: 110%;
    right: -16px;
-    background-color: var(--background-color);
+    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: #{$box-shadow-medium};
@@ -412,7 +407,7 @@ input {
      transition: background-color 0.3s ease;

      &:hover {
-        background-color: var(--background-color);
+        background: var(--background-color);
      }
    }

@@ -435,12 +430,12 @@ input {
        }

        &:hover {
-          background-color: var(--background-color);
+          background: var(--background-color);
        }

        &.open {
          color: var(--accent-color);
-          background-color: var(--highlight-accent-color);
+          background: var(--highlight-accent-color);
        }

        .icon {
@@ -472,8 +467,8 @@ input {
  }

  .check-box {
-    height: 22px;
-    width: 44px;
+    height: 24px;
+    width: 38px;
    background: var(--background-color-secondary);
    border-radius: #{$border-radius-large};
    position: relative;
@@ -481,8 +476,8 @@ input {

    .check-box-style {
      position: absolute;
-      height: 18px;
-      width: 18px;
+      height: 20px;
+      width: 20px;
      top: 2px;
      left: 2px;
      background: var(--accent-color);
@@ -523,7 +518,7 @@ input {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
-        background: var(--primary-color);
+        background: var(--background-color-accent);
        border-radius: #{$border-radius-circle};
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
        cursor: pointer;
@@ -597,19 +592,19 @@ input {
        cursor: not-allowed;

        &::-webkit-slider-thumb {
-          background: var(--primary-color);
+          background: var(--background-color-accent);
          box-shadow: none;
          outline: 4px solid var(--text-disabled);
          outline: -4px;
        }

        &::-moz-range-thumb {
-          background: var(--primary-color);
+          background: var(--background-color-accent);
          box-shadow: none;
        }

        &::-ms-thumb {
-          background: var(--primary-color);
+          background: var(--background-color-accent);
          box-shadow: none;
        }

@@ -644,14 +639,10 @@ input {
    padding: 2px 32px;
    border: none;
    border-radius: #{$border-radius-large};
-    color: var(--text-disabled);
-    background: var(--accent-color);
+    color: var(--text-color);
+    background: var(--background-color-button);
    transition: all 0.2s;
    cursor: pointer;
-
-    &:hover {
-      color: var(--primary-color);
-    }
  }
 }

@@ -710,11 +701,6 @@ input {
        line-height: 12px;
        text-align: center;
        border-radius: #{$border-radius-small};
-
-        &:hover {
-          background: var(--accent-color);
-          color: var(--primary-color);
-        }
      }
    }
  }
@@ -722,8 +708,8 @@ input {
  .invite-button {
    padding: 4px 12px;
    border-radius: #{$border-radius-large};
-    background: var(--accent-color);
-    color: var(--primary-color);
+    background: var(--background-color-accent);
+    color: var(--text-button-color);
  }

  .multi-email-invite-input.active {
@@ -770,7 +756,7 @@ input {
      width: 100%;
      height: 100%;
      border-radius: #{$border-radius-small};
-      background-color: var(--background-color-gray);
+      background: var(--background-color-gray);
    }
  }
 }
--- a/app/src/styles/components/lists.scss
+++ b/app/src/styles/components/lists.scss
@@ -30,8 +30,6 @@
 }

 .list-wrapper {
-
-
  .no-item {
    padding: 12px;
  }
@@ -41,7 +39,6 @@
    // margin-left: 10px;
    overflow: hidden;

-
    .list-item {
      @include flex-space-between;
      width: 100%;
@@ -67,7 +64,7 @@
    }

    .active {
-      background-color: var(--highlight-accent-color);
+      background: var(--highlight-accent-color);
      color: var(--primary-color);
    }
  }
@@ -75,7 +72,6 @@
  .asset-list {
    border-left: 2px solid var(--border-color);

-    margin-left: 20px
+    margin-left: 20px;
  }
-
-}
+}
--- a/app/src/styles/components/marketPlace/marketPlace.scss
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@@ -5,28 +5,28 @@
  height: 100vh;
  width: 100vw;
  z-index: #{$z-index-marketplace};
-  background-color: var(--background-color-secondary);
+  background: var(--background-color-secondary);
  position: absolute;
  left: 0;
  top: 0;
  padding: 100px 50px;
  padding-bottom: 32px;
-  backdrop-filter: blur(6px);
-
+  
  .marketplace-container {
    position: relative;
    padding: 20px 2px;
    height: 100%;
-    background-color: var(--background-color);
+    background: var(--background-color);
    box-shadow: #{$box-shadow-medium};
-    border-radius: #{$border-radius-extra-large};
+    border-radius: #{$border-radius-xxx};
+    outline: 1px solid var(--border-color);
+    backdrop-filter: blur(16px);
  }

  .marketPlace {
    width: 100%;
    height: 100%;
    overflow: auto;
-    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
@@ -83,12 +83,18 @@
        }
      }
    }
-
+    .cards-container-wrapper{
+      position: relative;
+      height: calc(100% - 60px);
+      padding: 0px 10px;
+    }
    .cards-container-container {
-      padding: 0px 20px;
      display: flex;
+      padding: 0 10px;
      flex-direction: column;
      gap: 6px;
+      height: 100%;
+      overflow: auto;

      .header {
        color: var(--text-color);
@@ -107,7 +113,8 @@
          border-radius: 18px;
          padding: 12px;
          box-shadow: 0px 2px 10.5px 0px #0000000d;
-          border: 1px solid var(--background-accent-transparent, #e0dfff80);
+          background: var(--background-color);
+          border: 1px solid var(--border-color);
          position: relative;
          display: flex;
          flex-direction: column;
@@ -124,7 +131,7 @@
            height: 30px;
            border-radius: 10px;
            padding: 5px;
-            background-color: var(--accent-color);
+            background: var(--accent-color);
          }

          .image-container {
@@ -193,11 +200,11 @@

          .buy-now-button {
            width: 100%;
-            background-color: var(--background-color-secondary);
+            background: var(--background-color-button);
            border-radius: $border-radius-extra-large;
            padding: 8px 0;
            @include flex-center;
-            color: var(--accent-color);
+            color: var(--text-button-color);

            &:hover {
              cursor: pointer;
@@ -220,7 +227,7 @@
  .assetPreview {
    width: 100%;
    height: 100%;
-    background-color: var(--background-color);
+    background: var(--background-color);
    display: flex;
    gap: 12px;
    overflow: hidden;
@@ -262,7 +269,7 @@
      border-radius: 50%;
      font-weight: var(--font-weight-bold);
      color: var(--background-color);
-      background-color: var(--accent-color);
+      background: var(--accent-color);
    }

    .organization-details {
@@ -327,7 +334,7 @@
          display: block;
          width: 2px;
          height: 12px;
-          background-color: #ccc;
+          background: #ccc;
        }
      }

@@ -363,7 +370,7 @@
    }

    &:last-child {
-      background-color: var(--accent-color);
+      background: var(--accent-color);
      color: var(--background-color);
    }
  }
--- a/app/src/styles/components/menu/menu.scss
+++ b/app/src/styles/components/menu/menu.scss
@@ -36,7 +36,7 @@
  top: 32px;
  left: 0;
  z-index: 5;
-  background-color: var(--background-color);
+  background: var(--background-color);
  color: var(--text-color);
  box-shadow: var(--box-shadow-light);
  border-radius: 8px;
@@ -73,7 +73,7 @@
        position: absolute;
        top: 0;
        left: 100%;
-        background-color: var(--background-color);
+        background: var(--background-color);
        min-width: 220px;
        border-radius: 4px;
        box-shadow: var(--box-shadow-light);
@@ -95,7 +95,7 @@
              rotate: -90deg;
            }
            &:hover {
-              background-color: var(--highlight-accent-color);
+              background: var(--highlight-accent-color);
              span,
              .menu-item-right span {
                color: var(--accent-color);
@@ -123,7 +123,7 @@
            position: absolute;
            left: 100%;
            top: 0;
-            background-color: var(--background-color);
+            background: var(--background-color);
            min-width: 200px;
            border-radius: 0 4px 4px 4px;
            box-shadow: var(--box-shadow-light);
@@ -140,7 +140,7 @@
              white-space: nowrap;
              color: var(--text-color);
              &:hover {
-                background-color: var(--highlight-accent-color);
+                background: var(--highlight-accent-color);
                span {
                  color: var(--accent-color);
                }
@@ -154,7 +154,7 @@
      }

      &:hover {
-        background-color: var(--highlight-accent-color);
+        background: var(--highlight-accent-color);
        .menu-button {
          color: var(--accent-color);
        }
@@ -164,7 +164,7 @@
  .split {
    width: 100%;
    height: 1px;
-    background-color: var(--highlight-accent-color);
+    background: var(--highlight-accent-color);
    margin: 2px 0;
  }
 }
--- a/app/src/styles/components/moduleToggle.scss
+++ b/app/src/styles/components/moduleToggle.scss
@@ -18,7 +18,8 @@
    padding: 4px 12px;
    border-radius: #{$border-radius-extra-large};
    box-shadow: var(--box-shadow-medium);
-    background-color: var(--background-color);
+    background: var(--background-color);
+    backdrop-filter: blur(8px);
    cursor: pointer;
    overflow: hidden;
    position: relative;
@@ -37,7 +38,7 @@
        left: 0;
        width: 0%;
        height: 100%;
-        background-color: var(--highlight-accent-color);
+        background: var(--highlight-accent-color);
        transition: width 0.2s;
        border-radius: #{$border-radius-extra-large};
    }
@@ -49,15 +50,15 @@
  }
  .active {
    cursor: default;
-    background-color: var(--accent-color);
+    background: var(--background-color-button);
    &::after{
        display: none;
    }
    &:hover {
-      background-color: var(--accent-color);
+      background: var(--background-color-button);
    }
    .module {
-      color: var(--highlight-accent-color);
+      color: var(--icon-default-color-active);
    }
  }
 }
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@@ -17,11 +17,11 @@
        gap: 2px;
        padding: 6px 8px;
        min-width: 64px;
-        background-color: var(--background-color);
+        background: var(--background-color);
        border-radius: #{$border-radius-small};
        cursor: pointer;
        &:hover {
-          background-color: var(--highlight-accent-color);
+          background: var(--highlight-accent-color);
          color: var(--accent-color);
          path {
            stroke: var(--accent-color);
@@ -75,7 +75,7 @@
        }
        .marker{
            position: absolute;
-            background-color: var(--text-disabled);
+            background: var(--text-disabled);
            width: 2px;
            height: 12px;
            border-radius: 1px;
--- a/app/src/styles/components/templates.scss
+++ b/app/src/styles/components/templates.scss
@@ -8,7 +8,7 @@
    outline-offset: -3px;
    border-radius: 16px;
    .follower-name{
-        background-color: var(--user-color);
+        background: var(--user-color);
        color: #FFFFFF;
        padding: 4px 8px;
        padding-top: 16px;
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@@ -13,14 +13,15 @@
  border-radius: #{$border-radius-large};
  width: fit-content;
  transition: width 0.2s;
-  background-color: var(--background-color);
+  background: var(--background-color);
+  backdrop-filter: blur(8px);
  z-index: #{$z-index-default};

  .split {
    height: 20px;
    width: 2px;
    border-radius: 2px;
-    background: var(--highlight-accent-color);
+    background: var(--text-disabled);
  }

  .draw-tools,
@@ -48,10 +49,10 @@
    }

    .active {
-      background-color: var(--accent-color);
+      background: var(--accent-color);

      &:hover {
-        background-color: var(--accent-color);
+        background: var(--accent-color);
      }
    }
  }
@@ -91,7 +92,7 @@
          padding: 4px;

          &:hover {
-            background-color: var(--highlight-accent-color);
+            background: var(--highlight-accent-color);
            color: var(--accent-color);

            path {
@@ -117,7 +118,7 @@
    @include flex-center;
    padding: 3px;
    border-radius: #{$border-radius-small};
-    background-color: var(--highlight-accent-color);
+    background: var(--highlight-accent-color);
    gap: 2px;
    position: relative;

@@ -131,7 +132,7 @@
    &::after {
      content: "";
      position: absolute;
-      background-color: var(--accent-color);
+      background: var(--accent-color);
      left: 3px;
      top: 3px;
      height: 18px;
@@ -161,7 +162,7 @@
  width: 30px;
  height: 30px;
  border-radius: 50%;
-  background-color: var(--highlight-accent-color);
+  background: var(--highlight-accent-color);
  cursor: pointer;
  @include flex-center;
  position: fixed;
@@ -174,7 +175,7 @@
  font-weight: 700;
  &:hover {
    font-weight: 500;
-    background-color: var(--accent-color);
+    background: var(--accent-color);
    color: var(--highlight-accent-color);
    &::after{
      animation: pulse 1s ease-out infinite;
--- a/app/src/styles/components/visualization/floating/common.scss
+++ b/app/src/styles/components/visualization/floating/common.scss
@@ -3,7 +3,7 @@

 .throughput-wrapper,
 .card {
-  background-color: var(--background-color);
+  background: var(--background-color);
  box-shadow: var(--box-shadow-heavy);
  @include flex-center;
  flex-direction: column;
@@ -105,7 +105,7 @@
 }

 .productionCapacity-wrapper {
-  background-color: var(--background-color);
+  background: var(--background-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
@@ -116,7 +116,7 @@
  .headeproductionCapacityr-wrapper,
  .bar-chart {
    padding: 14px;
-    background-color: var(--background-color);
+    background: var(--background-color);
    display: flex;
    flex-direction: column;
    gap: 6px;
@@ -276,7 +276,7 @@
  .icon {
    width: 45px;
    height: 45px;
-    background-color: var(--accent-color);
+    background: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
@@ -289,7 +289,7 @@
  display: flex;
  flex-direction: column;
  gap: 6px;
-  background-color: var(--background-color);
+  background: var(--background-color);
  padding: 14px;

  .header {
@@ -307,7 +307,7 @@

 .productivity-dashboard {
  width: 100%;
-  background-color: var(--background-color);
+  background: var(--background-color);
  color: white;
  padding: 20px;
  border-radius: 8px;
@@ -324,7 +324,7 @@
    }

    .options {
-      background-color: #343b47;
+      background: #343b47;
      width: 30px;
      height: 30px;
      display: flex;
@@ -334,7 +334,7 @@
      cursor: pointer;

      &:hover {
-        background-color: #49505a;
+        background: #49505a;
      }
    }
  }
@@ -350,7 +350,7 @@
      gap: 10px;

      .metric {
-        background-color: #2c3e50;
+        background: #2c3e50;
        padding: 15px;
        border-radius: 4px;

@@ -445,7 +445,7 @@
 }

 .scaleLabels {
-  background-color: var(--background-color);
+  background: var(--background-color);
  box-shadow: var(--box-shadow-heavy);
  display: flex;
  justify-content: space-between;
--- a/app/src/styles/components/visualization/ui/styledWidgets.scss
+++ b/app/src/styles/components/visualization/ui/styledWidgets.scss
@@ -43,7 +43,7 @@
  .icon {
    width: 16.95305824279785px;
    height: 16.95305824279785px;
-    background-color: var(--accent-color);
+    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
--- a/app/src/styles/layout/loading.scss
+++ b/app/src/styles/layout/loading.scss
@@ -4,7 +4,7 @@
 .loading-wrapper {
  height: 100vh;
  width: 100vw;
-  background: var(--background-color);
+  background: var(--background-color-solid);
  .loading-container {
    position: relative;
    height: 100%;
--- a/app/src/styles/layout/popup.scss
+++ b/app/src/styles/layout/popup.scss
@@ -5,13 +5,13 @@
  height: 100vh;
  width: 100vw;
  background: var(--background-color-secondary);
-  backdrop-filter: blur(2px);
  @include flex-center;
  .collaboration-popup-container {
    max-width: 50vw;
-    width: 460px;
-    background-color: var(--background-color);
+    width: 520px;
+    background: var(--background-color);
    border-radius: #{$border-radius-large};
+    backdrop-filter: blur(8px);
    .split {
      width: 100%;
      height: 1px;
@@ -88,14 +88,14 @@
          .your-name {
            @include flex-center;
            gap: 6px;
-            color: var(--accent-color);
+            color: var(--text-color);
            .user-profile{
              height: 24px;
              width: 24px;
              text-align: center;
              line-height: 25px;
-              background-color: var(--accent-color);
-              color: var(--primary-color);
+              background: var(--background-color-accent);
+              color: var(--text-color);
              border-radius: #{$border-radius-circle};
            }
          }
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -6,9 +6,10 @@
  position: fixed;
  top: 32px;
  left: 8px;
-  background-color: var(--background-color);
+  background: var(--background-color);
  backdrop-filter: blur(150px);
-  border-radius: #{$border-radius-extra-large};
+  border-radius: #{$border-radius-xxx};
+  outline: 1px solid var(--border-color);
  box-shadow: #{$box-shadow-medium};
  z-index: #{$z-index-tools};

@@ -46,12 +47,12 @@
      border-radius: #{$border-radius-small};

      &:hover {
-        background-color: var(--background-color-secondary);
+        background: var(--background-color-secondary);
      }
    }

    .active {
-      background-color: var(--background-color-secondary);
+      background: var(--background-color-secondary);
      outline: 1px solid var(--accent-color);
      outline-offset: -1px;
    }
@@ -174,7 +175,7 @@

              .stock {
                padding: 13px 5px;
-                background-color: var(--background-color-secondary);
+                background: var(--background-color-secondary);
                border-radius: 6.33px;
                display: flex;
                justify-content: space-between;
@@ -243,15 +244,17 @@
  position: fixed;
  top: 32px;
  right: 8px;
-  background-color: var(--background-color);
+  background: var(--background-color);
  backdrop-filter: blur(150px);
-  border-radius: #{$border-radius-extra-large};
+  border-radius: #{$border-radius-xxx};
+  outline: 1px solid var(--border-color);
  box-shadow: #{$box-shadow-medium};
  z-index: #{$z-index-tools};

  .header-container {
    @include flex-space-between;
    padding: 10px;
+    padding-left: 16px;
    width: 100%;
    gap: 12px;
    height: 52px;
@@ -262,8 +265,8 @@

      .share-button {
        padding: 4px 12px;
-        color: var(--primary-color);
-        background-color: var(--accent-color);
+        color: var(--text-color);
+        background: var(--background-color-button);
        font-weight: var(--font-weight-regular);
        border-radius: #{$border-radius-large};
        cursor: pointer;
@@ -277,7 +280,7 @@
    .split {
      height: 20px;
      width: 2px;
-      background: var(--background-color-secondary);
+      background: var(--text-disabled);
    }

    .users-container {
@@ -353,26 +356,28 @@
      height: 34px;
      width: 34px;
      border-radius: #{$border-radius-circle};
-      background: var(--primary-color);
+      background: var(--background-color-secondary);
+      backdrop-filter: blur(8px);
      box-shadow: #{$box-shadow-medium};
    }

    .active {
-      background: var(--accent-color);
+      background: var(--background-color-accent);
    }
  }

  .sidebar-right-container {
    min-height: 50vh;
-    padding-bottom: 12px;
+    padding: 8px;
    position: relative;
    overflow: auto;

    .sidebar-right-content-container {
-      border-bottom: 1px solid var(--border-color);
      height: calc(100% - 36px);
      position: relative;
-      width: 320px;
+      width: 304px;
+      padding-bottom: 10px;
+
      .no-event-selected {
        color: #666;
        padding: 1.8rem 1rem;
@@ -532,7 +537,7 @@
            }

            button {
-              background-color: transparent;
+              background: transparent;
              box-shadow: none;
              color: #5273eb;
              padding: 6px;
@@ -732,7 +737,7 @@
          stroke: var(--primary-color);
        }
        &:disabled {
-          background-color: var(--text-disabled);
+          background: var(--text-disabled);
        }
      }
    }
@@ -841,7 +846,7 @@
          transform: translateX(4px);

          &:hover {
-            background-color: var(--accent-color);
+            background: var(--accent-color);

            path {
              stroke: var(--primary-color);
@@ -983,11 +988,9 @@
  .zone-properties-container {
    .header {
      @include flex-space-between;
-      padding: 8px 12px;
-      border-top: 1px solid var(--highlight-accent-color);
-      border-bottom: 1px solid var(--highlight-accent-color);
-      color: var(--accent-color);
-
+      padding: 10px 12px;
+      color: var(--text-color);
+      margin-bottom: 4px;
      .input-value {
        color: inherit;
      }
@@ -1004,7 +1007,7 @@
        border-radius: 8px 0 0 8px;

        &:hover {
-          background-color: var(--accent-color);
+          background: var(--accent-color);

          path {
            stroke: var(--primary-color);
@@ -1017,8 +1020,8 @@
    .generate-report-button,
    .button-save {
      @include flex-center;
-      background-color: var(--accent-color);
-      color: var(--primary-color);
+      background: var(--background-color-button);
+      color: var(--text-button-color);
      border-radius: #{$border-radius-large};
      padding: 2px;
      gap: 4px;
@@ -1028,12 +1031,6 @@
      margin-bottom: 8px;
    }

-    .split {
-      height: 1px;
-      background: var(--highlight-accent-color);
-      margin: 8px;
-    }
-
    .custom-input-container {
      .header {
        @include flex-space-between;
@@ -1162,14 +1159,14 @@
      flex-direction: row;
      flex-wrap: wrap;
      height: 100%;
-      gap: 3px;
+      gap: 8px;
      padding: 10px 0;

      .category {
-        width: 117px;
+        width: 121px;
        height: 95px;
        border-radius: 3.59px;
-        background-color: var(--background-color-gray);
+        background: var(--background-color-gray);
        padding: 8px;
        padding-top: 12px;
        font-weight: $bold-weight;
@@ -1189,7 +1186,7 @@
          width: 60px;
          height: 60px;
          border-radius: 50%;
-          background-color: var(--circle-color, #000);
+          background: var(--circle-color, #000);
          position: absolute;
          top: 60%;
          right: -10px;
@@ -1270,7 +1267,7 @@
        width: 117px;
        height: 95px;
        border-radius: #{$border-radius-small};
-        background-color: var(--background-color-gray);
+        background: var(--background-color-gray);
        font-weight: $medium-weight;
        position: relative;
        overflow: hidden;
@@ -1337,7 +1334,7 @@
    width: 117px;
    height: 95px;
    border-radius: 3.59px;
-    background-color: var(--background-color-gray);
+    background: var(--background-color-gray);
    padding: 8px;
    padding-top: 12px;
    font-weight: $medium-weight;
--- a/app/src/styles/layout/toast.scss
+++ b/app/src/styles/layout/toast.scss
@@ -51,19 +51,19 @@
 }

 .toast.success {
-  background-color: #4caf50;
+  background: #4caf50;
 }

 .toast.error {
-  background-color: #f44336;
+  background: #f44336;
 }

 .toast.info {
-  background-color: #2196f3;
+  background: #2196f3;
 }

 .toast.warning {
-  background-color: #ff9800;
+  background: #ff9800;
 }

@keyframes fadeIn {
--- a/app/src/styles/pages/dashboard.scss
+++ b/app/src/styles/pages/dashboard.scss
@@ -43,7 +43,7 @@
      padding: 12px 16px;
      cursor: not-allowed;
      color: var(--accent-color);
-      background-color: var(--background-color-secondary);
+      background: var(--background-color-secondary);
      border-radius: #{$border-radius-large};
    }
    .side-bar-content-container {
@@ -66,9 +66,9 @@
        .active {
          color: var(--accent-color);
          font-weight: var(--font-weight-medium);
-          background-color: var(--highlight-accent-color);
+          background: var(--highlight-accent-color);
          &:hover {
-            background-color: var(--highlight-accent-color);
+            background: var(--highlight-accent-color);
          }
        }
      }
@@ -161,7 +161,7 @@
        width: 26px;
        line-height: 26px;
        text-align: center;
-        background-color: var(--accent-color);
+        background: var(--accent-color);
        color: var(--primary-color);
        border-radius: #{$border-radius-circle};
      }
--- a/app/src/styles/pages/home.scss
+++ b/app/src/styles/pages/home.scss
@@ -1,38 +1,3 @@
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: var(--primary-color);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: 282c34;
-}
-
-.App-link {
-  color: var(--button-action-color);
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .navbar{
  position: absolute;
  top: 0;
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -3,7 +3,7 @@

 // Main Container
 .realTime-viz {
-  background-color: #131313;
+  background: #131313;
  border-radius: 20px;
  box-shadow: $box-shadow-medium;
  width: calc(100% - (320px + 270px + 90px));
@@ -66,7 +66,7 @@

  .zone-wrapper {
    display: flex;
-    background-color: var(--background-color);
+    background: var(--background-color);
    position: absolute;
    bottom: 0px;
    left: 50%;
@@ -84,7 +84,7 @@
    }

    .arrow {
-      background-color: var(--highlight-accent-color);
+      background: var(--highlight-accent-color);
      color: var(--background-color);
    }

@@ -109,7 +109,7 @@

    .zone {
      width: auto;
-      background-color: var(--background-color);
+      background: var(--background-color);
      border-radius: 6px;
      padding: 4px 8px;
      white-space: nowrap;
@@ -117,7 +117,7 @@
    }

    .active {
-      background-color: var(--accent-color);
+      background: var(--accent-color);
      color: var(--background-color);
      // color: #FCFDFD !important;
    }
@@ -138,13 +138,13 @@
    position: relative;
    flex: 1;
    height: 600px;
-    background-color: rgb(235, 235, 235);
+    background: rgb(235, 235, 235);
    margin: 0 30px;
    transition: height 0.3s ease, margin 0.3s ease;

    .zone-wrapper {
      display: flex;
-      background-color: rgba(224, 223, 255, 0.5);
+      background: rgba(224, 223, 255, 0.5);
      position: absolute;
      // bottom: 10px;
      left: 50%;
@@ -162,7 +162,7 @@

      .zone {
        width: auto;
-        background-color: $background-color;
+        background: $background-color;
        border-radius: 6px;
        padding: 4px 8px;
        white-space: nowrap;
@@ -170,7 +170,7 @@
        transition: background-color 0.3s ease;

        &.active {
-          background-color: var(--primary-color);
+          background: var(--primary-color);
          color: var(--accent-color);
        }
      }
@@ -203,7 +203,7 @@
      display: flex;
      flex-direction: column;
      gap: 6px;
-      background-color: var(--background-color);
+      background: var(--background-color);

      &::-webkit-scrollbar {
        display: none;
@@ -217,7 +217,7 @@
        border-radius: 8px;
        box-shadow: var(--box-shadow-medium);
        padding: 6px 0;
-        background-color: var(--background-color);
+        background: var(--background-color);
        position: relative;
        padding: 0 10px;

@@ -237,7 +237,7 @@
          top: 18px;
          right: 5px;
          transform: translate(0px, 0);
-          background-color: var(--background-color);
+          background: var(--background-color);
          z-index: 10;

          display: flex;
@@ -261,7 +261,7 @@
            }

            &:hover {
-              background-color: var(--highlight-accent-color);
+              background: var(--highlight-accent-color);
              width: 100%;

              svg {
@@ -353,7 +353,7 @@
          border-radius: 8px;
          box-shadow: var(--box-shadow-medium);
          padding: 6px 0;
-          background-color: var(--background-color);
+          background: var(--background-color);
          position: relative;
        }
      }
@@ -377,7 +377,7 @@
 .side-button-container {
  position: absolute;
  display: flex;
-  background-color: var(--background-color);
+  background: var(--background-color);
  padding: 2px;
  border-radius: 2px;
  transition: transform 0.3s ease;
@@ -398,7 +398,7 @@
    }

    .active {
-      background-color: var(--accent-color);
+      background: var(--accent-color);
    }

    &:hover {
@@ -414,7 +414,7 @@
    display: flex;
    justify-content: center;
    // align-items: center;
-    background-color: var(--accent-color);
+    background: var(--accent-color);
    border: none;
    color: var(--background-color);
    border-radius: 4px;
@@ -494,7 +494,7 @@
  padding: 12px;
  box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
  border-radius: 8px;
-  background-color: white;
+  background: white;
  position: absolute;
  top: 20px;
  right: -100%;
@@ -530,7 +530,7 @@
          left: 1px;
          width: 10px;
          height: 10px;
-          background-color: var(--primary-color);
+          background: var(--primary-color);
          border-radius: 50%;
        }
      }
@@ -584,7 +584,7 @@
 }

 .zone.active {
-  background-color: #007bff;
+  background: #007bff;
  color: white;
 }

@@ -592,7 +592,7 @@
  .icon {
    // width: 25px !important;
    // height: 25px !important;
-    // background-color: transparent;
+    // background: transparent;
  }

  .kebab {
@@ -604,7 +604,7 @@
    z-index: 10;
    cursor: pointer;
    @include flex-center;
-    background-color: transparent !important;
+    background: transparent !important;
  }

  .kebab-options {
@@ -612,7 +612,7 @@
    top: 18px;
    right: 5px;
    transform: translate(0px, 0);
-    background-color: var(--background-color);
+    background: var(--background-color);
    z-index: 10;

    display: flex;
@@ -625,7 +625,7 @@
    .icon {
      width: 25px !important;
      height: 25px !important;
-      background-color: transparent;
+      background: transparent;
    }

    .btn {
@@ -643,7 +643,7 @@
      }

      &:hover {
-        background-color: var(--highlight-accent-color);
+        background: var(--highlight-accent-color);
        width: 100%;

        svg {
@@ -675,7 +675,7 @@
 /* Label styles for displaying distance values */
 .distance-label {
  position: absolute;
-  background-color: var(--accent-color);
+  background: var(--accent-color);
  color: white;
  font-size: 12px;
  padding: 2px 6px;
@@ -769,7 +769,7 @@

 .editWidgetOptions {
  position: absolute;
-  background-color: var(--background-color);
+  background: var(--background-color);
  z-index: 3;
  display: flex;
  flex-direction: column;
@@ -786,7 +786,7 @@
    cursor: pointer;

    &:hover {
-      background-color: var(--highlight-accent-color);
+      background: var(--highlight-accent-color);
      color: var(--accent-color);
    }

@@ -794,7 +794,7 @@
      color: #f65648;

      &:hover {
-        background-color: #f657484d;
+        background: #f657484d;
        color: #f65648;
      }
    }
--- a/app/src/styles/pages/userAuth.scss
+++ b/app/src/styles/pages/userAuth.scss
@@ -9,7 +9,7 @@
  padding: 20px;
  color: var(--text-color);
  height: 100vh;
-  background-color: var(--background-color);
+  background: var(--background-color);
  position: relative;
  z-index: 1;
  .logo-icon {
--- a/app/src/styles/scene/scene.scss
+++ b/app/src/styles/scene/scene.scss
@@ -14,9 +14,8 @@
    // style
    font-size: var(--font-size-large);
    padding: 2px 8px;
-    background: var(--primary-color);
-    color: var(--accent-color);
-    outline: 1px solid var(--accent-color);
+    background: var(--background-color-accent);
+    color: var(--text-color);
    border-radius: #{$border-radius-medium};
    box-shadow: var(--box-shadow-light);
  }