Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update color scheme and layout adjustments across components

This commit is contained in:
Vishnu 2025-06-16 12:14:16 +05:30
parent 29de49443a
commit 197554ffa8
13 changed files with 370 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
app/src/components/layout/scenes/ComparisonScene.tsx
View File

@ -1,132 +1,151 @@
import { useProductContext } from '../../../modules/simulation/products/productContext'
import RegularDropDown from '../../ui/inputs/RegularDropDown';
import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
import useModuleStore from '../../../store/useModuleStore';
import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
import { useEffect, useState } from 'react';
import { useDuplicateProductStore } from '../../../modules/duplicate/duplicateStores/duplicateProductStore';
import ProductsDuplicate from '../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct';
import { useProductContext } from "../../../modules/simulation/products/productContext";
import RegularDropDown from "../../ui/inputs/RegularDropDown";
import {
useCompareProductDataStore,
useLoadingProgress,
useSaveVersion,
} from "../../../store/builder/store";
import useModuleStore from "../../../store/useModuleStore";
import CompareLayOut from "../../ui/compareVersion/CompareLayOut";
import ComparisonResult from "../../ui/compareVersion/ComparisonResult";
import {
useComparisonProduct,
useMainProduct,
} from "../../../store/simulation/useSimulationStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useEffect, useState } from "react";
import { useDuplicateProductStore } from "../../../modules/duplicate/duplicateStores/duplicateProductStore";
import ProductsDuplicate from "../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct";
function ComparisonScene() {
const { isPlaying } = usePlayButtonStore();
const { products, getProductById } = useDuplicateProductStore();
const { isVersionSaved } = useSaveVersion();
const { activeModule } = useModuleStore();
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
const { mainProduct } = useMainProduct();
const { loadingProgress } = useLoadingProgress();
const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
const [shouldShowComparisonResult, setShouldShowComparisonResult] = useState(false);
const { isPlaying } = usePlayButtonStore();
const { products, getProductById } = useDuplicateProductStore();
const { isVersionSaved } = useSaveVersion();
const { activeModule } = useModuleStore();
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
const { mainProduct } = useMainProduct();
const { loadingProgress } = useLoadingProgress();
const { compareProductsData, setCompareProductsData } =
useCompareProductDataStore();
const [shouldShowComparisonResult, setShouldShowComparisonResult] =
useState(false);
const handleSelectLayout = (option: string) => {
const product = products.find((product) => product.productName === option);
if (product) {
setComparisonProduct(product.productUuid, product.productName);
}
};
useEffect(() => {
if (compareProductsData.length === 2) return;
const handleSelectLayout = (option: string) => {
const product = products.find((product) => product.productName === option);
if (product) {
setComparisonProduct(product.productUuid, product.productName);
}
};
useEffect(() => {
if (compareProductsData.length === 2) return;
// const productData = getProductById(selectedProduct.productUuid);
// const productData = getProductById(selectedProduct.productUuid);
// const newData = {
// "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
// "productName": "Product 2",
// "simulationData": {
// "roiPercentage": 281.7214285714286,
// "paybackPeriod": 1.7748028701097842,
// "netProfit": 9860250,
// "productionCapacity": 4599.25,
// "machineIdleTime": 1885,
// "machineActiveTime": 646,
// "throughputData": 183.97
// }
// }
// const newData = {
// "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
// "productName": "Product 2",
// "simulationData": {
// "roiPercentage": 281.7214285714286,
// "paybackPeriod": 1.7748028701097842,
// "netProfit": 9860250,
// "productionCapacity": 4599.25,
// "machineIdleTime": 1885,
// "machineActiveTime": 646,
// "throughputData": 183.97
// }
// }
// const existingIndex = compareProductsData.findIndex((item) =>
// item.productUuid === productData?.productUuid
// );
// const existingIndex = compareProductsData.findIndex((item) =>
// item.productUuid === productData?.productUuid
// );
// if (existingIndex !== -1) {
// const updated = [...compareProductsData];
// updated[existingIndex] = newData;
// setCompareProductsData(updated);
// } else {
// setCompareProductsData([...compareProductsData, newData]);
// }
// if (existingIndex !== -1) {
// const updated = [...compareProductsData];
// updated[existingIndex] = newData;
// setCompareProductsData(updated);
// } else {
// setCompareProductsData([...compareProductsData, newData]);
// }
setCompareProductsData([
{
"productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf1",
"productName": "Product 1",
"simulationData": {
"roiPercentage": 273.9428571428571,
"paybackPeriod": 1.8251981643721318,
"netProfit": 9588000,
"productionCapacity": 4508.5,
"machineIdleTime": 1450,
"machineActiveTime": 430,
"throughputData": 180.34
}
},
{
"productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
"productName": "Product 2",
"simulationData": {
"roiPercentage": 281.7214285714286,
"paybackPeriod": 1.7748028701097842,
"netProfit": 9860250,
"productionCapacity": 4599.25,
"machineIdleTime": 1885,
"machineActiveTime": 646,
"throughputData": 183.97
}
}
])
}, [compareProductsData]); // ✅ Runs only once on mount
setCompareProductsData([
{
productUuid: "70a4d942-f201-4364-bc19-de98ed41500a",
productName: "Product 1",
simulationData: {
roiPercentage: 273.9428571428571,
paybackPeriod: 1.8251981643721318,
netProfit: 9588000,
productionCapacity: 4508.5,
machineIdleTime: 1450,
machineActiveTime: 430,
throughputData: 180.34,
},
},
{
productUuid: "70a4d942-f201-4364-bc19-de98ed41500b",
productName: "Product 2",
simulationData: {
roiPercentage: 281.7214285714286,
paybackPeriod: 1.7748028701097842,
netProfit: 9860250,
productionCapacity: 4599.25,
machineIdleTime: 1885,
machineActiveTime: 646,
throughputData: 183.97,
},
},
]);
}, [compareProductsData]); // ✅ Runs only once on mount
useEffect(() => {
if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
if (hasMain && hasComparison && mainProduct.productUuid !== comparisonProduct.productUuid) {
setShouldShowComparisonResult(true);
} else {
setShouldShowComparisonResult(false);
}
} else {
setShouldShowComparisonResult(false);
}
}, [compareProductsData, mainProduct, comparisonProduct]);
useEffect(() => {
if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
const hasMain = compareProductsData.some(
(val) => val.productUuid === mainProduct.productUuid
);
const hasComparison = compareProductsData.some(
(val) => val.productUuid === comparisonProduct.productUuid
);
if (
hasMain &&
hasComparison &&
mainProduct.productUuid !== comparisonProduct.productUuid
) {
setShouldShowComparisonResult(true);
} else {
setShouldShowComparisonResult(false);
}
} else {
setShouldShowComparisonResult(false);
}
}, [compareProductsData, mainProduct, comparisonProduct]);
return (
return (
<>
{isVersionSaved && activeModule === "simulation" && selectedProduct && (
<>
{isVersionSaved && activeModule === "simulation" && selectedProduct && (
<>
{comparisonProduct && !isPlaying &&
<div className="initial-selectLayout-wrapper">
<RegularDropDown
header={selectedProduct.productName}
options={products.map((l) => l.productName)} // Pass layout names as options
onSelect={handleSelectLayout}
search={false}
/>
</div>
}
<CompareLayOut />
{comparisonProduct && !isPlaying && (
<div className="initial-selectLayout-wrapper">
<RegularDropDown
header={selectedProduct.productName}
options={products.map((l) => l.productName)} // Pass layout names as options
onSelect={handleSelectLayout}
search={false}
/>
</div>
)}
<CompareLayOut />
<ProductsDuplicate projectId={"684bcd620a64bc2a815a88d6"} />
<ProductsDuplicate projectId={"6842c683d4c6ce57664da93b"} />
{(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />}
</>
)}
{shouldShowComparisonResult && !loadingProgress && (
<ComparisonResult />
)}
</>
)
)}
</>
);
}
export default ComparisonScene;

