From ea69adf09cb9b3bd0b1447e14c7df550f86faa2c Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Thu, 12 Jun 2025 09:20:52 +0530
Subject: [PATCH] refactor: update component headers to use <h4> tags for
 consistency; enhance layout styles in simulation player

---
 app/src/components/ui/compareVersion/CompareLayOut.tsx |  4 ++--
 .../components/ui/compareVersion/ComparisonResult.tsx  |  6 +++---
 .../compareVersion/result-card/PerformanceResult.tsx   |  2 +-
 app/src/components/ui/simulation/simulationPlayer.tsx  |  4 ++--
 app/src/styles/layout/compareLayout.scss               | 10 ++++++----
 app/src/styles/scene/scene.scss                        |  7 ++++++-
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx
index 6cce453..ef49e8e 100644
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@@ -129,7 +129,7 @@ const CompareLayOut = () => {
       ref={wrapperRef}
       style={{ width }}
     >
-      {loadingProgress == 0 && (
+      {loadingProgress == 0 && comparisonProduct?.productUuid && (
         <button
           title="resize-canvas"
           id="compare-resize-slider-btn"
@@ -165,7 +165,7 @@ const CompareLayOut = () => {
               {showLayoutDropdown && (
                 <div className="displayLayouts-container">
                   <div className="header">Layouts</div>
-                  <Search onChange={() => {}} />
+                  <Search onChange={() => { }} />
                   <div className="layouts-container">
                     {products.map((layout) => (
                       <button
diff --git a/app/src/components/ui/compareVersion/ComparisonResult.tsx b/app/src/components/ui/compareVersion/ComparisonResult.tsx
index 79fa57c..7084bd7 100644
--- a/app/src/components/ui/compareVersion/ComparisonResult.tsx
+++ b/app/src/components/ui/compareVersion/ComparisonResult.tsx
@@ -107,7 +107,7 @@ const ComparisonResult = () => {
 
         <div className="cycle-time-container comparisionCard">
           <div className="cycle-main">
-            <div className="cycle-header">Cycle Time</div>
+            <h4 className="cycle-header">Cycle Time</h4>
             <div className="layers-wrapper">
               <div className="layers">
                 <div className="layer-name">Layout 1</div>
@@ -131,7 +131,7 @@ const ComparisonResult = () => {
         </div>
 
         <div className="overallDowntime-container comparisionCard">
-          <div className="overallDowntime-header">Overall Downtime</div>
+          <h4 className="overallDowntime-header">Overall Downtime</h4>
           <div className="totalDownTime-wrapper">
             <div className="totalDownTime">
               <div className="totalDownTime-right">
@@ -150,7 +150,7 @@ const ComparisonResult = () => {
         </div>
 
         <div className="overallScrapRate comparisionCard">
-          <div className="overallScrapRate-header">Overall Scrap Rate</div>
+          <h4 className="overallScrapRate-header">Overall Scrap Rate</h4>
           <div className="overallScrapRate-wrapper">
             <div className="overallScrapRate-value">
               <div className="overallScrapRate-label">Layout 1</div>
diff --git a/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx b/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx
index f21d573..21088f0 100644
--- a/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx
+++ b/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx
@@ -12,7 +12,7 @@ const PerformanceResult = () => {
         <div className="icon">
           <PerformanceIcon />
         </div>
-        <div className="head">Performance result</div>
+        <h4 className="head">Performance result</h4>
       </div>
 
       <div className="metrics-container">
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index 1cff053..1f32c89 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -164,7 +164,7 @@ const SimulationPlayer: React.FC = () => {
   return (
     <>
       {isPlaying && activeModule === "simulation" && (
-        <div className="label-toogler">
+        <div className="label-toogler bottom">
           <InputToggle
             value={viewSceneLabels}
             inputKey="1"
@@ -184,7 +184,7 @@ const SimulationPlayer: React.FC = () => {
                     <div className="icon">
                       <HourlySimulationIcon />
                     </div>
-                    <div className="label">ThroughPut Data</div>
+                    <h4 className="label">ThroughPut Data</h4>
                   </div>
                   <div className="progress-wrapper">
                     <div
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index 31966be..1e6545e 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -207,6 +207,10 @@
         display: flex;
         gap: 12px;
 
+        h4 {
+            font-weight: 600;
+        }
+
         .comparisionCard {
             position: relative;
             flex: 1;
@@ -418,9 +422,7 @@
     position: relative;
 
     .energy-usage-wrapper {
-        h4 {
-            font-weight: 600;
-        }
+
 
         .value {
             padding-top: 25px;
@@ -551,7 +553,7 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            gap: 20px;
+            // gap: 20px;
             padding: 8px 10px;
             margin: 44px 0;
 
diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss
index 3823ac4..1ab5888 100644
--- a/app/src/styles/scene/scene.scss
+++ b/app/src/styles/scene/scene.scss
@@ -98,7 +98,7 @@
   right: 1.5%;
   z-index: 10;
   border-radius: 8px;
-
+  transition: all 0.3s ease-in-out;
   .input-toggle-container {
     padding: 0;
     display: flex;
@@ -117,4 +117,9 @@
       }
     }
   }
+
+
+}
+.label-toogler.bottom{
+  bottom: 32%;
 }