From 5ea85f49f07bcde6d6d8d7a8efbfe2b9323daffa Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 30 Apr 2025 16:52:08 +0530 Subject: [PATCH] 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 | 36 ++++++-- .../eventProperties/EventProperties.tsx | 8 +- app/src/styles/components/tools.scss | 2 +- app/src/styles/layout/sidebar.scss | 83 +++++++++---------- app/src/styles/pages/realTimeViz.scss | 7 +- 5 files changed, 75 insertions(+), 61 deletions(-) diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index b4aa881..ef23c8f 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -9,13 +9,17 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) { > @@ -34,11 +38,15 @@ export function MechanicsIcon({ isActive }: { isActive: boolean }) { > ); @@ -55,15 +63,21 @@ export function PropertiesIcon({ isActive }: { isActive: boolean }) { > ); @@ -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)" + } /> ); diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx index 88ae240..a307c86 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx @@ -92,9 +92,9 @@ const EventProperties: React.FC = () => {

Here are some products you can add it to:

-
    +
    {products.map((product) => ( -
  • +
    -
    • +
    ))} -
+ )} diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 54c21e7..0c1a9c3 100644 --- a/app/src/styles/components/tools.scss +++ b/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; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 70d3a5d..c7f1694 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/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%; - } - } - } - } - } } } } diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index a9dba89..665e44b 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/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 {