4
app/src/components/layout/scenes/MainScene.tsx
View File

@ -120,9 +120,7 @@ function MainScene() {
</>
)}
<div
className={`scene-container${
comparisonProduct?.productUuid ? " half-view" : ""
}`}
className={`scene-container`}
id="work-space-three-d-canvas"
style={{
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",

5
app/src/components/ui/compareVersion/ComparisonResult.tsx
View File

@ -53,8 +53,8 @@ const ComparisonResult = () => {
);
// Color palette
const purpleDark = "#6a0dad";
const purpleLight = "#b19cd9";
const purpleDark = "#3466F1";
const purpleLight = "#FFC527";
const throughputData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
@ -71,7 +71,6 @@ const ComparisonResult = () => {
],
};
const cycleTimePieData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [

6
app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx
View File

@ -22,7 +22,7 @@ ChartJS.register(
const EnergyUsage = ({comparedProducts}:any) => {
const data = useMemo(() => {
const randomizeData = () =>
Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300);
Array.from({ length: 7 }, () => Math.floor(Math.random() * 10));
return {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
@ -30,7 +30,7 @@ const EnergyUsage = ({comparedProducts}:any) => {
{
label: "Simulation 1",
data: randomizeData(),
borderColor: "#6a0dad",
borderColor: "#3466F1",
fill: false,
tension: 0.5, // More curved line
pointRadius: 0, // Remove point indicators
@ -38,7 +38,7 @@ const EnergyUsage = ({comparedProducts}:any) => {
{
label: "Simulation 2",
data: randomizeData(),
borderColor: "#b19cd9",
borderColor: "#FFC527",
fill: false,
tension: 0.5,
pointRadius: 0,

2
app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx
View File

@ -5,7 +5,7 @@ export default function PostProcessingDuplicate() {
return (
<EffectComposer autoClear={false}>
<N8AO
color="black"
color="#323232"
aoRadius={20}
intensity={7}
distanceFalloff={4}

260
app/src/modules/duplicate/duplicateSimulation/duplicatePoint/duplicatePoint.tsx
View File

@ -1,142 +1,142 @@
import * as THREE from "three";
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import useModuleStore from "../../../../store/useModuleStore";
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import { useDuplicateEventsStore } from "../../duplicateStores/duplicateEventStore";
function PointsDuplicate() {
const { events } = useEventsStore();
const { activeModule } = useModuleStore();
const { isPlaying } = usePlayButtonStore();
const { events } = useDuplicateEventsStore();
const { activeModule } = useModuleStore();
const { isPlaying } = usePlayButtonStore();
return (
return (
<>
{activeModule === "simulation" && (
<>
{activeModule === "simulation" && (
<>
<group name="EventPointsGroup" visible={!isPlaying}>
{events.map((event, index) => {
const usedEvent = event;
<group name="EventPointsGroup" visible={!isPlaying}>
{events.map((event, index) => {
const usedEvent = event;
if (usedEvent.type === "transfer") {
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
{usedEvent.points.map((point, j) => (
<mesh
name="Event-Sphere"
uuid={point.uuid}
key={`${index}-${point.uuid}`}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="orange" />
</mesh>
))}
</group>
);
} else if (usedEvent.type === "vehicle") {
const point = usedEvent.point;
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
<mesh
name="Event-Sphere"
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="blue" />
</mesh>
</group>
);
} else if (usedEvent.type === "roboticArm") {
const point = usedEvent.point;
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
<mesh
name="Event-Sphere"
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="green" />
</mesh>
</group>
);
} else if (usedEvent.type === "machine") {
const point = usedEvent.point;
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
<mesh
name="Event-Sphere"
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="purple" />
</mesh>
</group>
);
} else if (usedEvent.type === "storageUnit") {
const point = usedEvent.point;
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
<mesh
name="Event-Sphere"
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="red" />
</mesh>
</group>
);
} else {
return null;
}
})}
</group>
</>
)}
if (usedEvent.type === "transfer") {
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
{usedEvent.points.map((point, j) => (
<mesh
name="Event-Sphere"
uuid={point.uuid}
key={`${index}-${point.uuid}`}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="orange" />
</mesh>
))}
</group>
);
} else if (usedEvent.type === "vehicle") {
const point = usedEvent.point;
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
<mesh
name="Event-Sphere"
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="blue" />
</mesh>
</group>
);
} else if (usedEvent.type === "roboticArm") {
const point = usedEvent.point;
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
<mesh
name="Event-Sphere"
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="green" />
</mesh>
</group>
);
} else if (usedEvent.type === "machine") {
const point = usedEvent.point;
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
<mesh
name="Event-Sphere"
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="purple" />
</mesh>
</group>
);
} else if (usedEvent.type === "storageUnit") {
const point = usedEvent.point;
return (
<group
key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position}
rotation={usedEvent.rotation}
>
<mesh
name="Event-Sphere"
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="red" />
</mesh>
</group>
);
} else {
return null;
}
})}
</group>
</>
);
)}
</>
);
}
export default PointsDuplicate;

1
app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
View File

@ -1,6 +1,5 @@
import * as THREE from 'three';
import { useEffect } from 'react';
import { upsertProductOrEventApi } from '../../../../services/simulation/products/UpsertProductOrEventApi';
import { getAllProductsApi } from '../../../../services/simulation/products/getallProductsApi';
import { usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
import { useSceneContext } from '../../../scene/sceneContext';

23
app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx
View File

@ -1,18 +1,13 @@
import React from 'react'
import ProductsDuplicate from './duplicateProduct/duplicateProduct'
import PointsDuplicate from './duplicatePoint/duplicatePoint'
import TriggerDuplicate from './duplicateTrigger/duplicateTrigger'
import PointsDuplicate from "./duplicatePoint/duplicatePoint";
import TriggerDuplicate from "./duplicateTrigger/duplicateTrigger";
function SimulationDuplicate() {
return (
<>
<PointsDuplicate />
<TriggerDuplicate />
</>
)
return (
<>
<PointsDuplicate />
<TriggerDuplicate />
</>
);
}
export default SimulationDuplicate
export default SimulationDuplicate;

4
app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx
View File

@ -147,7 +147,7 @@ function TriggerDuplicate() {
start={startPoint.toArray()}
end={endPoint.toArray()}
mid={midPoint.toArray()}
color={"#c4abf1"}
color={"#FFC527"}
lineWidth={4}
dashed={true}
dashSize={0.75}
@ -157,7 +157,7 @@ function TriggerDuplicate() {
);
})}
<Arrows connections={connections} color={'#c4abf1'} />
<Arrows connections={connections} color={'#FFC527'} />
</group>
);
}

