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/components/icons/SimulationIcons.tsx

@@ -9,13 +9,17 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) {
     >
       <path
         d="M17.5002 12.4987L15.1418 10.1404M10.8335 14.1654H5.8335M7.50016 10.832H5.8335M10.8335 8.33203C10.8335 8.82648 10.9801 9.30983 11.2548 9.72096C11.5295 10.1321 11.92 10.4525 12.3768 10.6417C12.8336 10.8309 13.3363 10.8805 13.8212 10.784C14.3062 10.6875 14.7516 10.4494 15.1013 10.0998C15.4509 9.75017 15.689 9.30471 15.7855 8.81976C15.8819 8.3348 15.8324 7.83214 15.6432 7.37532C15.454 6.91851 15.1335 6.52806 14.7224 6.25336C14.3113 5.97865 13.8279 5.83203 13.3335 5.83203C12.6705 5.83203 12.0346 6.09542 11.5657 6.56426C11.0969 7.03311 10.8335 7.66899 10.8335 8.33203Z"
-        stroke={"var(--icon-default-color-active)"}
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M14.1667 14.1667V16.6667C14.1667 16.8877 14.0789 17.0996 13.9226 17.2559C13.7663 17.4122 13.5543 17.5 13.3333 17.5H3.33333C3.11232 17.5 2.90036 17.4122 2.74408 17.2559C2.5878 17.0996 2.5 16.8877 2.5 16.6667V3.33333C2.5 3.11232 2.5878 2.90036 2.74408 2.74408C2.90036 2.5878 3.11232 2.5 3.33333 2.5H13.3333"
-        stroke={"var(--icon-default-color-active)"}
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
         strokeLinecap="round"
         strokeLinejoin="round"
       />
@@ -34,11 +38,15 @@ export function MechanicsIcon({ isActive }: { isActive: boolean }) {
     >
       <path
         d="M17.69 11.7629L16.4912 11.5885C16.4161 11.5828 16.3514 11.5356 16.3226 11.466L15.9339 10.5281C15.9049 10.4588 15.917 10.3794 15.9662 10.3224L16.6834 9.35896C16.7973 9.22544 16.7898 9.02639 16.6655 8.90212L16.098 8.3348C15.974 8.21053 15.7746 8.20247 15.6414 8.31697L14.6776 9.03387C14.621 9.08282 14.541 9.09546 14.4719 9.0667L13.5338 8.67776C13.4644 8.64929 13.417 8.58341 13.4109 8.50918L13.2372 7.31068C13.2234 7.1352 13.0772 7 12.9018 7H12.0991C11.9234 7 11.7772 7.1352 11.7637 7.31068L11.5893 8.50918C11.5839 8.58399 11.5364 8.64929 11.4671 8.67776L10.5286 9.0667C10.4593 9.09546 10.3799 9.08282 10.3227 9.03387L9.35945 8.31697C9.22628 8.20276 9.0272 8.2105 8.90264 8.3348L8.33532 8.90212C8.21105 9.02639 8.20357 9.22547 8.31746 9.35896L9.03439 10.3227C9.08302 10.3794 9.09598 10.4591 9.06693 10.5281L8.67825 11.466C8.65007 11.5356 8.58448 11.5828 8.50996 11.5889L7.31062 11.7629C7.13569 11.7767 7.00049 11.9229 7.00049 12.0986V12.901C7.00049 13.0765 7.13572 13.2232 7.31062 13.2364L8.50996 13.4105C8.58448 13.4165 8.65007 13.464 8.67825 13.5333L9.06693 14.4712C9.09598 14.5408 9.08305 14.6205 9.03439 14.6772L8.31746 15.641C8.20354 15.7744 8.21102 15.9729 8.33532 16.0978L8.90264 16.6651C9.0272 16.7894 9.22628 16.7969 9.35945 16.6827L10.3227 15.9654C10.3799 15.9171 10.4593 15.9042 10.5286 15.9333L11.4671 16.3216C11.5364 16.3507 11.5839 16.4157 11.5897 16.4908L11.7637 17.6893C11.7775 17.8645 11.9234 18 12.0991 18H12.9018C13.0776 18 13.2234 17.8645 13.2372 17.6893L13.411 16.4908C13.417 16.4157 13.4645 16.3507 13.5338 16.3216L14.4722 15.9333C14.5413 15.9042 14.6213 15.9171 14.6779 15.9654L15.6414 16.6827C15.7746 16.7969 15.974 16.7894 16.098 16.6651L16.6656 16.0978C16.7902 15.9729 16.7974 15.7744 16.6834 15.641L15.9662 14.6772C15.9179 14.6205 15.9049 14.5408 15.934 14.4712L16.3226 13.5333C16.3514 13.464 16.4161 13.4165 16.4912 13.4105L17.69 13.2364C17.8652 13.2232 18.0004 13.0765 18.0004 12.901V12.0986C18.0004 11.9228 17.8652 11.7767 17.69 11.7629ZM13.8191 13.8187C13.4667 14.1706 12.9987 14.3645 12.5004 14.3645C12.0024 14.3645 11.5337 14.1706 11.1816 13.8187C10.8295 13.466 10.6353 12.9979 10.6353 12.4997C10.6353 12.0017 10.8295 11.5333 11.1816 11.1812C11.5337 10.8285 12.0024 10.6351 12.5004 10.6351C12.9987 10.6351 13.4667 10.8285 13.8191 11.1812C14.1712 11.5333 14.3652 12.0017 14.3652 12.4997C14.3652 12.9979 14.1713 13.466 13.8191 13.8187Z"
-        stroke={"var(--icon-default-color-active)"}
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
       />
       <path
         d="M6.7961 8.78085C6.92052 8.73626 6.98909 8.60354 6.95416 8.47635L6.77216 7.58599C6.75759 7.53147 6.77438 7.47339 6.81595 7.43541L7.37949 6.92253C7.42078 6.88482 7.48083 6.87353 7.53285 6.89334L8.39565 7.15458C8.51874 7.20111 8.65747 7.1455 8.71367 7.02603L8.96969 6.48121C9.02637 6.36145 8.98098 6.21939 8.86644 6.1544L8.11541 5.65637C8.06665 5.62829 8.03718 5.57515 8.04024 5.51899L8.07603 4.75805C8.07906 4.70161 8.11263 4.65178 8.1636 4.62864L8.96614 4.20052C9.08642 4.14683 9.14452 4.00865 9.09994 3.88532L8.89619 3.31844C8.85132 3.19427 8.7186 3.12546 8.59144 3.16042L7.70081 3.34183C7.64628 3.35726 7.58873 3.34019 7.5505 3.29832L7.03784 2.73511C6.99958 2.69324 6.98804 2.63436 7.00837 2.58151L7.26967 1.71923C7.31617 1.59562 7.2606 1.45713 7.14084 1.40122L6.59627 1.14492C6.47679 1.08873 6.33417 1.13362 6.26894 1.24841L5.77118 1.99948C5.74335 2.04823 5.69024 2.07764 5.63405 2.07492L4.87311 2.03885C4.81695 2.03638 4.76629 2.00167 4.74345 1.951L4.31589 1.14877C4.26165 1.02849 4.12399 0.970357 4.0001 1.01498L3.43353 1.21897C3.30936 1.26359 3.24055 1.39603 3.27579 1.52319L3.45748 2.4141C3.47235 2.46804 3.45556 2.52642 3.41372 2.56413L2.85014 3.07729C2.8083 3.115 2.74912 3.12657 2.69626 3.10676L1.83398 2.84521C1.71093 2.79843 1.57244 2.85459 1.516 2.97404L1.25995 3.51864C1.20379 3.63812 1.24865 3.78074 1.3632 3.84569L2.11423 4.34373C2.16323 4.37156 2.19242 4.42442 2.1894 4.48058L2.1536 5.24152C2.15141 5.29824 2.11698 5.34779 2.06606 5.37091L1.26353 5.79899C1.14318 5.85296 1.08511 5.99089 1.12973 6.11423L1.33373 6.68107C1.37832 6.80524 1.51103 6.87405 1.63795 6.8394L2.52914 6.65716C2.58311 6.64228 2.64146 6.65935 2.67916 6.70119L3.19176 7.26449C3.23003 7.30633 3.24107 7.36579 3.2212 7.41838L2.95996 8.28065C2.91371 8.40399 2.96935 8.54247 3.08879 8.59863L3.63336 8.85466C3.75312 8.91109 3.89543 8.86567 3.9607 8.75141L4.45818 8.0001C4.48626 7.95165 4.53911 7.9219 4.59555 7.92517L5.35652 7.96097C5.41296 7.96375 5.46307 7.99732 5.48646 8.04879L5.91374 8.85074C5.96827 8.97108 6.10564 9.02971 6.2295 8.98509L6.7961 8.78085ZM5.58891 6.31659C5.23732 6.44295 4.85716 6.42533 4.51878 6.2662C4.18043 6.10707 3.92493 5.82571 3.79802 5.47385C3.67166 5.12201 3.68928 4.7421 3.84844 4.40403C4.00754 4.0654 4.28917 3.8099 4.64076 3.68329C4.99259 3.55662 5.37251 3.57424 5.71058 3.73393C6.04865 3.89251 6.3047 4.17389 6.43159 4.52573C6.55798 4.87759 6.54008 5.25723 6.38123 5.59561C6.22154 5.93365 5.94043 6.18967 5.58891 6.31659Z"
-        stroke={"var(--icon-default-color-active)"}
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
       />
     </svg>
   );
@@ -55,15 +63,21 @@ export function PropertiesIcon({ isActive }: { isActive: boolean }) {
     >
       <path
         d="M17.4254 15.3839L8.67142 6.79353C8.79789 6.57037 8.90139 6.337 8.97464 6.09625C8.98245 6.01909 8.99808 5.93903 9.02639 5.85746C9.04151 5.81156 9.05423 5.76468 9.06692 5.71831C9.26711 4.6353 8.94923 3.4756 8.11182 2.63819C7.84716 2.37353 7.54982 2.16113 7.23341 2C7.21778 2 7.20216 2.00197 7.18703 2.00538L6.90578 2.07422C6.85303 2.08791 6.80762 2.12109 6.78028 2.16797C6.75294 2.21435 6.74562 2.2705 6.76025 2.32275L7.36475 4.49367C7.38722 4.57474 7.35694 4.66067 7.28906 4.70999L5.91552 5.70756C5.87352 5.73734 5.82177 5.75052 5.77049 5.74368L4.31101 5.54249C4.23142 5.53174 4.16648 5.47512 4.14498 5.39796L3.50685 3.10504C3.47754 3.00104 3.3711 2.93804 3.26613 2.96391L2.89697 3.05426C2.87794 3.05913 2.86085 3.06891 2.84375 3.07916C2.41994 3.67339 2.20606 4.37117 2.20312 5.0699C2.20947 5.94687 2.54541 6.82188 3.21435 7.49082C4.02148 8.29748 5.12649 8.61389 6.17581 8.46592C6.32718 8.44395 6.46537 8.42879 6.59231 8.42001C6.7134 8.38679 6.83256 8.34335 6.95072 8.29598C8.41851 9.78233 15.631 17.1784 15.631 17.1784C16.1266 17.674 16.9298 17.674 17.4254 17.1784C17.921 16.6828 17.921 15.8796 17.4254 15.3839ZM16.9767 16.7297C16.7291 16.9777 16.3277 16.9777 16.0797 16.7297C15.8316 16.4821 15.8316 16.0802 16.0797 15.8322C16.3277 15.5846 16.7291 15.5846 16.9767 15.8322C17.2247 16.0802 17.2247 16.4821 16.9767 16.7297Z"
-        fill={"var(--icon-default-color-active)"}
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
       />
       <path
         d="M14.6953 6.25784L16.1182 5.89699L17.4878 3.50488L16.8243 2.8755L16.1612 2.24609L13.8442 3.73926L13.5586 5.17824L11.0991 7.77054L12.2183 8.8682L14.6953 6.25784Z"
-        fill={"var(--icon-default-color-active)"}
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
       />
       <path
         d="M7.56537 10.7632C7.28215 11.0083 6.8808 10.7046 6.35539 11.2588L2.88271 14.918C2.18837 15.6494 2.21865 16.8057 2.95009 17.5C3.68153 18.1944 4.83732 18.1641 5.53164 17.4327L9.00482 13.7725C9.53023 13.2188 9.20647 12.8345 9.43598 12.5386C9.48285 12.4776 9.52582 12.4356 9.56879 12.4038C8.91157 11.731 8.28266 11.0874 7.73821 10.5312C7.71528 10.6084 7.66303 10.6792 7.56537 10.7632Z"
-        fill={"var(--icon-default-color-active)"}
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
       />
     </svg>
   );
@@ -82,13 +96,17 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z"
-        fill={"var(--icon-default-color-active)"}
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12.441 1.04762C12.5781 0.984127 12.7361 0.984127 12.8732 1.04762L18.0161 3.42958C18.198 3.51377 18.3143 3.69589 18.3143 3.89624V9.85116C18.3143 10.0347 18.2165 10.2043 18.0577 10.2962L12.9148 13.2736C12.7555 13.3659 12.5588 13.3659 12.3995 13.2736L7.25661 10.2962C7.09779 10.2043 7 10.0347 7 9.85116V3.89624C7 3.69589 7.11635 3.51377 7.29815 3.42958L12.441 1.04762ZM8.02857 4.72968L12.1429 6.79403V11.9366L8.02857 9.55463V4.72968ZM13.1714 11.9366L17.2857 9.55463V4.72968L13.1714 6.79403V11.9366ZM12.6571 5.90129L16.6163 3.91477L12.6571 2.08106L8.69798 3.91477L12.6571 5.90129Z"
-        fill={"var(--icon-default-color-active)"}
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
       />
     </svg>
   );

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -92,9 +92,9 @@ const EventProperties: React.FC = () => {
             <p>
               <strong>Here are some products you can add it to:</strong>
             </p>
-            <ul>
+            <div className="product-item">
               {products.map((product) => (
-                <li key={product.productId}>
+                <div key={product.productId}>
                   <button
                     onClick={() =>
                       handleAddEventToProduct({
@@ -111,9 +111,9 @@ const EventProperties: React.FC = () => {
                     <AddIcon />
                     {product.productName}
                   </button>
-                </li>
+                </div>
               ))}
-            </ul>
+            </div>
           </div>
         </div>
       )}

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);
+      backdrop-filter: blur(12px);
-      box-shadow: #{$box-shadow-medium};
       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 {