refactor: Update icon stroke and fill colors based on active state; modify EventProperties component structure; adjust styles in tools, sidebar, and realTimeViz for improved layout and responsiveness

app/src/styles/components/tools.scss

@@ -30,7 +30,7 @@
   .general-options,
   .activeDropicon {
     @include flex-center;
-    gap: 8px;
+    gap: 2px;
     interpolate-size: allow-keywords;
     width: 0;
     opacity: 0;

app/src/styles/layout/sidebar.scss

@@ -51,8 +51,6 @@
 
     .active {
       background: var(--background-color-accent);
-      outline: 1px solid var(--border-color);
-      outline-offset: -1px;
       rect {
         stroke: var(--icon-default-color-active);
       }
@@ -60,7 +58,12 @@
         fill: var(--icon-default-color-active);
       }
       &:hover {
-        background: var(--background-color-secondary);
+        rect {
+          stroke: var(--icon-default-color);
+        }
+        circle {
+          fill: var(--icon-default-color);
+        }
       }
     }
   }
@@ -365,14 +368,14 @@
       width: 34px;
       border-radius: #{$border-radius-circle};
       background: var(--background-color-secondary);
-      backdrop-filter: blur(8px);
-      box-shadow: #{$box-shadow-medium};
+      backdrop-filter: blur(12px);
       outline: 1px solid var(--border-color);
       outline-offset: -1px;
     }
 
     .active {
       background: var(--background-color-accent);
+      outline: none;
     }
   }
 
@@ -390,55 +393,43 @@
 
       .no-event-selected {
         color: #666;
-        padding: 1.8rem 1rem;
+        padding: 16px;
         grid-column: 1 / -1;
         .products-list {
           padding-top: 1rem;
+          .product-item {
+            text-align: start;
+            margin-top: 8px;
+            padding: 2px 0;
+            text-decoration: none;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+            button {
+              width: fit-content;
+              position: relative;
+              @include flex-center;
+              gap: 4px;
+              background: var(--background-color);
+              padding: 8px 12px;
+              border-radius: #{$border-radius-extra-large};
+              outline: 1px solid var(--border-color);
+              &:hover {
+                background: var(--background-color-accent);
+                color: var(--text-button-color);
+                outline: none;
+                path {
+                  stroke: var(--text-button-color);
+                  stroke-width: 1.3;
+                }
+              }
+            }
+          }
           .products-list-title {
             text-align: start;
             color: var(--accent-color);
             font-size: var(--font-size-regular);
           }
-          ul {
-            li {
-              text-align: start;
-              margin: 8px 0;
-              padding: 2px 0;
-              text-decoration: none;
-              &::marker {
-                content: "";
-              }
-              button {
-                width: fit-content;
-                position: relative;
-                transition: all 0.2s ease;
-                @include flex-center;
-                gap: 4px;
-                &:before {
-                  content: "";
-                  position: absolute;
-                  left: 0;
-                  bottom: -4px;
-                  background: var(--accent-color);
-                  height: 1px;
-                  width: 0%;
-                  transition: all 0.3s ease;
-                }
-              }
-              &:hover {
-                button {
-                  path {
-                    stroke: var(--accent-color);
-                    stroke-width: 1.5px;
-                  }
-                  color: var(--accent-color);
-                  &:before {
-                    width: 100%;
-                  }
-                }
-              }
-            }
-          }
         }
       }
     }

app/src/styles/pages/realTimeViz.scss

@@ -113,7 +113,9 @@
 
     .active {
       background: var(--background-color-accent);
-      color: var(--background-color);
+      color: var(--text-button-color);
+      border: none;
+      outline: none;
     }
   }
 
@@ -406,6 +408,9 @@
     .add-icon {
       @include flex-center;
       transition: rotate 0.2s;
+      path{
+        stroke: var(--text-button-color);
+      }
     }
 
     path {