59
app/src/modules/duplicate/sceneDuplicate.tsx
View File

@ -12,39 +12,42 @@ import { Color } from "three";
import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation";
export default function DuplicateScene() {
const projectId = "684bcd620a64bc2a815a88d6";
const projectId = "6842c683d4c6ce57664da93b";
return (
<Canvas
id="sceneCanvas"
shadows
color="#aaaa"
eventPrefix="client"
style={{
pointerEvents: 'none'
}}
onContextMenu={(e) => {
e.preventDefault();
}}
onCreated={(e) => {
e.scene.background = new Color(0x19191d);
}}
gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
>
return (
<Canvas
id="sceneCanvas"
shadows
color="#aaaa"
eventPrefix="client"
style={{
pointerEvents: "none",
}}
onContextMenu={(e) => {
e.preventDefault();
}}
onCreated={(e) => {
e.scene.background = new Color(0x19191d);
}}
gl={{
powerPreference: "high-performance",
antialias: true,
preserveDrawingBuffer: true,
}}
>
<Sun />
<Sun />
<Shadows />
<Shadows />
<ControlsDuplicate />
<ControlsDuplicate />
<PostProcessingDuplicate />
<PostProcessingDuplicate />
<Environment files={background} environmentIntensity={1.5} />
<Environment files={background} environmentIntensity={1.5} />
<BuilderDuplicate projectId={projectId} />
<BuilderDuplicate projectId={projectId} />
<SimulationDuplicate />
</Canvas>
);
<SimulationDuplicate />
</Canvas>
);
}

