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} ref={wrapperRef}
style={{ width }} style={{ width }}
> >
{loadingProgress == 0 && ( {loadingProgress == 0 && comparisonProduct?.productUuid && (
<button <button
title="resize-canvas" title="resize-canvas"
id="compare-resize-slider-btn" id="compare-resize-slider-btn"

View File

@ -107,7 +107,7 @@ const ComparisonResult = () => {
<div className="cycle-time-container comparisionCard"> <div className="cycle-time-container comparisionCard">
<div className="cycle-main"> <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-wrapper">
<div className="layers"> <div className="layers">
<div className="layer-name">Layout 1</div> <div className="layer-name">Layout 1</div>
@ -131,7 +131,7 @@ const ComparisonResult = () => {
</div> </div>
<div className="overallDowntime-container comparisionCard"> <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-wrapper">
<div className="totalDownTime"> <div className="totalDownTime">
<div className="totalDownTime-right"> <div className="totalDownTime-right">
@ -150,7 +150,7 @@ const ComparisonResult = () => {
</div> </div>
<div className="overallScrapRate comparisionCard"> <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-wrapper">
<div className="overallScrapRate-value"> <div className="overallScrapRate-value">
<div className="overallScrapRate-label">Layout 1</div> <div className="overallScrapRate-label">Layout 1</div>

View File

@ -12,7 +12,7 @@ const PerformanceResult = () => {
<div className="icon"> <div className="icon">
<PerformanceIcon /> <PerformanceIcon />
</div> </div>
<div className="head">Performance result</div> <h4 className="head">Performance result</h4>
</div> </div>
<div className="metrics-container"> <div className="metrics-container">

View File

@ -164,7 +164,7 @@ const SimulationPlayer: React.FC = () => {
return ( return (
<> <>
{isPlaying && activeModule === "simulation" && ( {isPlaying && activeModule === "simulation" && (
<div className="label-toogler"> <div className="label-toogler bottom">
<InputToggle <InputToggle
value={viewSceneLabels} value={viewSceneLabels}
inputKey="1" inputKey="1"
@ -184,7 +184,7 @@ const SimulationPlayer: React.FC = () => {
<div className="icon"> <div className="icon">
<HourlySimulationIcon /> <HourlySimulationIcon />
</div> </div>
<div className="label">ThroughPut Data</div> <h4 className="label">ThroughPut Data</h4>
</div> </div>
<div className="progress-wrapper"> <div className="progress-wrapper">
<div <div

View File

@ -207,6 +207,10 @@
display: flex; display: flex;
gap: 12px; gap: 12px;
h4 {
font-weight: 600;
}
.comparisionCard { .comparisionCard {
position: relative; position: relative;
flex: 1; flex: 1;
@ -418,9 +422,7 @@
position: relative; position: relative;
.energy-usage-wrapper { .energy-usage-wrapper {
h4 {
font-weight: 600;
}
.value { .value {
padding-top: 25px; padding-top: 25px;
@ -551,7 +553,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 20px; // gap: 20px;
padding: 8px 10px; padding: 8px 10px;
margin: 44px 0; margin: 44px 0;

View File

@ -98,7 +98,7 @@
right: 1.5%; right: 1.5%;
z-index: 10; z-index: 10;
border-radius: 8px; border-radius: 8px;
transition: all 0.3s ease-in-out;
.input-toggle-container { .input-toggle-container {
padding: 0; padding: 0;
display: flex; display: flex;
@ -117,4 +117,9 @@
} }
} }
} }
}
.label-toogler.bottom{
bottom: 32%;
} }