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 {