2
app/src/modules/simulation/events/arrows/arrows.tsx
View File

@ -150,7 +150,7 @@ export function ArrowOnQuadraticBezier({
start,
mid,
end,
color = "#42a5f5",
color = "#3466F1",
}: {
start: number[];
mid: number[];

6
app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx
View File

@ -421,7 +421,7 @@ function TriggerConnector() {
end: endPoint,
});
setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red");
setHelperLineColor(sphereIntersects.length > 0 ? "#3466F1" : "red");
} else {
setCurrentLine(null);
}
@ -477,7 +477,7 @@ function TriggerConnector() {
start={startPoint.toArray()}
end={endPoint.toArray()}
mid={midPoint.toArray()}
color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#6f42c1"}
color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#42a5f5"}
lineWidth={4}
dashed={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? false : true}
dashSize={0.75}
@ -496,7 +496,7 @@ function TriggerConnector() {
);
})}
<Arrows connections={connections} color="#6f42c1"/>
<Arrows connections={connections} color="#42a5f5"/>
{currentLine && (
<>

67
app/src/styles/layout/compareLayout.scss
View File

@ -8,7 +8,12 @@
z-index: 10;
.regularDropdown-container {
background: var(--background-color);
background: #FFC527;
.key,
.icon {
color: #323232;
font-weight: 600;
}
}
}
@ -19,7 +24,11 @@
z-index: 10;
.regularDropdown-container {
background: var(--background-color);
background: #3466f1;
.key,
.icon {
color: #fff;
}
}
}
@ -55,8 +64,8 @@
cursor: ew-resize;
transition: transform 0.1s ease;
z-index: 100;
// pointer-events: all;
opacity: 0;
pointer-events: all;
// opacity: 0;
}
.chooseLayout-container {
@ -71,7 +80,7 @@
.compare-layout-canvas-container {
position: absolute;
height: 100vh;
width: 50vw;
width: 100vw;
top: 0;
right: 0;
}
@ -265,7 +274,7 @@
.metric-value {
padding-top: 6px;
font-size: var(--font-size-xlarge);
color: var(--background-color-accent);
color: #14ca44;
font-weight: 600;
}
}
@ -401,9 +410,9 @@
}
.simulation-tag {
background: var(--background-color-button);
color: var(--icon-default-color-active);
background: #FFC527;
color: #323232;
font-weight: 600;
position: absolute;
bottom: 0;
right: 0;
@ -431,7 +440,7 @@
.energy-usage-wrapper {
.value {
padding-top: 25px;
padding-top: 100px;
font-size: var(--font-size-xxxlarge);
color: var(--background-color-accent);
}
@ -439,7 +448,7 @@
.simulation-details {
position: absolute;
bottom: 12px;
top: 12px;
right: 12px;
.simulation-wrapper {
@ -447,6 +456,16 @@
align-items: center;
gap: 6px;
&.sim-1 {
.icon {
background-color: #3466f1;
}
}
&.sim-2 {
.icon {
background-color: #FFC527;
}
}
.icon {
width: 20px;
height: 20px;
@ -457,9 +476,10 @@
}
.chart {
height: 80px;
width: 90%;
position: absolute;
top: 10px;
top: 40px;
left: 0;
}
}
@ -476,9 +496,16 @@
.layer-wrapper {
display: flex;
flex-direction: column;
&:last-child {
justify-content: end;
&:first-child {
.key {
color: #3466f1;
}
}
&:nth-child(2) {
// justify-content: end;
.key {
color: #FFC527;
}
}
}
@ -516,6 +543,16 @@
display: flex;
flex-direction: column;
gap: 4px;
&:first-child {
.layer-name {
color: #3466f1;
}
}
&:last-child {
.layer-name {
color: #FFC527;
}
}
.layer-name {
color: var(--background-color-accent);