Enhance UI components: add active state to ZoneItem, refactor EditWidgetOption and RealTimeVisualization styles, and implement RenameTooltip for dynamic renaming functionality.

app/src/styles/components/lists.scss

@@ -2,8 +2,6 @@
 @use "../abstracts/mixins" as *;
 
 .dropdown-list-container {
-  border-bottom: 1px solid var(--border-color);
-
   .lists-container {
     margin-bottom: 6px;
   }
@@ -44,7 +42,7 @@
       text-align: center;
       padding: 4px 8px;
       border-radius: #{$border-radius-large};
-      .zone-header{
+      .zone-header {
         @include flex-center;
         .value {
           width: 100%;
@@ -62,16 +60,10 @@
           cursor: pointer;
         }
       }
-      &:first-child{
-        background: var(--highlight-accent-color);
-        .input-value{
-          color: var(--highlight-text-color);
-        }
-      }
     }
     .active {
       background: var(--highlight-accent-color);
-      .input-value{
+      .input-value {
         color: var(--highlight-text-color);
       }
     }

app/src/styles/pages/realTimeViz.scss

@@ -738,10 +738,10 @@
   outline-color: #ffe3e0;
 }
 
-.editWidgetOptions {
+.context-menu-options {
   position: absolute;
   background: var(--background-color);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(20px);
   z-index: 3;
   display: flex;
   flex-direction: column;
@@ -749,6 +749,7 @@
   overflow: hidden;
   padding: 4px;
   min-width: 150px;
+  outline: 1px solid var(--border-color);
 
   .option {
     padding: 4px 10px;

app/src/styles/pages/userAuth.scss

@@ -48,16 +48,16 @@
     max-width: 350px;
     padding: 10px;
     margin-bottom: 20px;
-    border: 1px solid var(--accent-color);
+    border: 1px solid var(--highlight-text-color);
     border-radius: #{$border-radius-extra-large};
     background: transparent;
-    color: var(--accent-color);
+    color: var(--highlight-text-color);
     font-size: 14px;
     outline: none;
     cursor: pointer;
 
     .google-icon {
-      color: var(--accent-color);
+      color: var(--highlight-text-color);
       font-weight: bold;
       font-size: 16px;
       margin-right: 10px;
@@ -120,7 +120,7 @@
     .continue-button {
       width: 100%;
       padding: 10px;
-      background: var(--accent-gradient-color);
+      background: var(--background-color-button);
       color: var(--background-color);
       font-size: 14px;
       border: none;
@@ -158,7 +158,7 @@
     text-align: center;
 
     .link {
-      color: var(--accent-color);
+      color: var(--highlight-text-color);
       text-decoration: none;
       &:hover {
         text-decoration: underline;