refactor: update component headers to use <h4> tags for consistency; enhance layout styles in simulation player

This commit is contained in:
Nalvazhuthi 2025-06-12 09:20:52 +05:30
parent ab1230f166
commit ea69adf09c
6 changed files with 20 additions and 13 deletions

View File

@ -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

View File

@ -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>

View File

@ -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">

View File

@ -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

View File

@ -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;

View File

@ -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%;
}