From 38ab556d17bd91bf0d429d0b5f20487b5154298b Mon Sep 17 00:00:00 2001 From: Vishnu Date: Thu, 27 Mar 2025 09:06:26 +0530 Subject: [PATCH 1/3] merge fix --- .../components/layout/sidebarLeft/Outline.tsx | 1 + .../layout/sidebarRight/SideBarRight.tsx | 15 +- .../components/ui/componets/AddButtons.tsx | 31 +- .../ui/componets/RealTimeVisulization.tsx | 54 +- app/src/components/ui/inputs/Search.tsx | 2 +- app/src/components/ui/list/DropDownList.tsx | 23 +- app/src/components/ui/list/List.tsx | 13 +- app/src/modules/market/FilterSearch.tsx | 4 +- .../components/marketPlace/marketPlace.scss | 643 +++++++++--------- app/src/styles/components/tools.scss | 38 +- app/src/styles/pages/realTimeViz.scss | 41 +- 11 files changed, 459 insertions(+), 406 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/Outline.tsx b/app/src/components/layout/sidebarLeft/Outline.tsx index a364947..bad3b59 100644 --- a/app/src/components/layout/sidebarLeft/Outline.tsx +++ b/app/src/components/layout/sidebarLeft/Outline.tsx @@ -30,6 +30,7 @@ const Outline: React.FC = () => { defaultOpen={true} showKebabMenu={false} showFocusIcon={true} + remove /> { const { activeModule } = useModuleStore(); - const [activeList] = useState("properties"); const { toggleUI } = useToggleStore(); const { selectedActionSphere } = useSelectedActionSphere(); const { subModule, setSubModule } = useSubModuleStore(); @@ -54,7 +53,7 @@ const SideBarRight: React.FC = () => { }`} onClick={() => setSubModule("mechanics")} > - +
{ }`} onClick={() => setSubModule("simulations")} > - +
{ }`} onClick={() => setSubModule("analysis")} > - +
)} @@ -78,7 +77,7 @@ const SideBarRight: React.FC = () => { )} {/* process builder */} {toggleUI && - activeList === "properties" && + subModule === "properties" && activeModule !== "visualization" && (
@@ -114,7 +113,7 @@ const SideBarRight: React.FC = () => {
)} - {activeList === "simulations" && ( + {subModule === "simulations" && (
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx index ee3092e..5943d6a 100644 --- a/app/src/components/ui/componets/AddButtons.tsx +++ b/app/src/components/ui/componets/AddButtons.tsx @@ -4,6 +4,7 @@ import { EyeIcon, LockIcon, } from "../../icons/RealTimeVisulationIcons"; +import { AddIcon } from "../../icons/ExportCommonIcons"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -109,7 +110,7 @@ const AddButtons: React.FC = ({ }; // Update the selectedZone state - console.log('updatedZone: ', updatedZone); + console.log("updatedZone: ", updatedZone); setSelectedZone(updatedZone); } else { // If the panel is not active, activate it @@ -122,7 +123,7 @@ const AddButtons: React.FC = ({ }; // Update the selectedZone state - console.log('updatedZone: ', updatedZone); + console.log("updatedZone: ", updatedZone); setSelectedZone(updatedZone); } }; @@ -132,7 +133,9 @@ const AddButtons: React.FC = ({ {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
{/* Extra Buttons */} @@ -148,8 +153,9 @@ const AddButtons: React.FC = ({
{/* Hide Panel */}
= ({ {/* Lock/Unlock Panel */}
= ({ } onClick={() => toggleLockPanel(side)} > - +
)} diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 385ae5d..a4730cc 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -44,34 +44,34 @@ const RealTimeVisulization: React.FC = () => { const [zonesData, setZonesData] = useState({}); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); - // useEffect(() => { - // async function GetZoneData() { - // try { - // const response: { data: Zone[] } | undefined = await getZonesApi( - // "hexrfactory" - // ); + useEffect(() => { + async function GetZoneData() { + try { + const response: { data: Zone[] } | undefined = await getZonesApi( + "hexrfactory" + ); - // if (!response || !response.data) { - // return; - // } - // const formattedData = response?.data?.reduce( - // (acc, zone) => { - // acc[zone.zoneName] = { - // activeSides: [], - // panelOrder: [], - // lockedPanels: [], - // zoneCentrePoint: [], - // widgets: [], - // }; - // return acc; - // }, - // {} - // ); - // setZonesData(formattedData); - // } catch (error) { } - // } - // GetZoneData(); - // }, []); + if (!response || !response.data) { + return; + } + const formattedData = response?.data?.reduce( + (acc, zone) => { + acc[zone.zoneName] = { + activeSides: [], + panelOrder: [], + lockedPanels: [], + zoneCentrePoint: [], + widgets: [], + }; + return acc; + }, + {} + ); + setZonesData(formattedData); + } catch (error) { } + } + GetZoneData(); + }, []); useEffect(() => { diff --git a/app/src/components/ui/inputs/Search.tsx b/app/src/components/ui/inputs/Search.tsx index b6e1f19..fa9d28c 100644 --- a/app/src/components/ui/inputs/Search.tsx +++ b/app/src/components/ui/inputs/Search.tsx @@ -36,7 +36,7 @@ const Search: React.FC = ({ }; return ( -
+
= ({ @@ -28,25 +29,29 @@ const DropDownList: React.FC = ({ ], defaultOpen = false, listType = "default", + remove, }) => { const [isOpen, setIsOpen] = useState(defaultOpen); const handleToggle = () => { setIsOpen((prev) => !prev); // Toggle the state }; - const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]); + const [zoneDataList, setZoneDataList] = useState< + { id: string; name: string }[] + >([]); useEffect(() => { async function GetZoneData() { - const response = await getZonesApi("hexrfactory") - console.log('response: ', response.data); - setZoneDataList([{ id: "1", name: "zone1" }, - { id: "2", name: "Zone 2" },]) + const response = await getZonesApi("hexrfactory"); + console.log("response: ", response.data); + setZoneDataList([ + { id: "1", name: "zone1" }, + { id: "2", name: "Zone 2" }, + ]); } - GetZoneData() - - }, []) + GetZoneData(); + }, []); return (
@@ -81,7 +86,7 @@ const DropDownList: React.FC = ({
{isOpen && (
- {listType === "default" && } + {listType === "default" && } {listType === "outline" && ( <> = ({ items = [] }) => { - console.log('items: ', items); +const List: React.FC = ({ items = [], remove }) => { + console.log("items: ", items); return ( <> {items.length > 0 ? ( @@ -26,9 +27,11 @@ const List: React.FC = ({ items = [] }) => {
-
- -
+ {remove && ( +
+ +
+ )}
diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx index 6750635..163eed3 100644 --- a/app/src/modules/market/FilterSearch.tsx +++ b/app/src/modules/market/FilterSearch.tsx @@ -13,7 +13,9 @@ const FilterSearch: React.FC = () => { }; return (
- {}} /> +
+ {}} /> +
Date: Thu, 27 Mar 2025 10:55:44 +0530 Subject: [PATCH 2/3] simulation slider --- app/src/components/icons/SimulationIcons.tsx | 73 ++++++++++ app/src/components/ui/Tools.tsx | 10 +- .../ui/simulation/simulationPlayer.tsx | 133 ++++++++++++++++++ app/src/pages/Project.tsx | 2 + .../components/simulation/simulation.scss | 114 +++++++++++++++ app/src/styles/main.scss | 5 +- 6 files changed, 332 insertions(+), 5 deletions(-) create mode 100644 app/src/components/ui/simulation/simulationPlayer.tsx create mode 100644 app/src/styles/components/simulation/simulation.scss diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index 5bc3296..e3c4540 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -93,3 +93,76 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) { ); } + +// simulation player icons + +export function ResetIcon() { + return ( + + + + + + ); +} + +export function PlayStopIcon() { + return ( + + + + ); +} + +export function ExitIcon() { + return ( + + + + ); +} diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index 9d06df9..abe7ba8 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -285,9 +285,13 @@ const Tools: React.FC = () => {
) : ( -
setIsPlaying(false)}> - X -
+ <> + {activeModule !== "simulation" && ( +
setIsPlaying(false)}> + X +
+ )} + )} ); diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx new file mode 100644 index 0000000..85f2c54 --- /dev/null +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -0,0 +1,133 @@ +import React, { useState, useRef, useEffect } from "react"; +import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons"; +import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; + +const SimulationPlayer: React.FC = () => { + const [speed, setSpeed] = useState(1); + const [playSimulation, setPlaySimulation] = useState(false); + const { setIsPlaying } = usePlayButtonStore(); + const sliderRef = useRef(null); + const isDragging = useRef(false); + + // Button functions + const handleReset = () => { + setSpeed(1); + }; + const handlePlayStop = () => { + setPlaySimulation(!playSimulation); + }; + const handleExit = () => { + setPlaySimulation(false); + setIsPlaying(false); + }; + + // Slider functions starts + const handleSpeedChange = (event: React.ChangeEvent) => { + setSpeed(parseFloat(event.target.value)); + }; + + const calculateHandlePosition = () => { + return ((speed - 0.5) / (50 - 0.5)) * 100; + }; + + const handleMouseDown = () => { + isDragging.current = true; + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", handleMouseUp); + }; + + const handleMouseMove = (e: MouseEvent) => { + if (!isDragging.current || !sliderRef.current) return; + + const sliderRect = sliderRef.current.getBoundingClientRect(); + const offsetX = e.clientX - sliderRect.left; + const percentage = Math.min(Math.max(offsetX / sliderRect.width, 0), 1); + const newValue = 0.5 + percentage * (50 - 0.5); + setSpeed(parseFloat(newValue.toFixed(1))); + }; + + const handleMouseUp = () => { + isDragging.current = false; + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + }; + + useEffect(() => { + return () => { + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + }; + }, []); + // Slider function ends + + return ( +
+
+
+
{ + handleReset(); + }} + > + + Reset +
+
{ + handlePlayStop(); + }} + > + + {playSimulation ? "Play" : "Stop"} +
+
{ + handleExit(); + }} + > + + Exit +
+
+
+
0.5x
+
+
+
+
+
+
+
+
+
+
+
+
+ {speed.toFixed(1)}x +
+ +
+
+
50x
+
+
+
+ ); +}; + +export default SimulationPlayer; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 95da878..ade4d6f 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -18,6 +18,7 @@ import { useNavigate } from "react-router-dom"; import { usePlayButtonStore } from "../store/usePlayButtonStore"; import SimulationUI from "../modules/simulation/simulationUI"; import MarketPlace from "../modules/market/MarketPlace"; +import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; const Project: React.FC = () => { let navigate = useNavigate(); @@ -61,6 +62,7 @@ const Project: React.FC = () => { {activeModule !== "market" && } {/* */} + {isPlaying && activeModule === "simulation" && }
); }; diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss new file mode 100644 index 0000000..eb109c2 --- /dev/null +++ b/app/src/styles/components/simulation/simulation.scss @@ -0,0 +1,114 @@ +@use "../../abstracts/variables" as *; +@use "../../abstracts/mixins" as *; + +.simulation-player-wrapper { + position: fixed; + bottom: 32px; + left: 50%; + z-index: 2; + transform: translate(-50%, 0); + .simulation-player-container { + .controls-container { + @include flex-center; + gap: 12px; + margin-bottom: 4px; + .simulation-button-container { + @include flex-center; + gap: 2px; + padding: 6px 8px; + min-width: 64px; + background-color: var(--background-color); + border-radius: #{$border-radius-small}; + cursor: pointer; + &:hover { + background-color: var(--highlight-accent-color); + color: var(--accent-color); + path { + stroke: var(--accent-color); + } + } + } + } + .speed-control-container { + @include flex-center; + gap: 18px; + padding: 5px 16px; + background: var(--background-color); + border-radius: #{$border-radius-medium}; + box-sizing: #{$box-shadow-medium}; + .min-value, + .max-value { + font-weight: var(--font-weight-bold); + } + .slider-container { + width: 580px; + max-width: 80vw; + height: 28px; + background: var(--background-color-gray); + border-radius: #{$border-radius-small}; + position: relative; + padding: 4px 26px; + .custom-slider { + height: 100%; + width: 100%; + position: relative; + .slider-input { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + z-index: 3; + cursor: pointer; + } + .slider-handle { + position: absolute; + width: 42px; + line-height: 20px; + text-align: center; + background: var(--accent-color); + color: var(--primary-color); + border-radius: #{$border-radius-small}; + transform: translateX(-50%); + cursor: pointer; + z-index: 2; + } + } + .marker{ + position: absolute; + background-color: var(--text-disabled); + width: 2px; + height: 12px; + border-radius: 1px; + top: 8px; + } + .marker.marker-10{ + left: 10%; + } + .marker.marker-20{ + left: 20%; + } + .marker.marker-30{ + left: 30%; + } + .marker.marker-40{ + left: 40%; + } + .marker.marker-50{ + left: 50%; + } + .marker.marker-60{ + left: 60%; + } + .marker.marker-70{ + left: 70%; + } + .marker.marker-80{ + left: 80%; + } + .marker.marker-90{ + left: 90%; + } + } + } + } +} diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index fa6ce51..34c0074 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -20,8 +20,9 @@ @use 'components/tools'; @use 'components/visualization/floating/energyConsumed'; @use 'components/visualization/ui/styledWidgets'; -@use './components/visualization/floating/common'; -@use './components/marketPlace/marketPlace.scss'; +@use 'components/visualization/floating/common'; +@use 'components/marketPlace/marketPlace'; +@use 'components/simulation/simulation'; // layout @use 'layout/loading'; From 1bbb21078612a404b56f8588e5dc3496a90ec85a Mon Sep 17 00:00:00 2001 From: Vishnu Date: Thu, 27 Mar 2025 12:14:19 +0530 Subject: [PATCH 3/3] Refactor components and styles for consistency and clarity --- app/src/components/icons/3dChartIcons.tsx | 4 +- .../components/icons/ExportCommonIcons.tsx | 24 ++++---- app/src/components/icons/SimulationIcons.tsx | 56 ++++++++++++++++--- app/src/components/icons/marketPlaceIcons.tsx | 40 ++++++------- .../components/ui/componets/DisplayZone.tsx | 23 ++------ app/src/components/ui/list/List.tsx | 1 - app/src/styles/base/reset.scss | 17 ++++-- app/src/styles/pages/realTimeViz.scss | 38 ++++--------- 8 files changed, 110 insertions(+), 93 deletions(-) diff --git a/app/src/components/icons/3dChartIcons.tsx b/app/src/components/icons/3dChartIcons.tsx index 320b018..d6dcb26 100644 --- a/app/src/components/icons/3dChartIcons.tsx +++ b/app/src/components/icons/3dChartIcons.tsx @@ -8,8 +8,8 @@ export function ThroughputIcon() { xmlns="http://www.w3.org/2000/svg" > diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index 4386198..d2c9970 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -556,8 +556,8 @@ export const DublicateIcon = () => { xmlns="http://www.w3.org/2000/svg" > @@ -577,32 +577,32 @@ export const DeleteIcon = () => { ); diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index e3c4540..28ce559 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -108,22 +108,22 @@ export function ResetIcon() { ); @@ -141,8 +141,8 @@ export function PlayStopIcon() { ); @@ -160,6 +160,44 @@ export function ExitIcon() { + + ); +} + +export function MoveArrowRight() { + return ( + + + + ); +} + +export function MoveArrowLeft() { + return ( + + diff --git a/app/src/components/icons/marketPlaceIcons.tsx b/app/src/components/icons/marketPlaceIcons.tsx index 76dedd3..f0c1cc1 100644 --- a/app/src/components/icons/marketPlaceIcons.tsx +++ b/app/src/components/icons/marketPlaceIcons.tsx @@ -10,8 +10,8 @@ export function StarsIcon() { ); @@ -26,14 +26,14 @@ export function DownloadIcon() { xmlns="http://www.w3.org/2000/svg" > @@ -53,14 +53,14 @@ export function EyeIconBig() { ); @@ -77,8 +77,8 @@ export function CommentsIcon() { > @@ -102,8 +102,8 @@ export function VerifiedIcon() { xmlns="http://www.w3.org/2000/svg" > @@ -123,9 +123,9 @@ export function StarsIconSmall() { ); @@ -144,9 +144,9 @@ export function FiileedStarsIconSmall() { d="M5.07372 1.61354C5.20877 1.31056 5.27632 1.15908 5.37035 1.11243C5.45202 1.0719 5.54791 1.0719 5.62958 1.11243C5.72362 1.15908 5.79117 1.31056 5.92621 1.61354L7.00187 4.02675C7.04183 4.11631 7.06178 4.16109 7.0927 4.19539C7.12 4.22573 7.15342 4.25 7.1907 4.26662C7.23287 4.2854 7.28164 4.29055 7.37917 4.30084L10.0067 4.57816C10.3366 4.61297 10.5015 4.63038 10.5749 4.70539C10.6387 4.77054 10.6683 4.86177 10.655 4.95198C10.6397 5.05581 10.5165 5.16682 10.2701 5.3889L8.30737 7.15768C8.23457 7.22331 8.19811 7.25615 8.17507 7.29611C8.15466 7.33152 8.14188 7.37077 8.13762 7.41137C8.13278 7.45728 8.14293 7.50523 8.16329 7.60119L8.71151 10.1858C8.78034 10.5103 8.81476 10.6725 8.76611 10.7655C8.72381 10.8463 8.64623 10.9027 8.55634 10.9179C8.45286 10.9354 8.30918 10.8526 8.02183 10.6868L5.73312 9.36677C5.64819 9.31777 5.60572 9.29332 5.56057 9.2837C5.52062 9.27524 5.47931 9.27524 5.43936 9.2837C5.39421 9.29332 5.35174 9.31777 5.26681 9.36677L2.97811 10.6868C2.69077 10.8526 2.5471 10.9354 2.44361 10.9179C2.35372 10.9027 2.27611 10.8463 2.23385 10.7655C2.18521 10.6725 2.21962 10.5103 2.28845 10.1858L2.83664 7.60119C2.85699 7.50523 2.86716 7.45728 2.86233 7.41137C2.85805 7.37077 2.8453 7.33152 2.82488 7.29611C2.80181 7.25615 2.76539 7.22331 2.69254 7.15768L0.72985 5.3889C0.483444 5.16682 0.360238 5.05581 0.34492 4.95198C0.33162 4.86177 0.361259 4.77054 0.425041 4.70539C0.498471 4.63038 0.663408 4.61297 0.993283 4.57816L3.62079 4.30084C3.71831 4.29055 3.76706 4.2854 3.80923 4.26662C3.84653 4.25 3.87993 4.22573 3.90727 4.19539C3.93815 4.16109 3.95812 4.11631 3.99804 4.02675L5.07372 1.61354Z" fill="#F3A50C" stroke="#F3A50C" - stroke-width="0.7" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="0.7" + strokeLinecap="round" + strokeLinejoin="round" /> ); diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index ea6f62a..e86915d 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState, useCallback } from "react"; import { Widget } from "../../../store/useWidgetStore"; +import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -134,27 +135,16 @@ const DisplayZone: React.FC = ({ }; return ( -
+
{/* Left Arrow */} {showLeftArrow && ( )} {/* Zones Wrapper */} -
+
{Object.keys(zonesData).map((zoneName, index) => (
= ({ }`} onClick={() => { console.log("zoneName: ", zoneName); - setSelectedZone({ zoneName, activeSides: zonesData[zoneName].activeSides || [], @@ -181,11 +170,11 @@ const DisplayZone: React.FC = ({ {/* Right Arrow */} {showRightArrow && ( )}
); }; -export default DisplayZone; \ No newline at end of file +export default DisplayZone; diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index bfb731e..54b710d 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -9,7 +9,6 @@ interface ListProps { } const List: React.FC = ({ items = [], remove }) => { - console.log("items: ", items); return ( <> {items.length > 0 ? ( diff --git a/app/src/styles/base/reset.scss b/app/src/styles/base/reset.scss index b37f940..82d286e 100644 --- a/app/src/styles/base/reset.scss +++ b/app/src/styles/base/reset.scss @@ -1,7 +1,14 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; - user-select: none; - font-size: var(--font-size-regular); + margin: 0; + padding: 0; + box-sizing: border-box; + user-select: none; + font-size: var(--font-size-regular); +} + +input[type="password"]::-ms-reveal, /* For Microsoft Edge */ +input[type="password"]::-ms-clear, /* For Edge clear button */ +input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button */ +input[type="password"]::-webkit-inner-spin-button { /* Just in case */ + display: none; } diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 00d54f7..5bae256 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -36,7 +36,7 @@ } } - .zoon-wrapper { + .zone-wrapper { display: flex; background-color: var(--background-color); position: absolute; @@ -55,11 +55,16 @@ } .arrow { - background-color: var(--accent-color); + background-color: var(--highlight-accent-color); color: var(--background-color); } .zones-wrapper { + padding: 6px; + display: flex; + gap: 6px; + border-radius: #{$border-radius-medium}; + overflow-x: auto; &::-webkit-scrollbar { display: none; } @@ -82,28 +87,10 @@ } } - .zoon-wrapper.bottom { + .zone-wrapper.bottom { bottom: 210px; } - @media (max-width: 1024px) { - width: 80%; // Increase width to take more space on smaller screens - height: 500px; // Reduce height to fit smaller screens - left: 50%; // Center horizontally - - .main-container { - margin: 0 15px; // Reduce margin for better spacing - } - - .zoon-wrapper { - bottom: 5px; // Adjust position for smaller screens - - &.bottom { - bottom: 150px; // Adjust for bottom placement - } - } - } - .content-container { display: flex; height: 100vh; @@ -118,7 +105,7 @@ margin: 0 30px; transition: height 0.3s ease, margin 0.3s ease; - .zoon-wrapper { + .zone-wrapper { display: flex; background-color: rgba(224, 223, 255, 0.5); position: absolute; @@ -309,7 +296,7 @@ } .playingFlase { - .zoon-wrapper.bottom { + .zone-wrapper.bottom { bottom: 300px; } } @@ -501,13 +488,10 @@ position: absolute; top: 50%; transform: translateY(-50%); - background-color: rgba(0, 0, 0, 0.5); - color: white; border: none; cursor: pointer; - font-size: 20px; - padding: 6px; z-index: 10; + height: 100%; } .left-arrow {