diff --git a/app/src/components/icons/marketPlaceIcons.tsx b/app/src/components/icons/marketPlaceIcons.tsx index 8719ef8..e69303f 100644 --- a/app/src/components/icons/marketPlaceIcons.tsx +++ b/app/src/components/icons/marketPlaceIcons.tsx @@ -29,13 +29,13 @@ export function DownloadIcon() { fillRule="evenodd" clipRule="evenodd" d="M2.5 11.875C2.84518 11.875 3.125 12.1548 3.125 12.5C3.125 13.6962 3.12633 14.5304 3.21096 15.1599C3.29317 15.7714 3.44354 16.0952 3.67418 16.3258C3.90481 16.5565 4.22863 16.7068 4.8401 16.7891C5.46956 16.8737 6.30383 16.875 7.5 16.875H12.5C13.6962 16.875 14.5304 16.8737 15.1599 16.7891C15.7714 16.7068 16.0952 16.5565 16.3258 16.3258C16.5565 16.0952 16.7068 15.7714 16.7891 15.1599C16.8737 14.5304 16.875 13.6962 16.875 12.5C16.875 12.1548 17.1548 11.875 17.5 11.875C17.8452 11.875 18.125 12.1548 18.125 12.5V12.5458C18.125 13.6854 18.125 14.604 18.0279 15.3265C17.9271 16.0766 17.7113 16.7081 17.2097 17.2097C16.7081 17.7113 16.0766 17.9271 15.3265 18.0279C14.604 18.125 13.6854 18.125 12.5458 18.125H7.45428C6.31462 18.125 5.39602 18.125 4.67354 18.0279C3.92345 17.9271 3.29189 17.7113 2.79029 17.2097C2.28869 16.7081 2.07295 16.0766 1.9721 15.3265C1.87497 14.604 1.87498 13.6854 1.875 12.5458C1.875 12.5305 1.875 12.5152 1.875 12.5C1.875 12.1548 2.15483 11.875 2.5 11.875Z" - fill="#FCFDFD" + fill="var(--primary-color)" /> ); @@ -52,13 +52,13 @@ export function EyeIconBig() { > @@ -80,7 +80,7 @@ export function CommentsIcon() { fillRule="evenodd" clipRule="evenodd" d="M8 13C7.416 13 6.852 12.932 6.31 12.8165L3.956 14.2315L3.9875 11.912C2.183 10.827 1 9.033 1 7C1 3.6865 4.134 1 8 1C11.866 1 15 3.6865 15 7C15 10.314 11.866 13 8 13ZM8 0C3.582 0 0 3.1345 0 7C0 9.2095 1.1725 11.177 3 12.4595V16L6.5045 13.8735C6.9895 13.9535 7.4885 14 8 14C12.418 14 16 10.866 16 7C16 3.1345 12.418 0 8 0ZM11.5 5.5H4.5C4.224 5.5 4 5.724 4 6C4 6.2765 4.224 6.5 4.5 6.5H11.5C11.776 6.5 12 6.2765 12 6C12 5.724 11.776 5.5 11.5 5.5ZM10.5 8.5H5.5C5.224 8.5 5 8.7235 5 9C5 9.2765 5.224 9.5 5.5 9.5H10.5C10.776 9.5 11 9.2765 11 9C11 8.7235 10.776 8.5 10.5 8.5Z" - fill="#2B3344" + fill="var(--text-color)" /> @@ -105,7 +105,7 @@ export function VerifiedIcon() { fillRule="evenodd" clipRule="evenodd" d="M4.7962 2.10014C4.67444 2.2039 4.61356 2.25579 4.54853 2.29937C4.39948 2.39927 4.23209 2.46861 4.05605 2.50336C3.97926 2.51853 3.89952 2.52489 3.74004 2.53761C3.33935 2.56959 3.139 2.58558 2.97186 2.64462C2.58526 2.78117 2.28117 3.08526 2.14462 3.47186C2.08558 3.639 2.06959 3.83935 2.03761 4.24004C2.02489 4.39952 2.01853 4.47926 2.00336 4.55605C1.96861 4.73209 1.89927 4.89948 1.79937 5.04853C1.75579 5.11356 1.70391 5.17444 1.60014 5.2962C1.33942 5.60215 1.20905 5.7551 1.13261 5.91505C0.955796 6.285 0.955796 6.715 1.13261 7.08495C1.20906 7.2449 1.33942 7.39785 1.60014 7.7038C1.70389 7.82555 1.75579 7.88645 1.79937 7.95145C1.89927 8.1005 1.96861 8.2679 2.00336 8.44395C2.01853 8.52075 2.02489 8.6005 2.03761 8.75995C2.06959 9.16065 2.08558 9.361 2.14462 9.52815C2.28117 9.91475 2.58526 10.2189 2.97186 10.3554C3.139 10.4144 3.33935 10.4304 3.74004 10.4624C3.89952 10.4751 3.97926 10.4815 4.05605 10.4966C4.23209 10.5314 4.39948 10.6007 4.54853 10.7007C4.61356 10.7442 4.67444 10.7961 4.7962 10.8998C5.10215 11.1606 5.2551 11.2909 5.41505 11.3674C5.785 11.5442 6.215 11.5442 6.58495 11.3674C6.7449 11.2909 6.89785 11.1606 7.2038 10.8998C7.32555 10.7961 7.38645 10.7442 7.45145 10.7007C7.6005 10.6007 7.7679 10.5314 7.94395 10.4966C8.02075 10.4815 8.1005 10.4751 8.25995 10.4624C8.66065 10.4304 8.861 10.4144 9.02815 10.3554C9.41475 10.2189 9.71885 9.91475 9.8554 9.52815C9.9144 9.361 9.9304 9.16065 9.9624 8.75995C9.9751 8.6005 9.9815 8.52075 9.99665 8.44395C10.0314 8.2679 10.1007 8.1005 10.2007 7.95145C10.2442 7.88645 10.2961 7.82555 10.3998 7.7038C10.6606 7.39785 10.7909 7.2449 10.8674 7.08495C11.0442 6.715 11.0442 6.285 10.8674 5.91505C10.7909 5.7551 10.6606 5.60215 10.3998 5.2962C10.2961 5.17444 10.2442 5.11356 10.2007 5.04853C10.1007 4.89948 10.0314 4.73209 9.99665 4.55605C9.9815 4.47926 9.9751 4.39952 9.9624 4.24004C9.9304 3.83935 9.9144 3.639 9.8554 3.47186C9.71885 3.08526 9.41475 2.78117 9.02815 2.64462C8.861 2.58558 8.66065 2.56959 8.25995 2.53761C8.1005 2.52489 8.02075 2.51853 7.94395 2.50336C7.7679 2.46861 7.6005 2.39927 7.45145 2.29937C7.38645 2.25579 7.32555 2.20391 7.2038 2.10014C6.89785 1.83942 6.7449 1.70906 6.58495 1.63261C6.215 1.4558 5.785 1.4558 5.41505 1.63261C5.2551 1.70905 5.10215 1.83942 4.7962 2.10014ZM8.18675 5.43157C8.34565 5.27265 8.34565 5.015 8.18675 4.85608C8.02785 4.69717 7.77015 4.69717 7.61125 4.85608L5.18615 7.2812L4.38873 6.4838C4.22982 6.3249 3.97216 6.3249 3.81325 6.4838C3.65433 6.6427 3.65433 6.90035 3.81325 7.0593L4.89839 8.14445C5.0573 8.30335 5.31495 8.30335 5.4739 8.14445L8.18675 5.43157Z" - fill="#6F42C1" + fill="var(--accent-color)" /> ); diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index bd7e5c1..16e0f13 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -40,7 +40,6 @@ const GlobalProperties: React.FC = () => { } function updateDistance(value: number) { - console.log("value: ", value); setDistance(value); setRenderDistance(value); } @@ -61,7 +60,7 @@ const GlobalProperties: React.FC = () => { !roofVisibility, shadows ); - // console.log('data: ', data); + // //using Socket // const visData = { @@ -88,7 +87,7 @@ const GlobalProperties: React.FC = () => { roofVisibility, shadows ); - // console.log('data: ', data); + // //using Socket // const visData = { @@ -115,7 +114,7 @@ const GlobalProperties: React.FC = () => { roofVisibility, !shadows ); - // console.log('data: ', data); + // //using Socket // const visData = { diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index ddc7903..45c8882 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -18,7 +18,6 @@ interface DisplayZoneProps { [key: string]: { activeSides: Side[]; panelOrder: Side[]; - lockedPanels: Side[]; widgets: Widget[]; zoneId: string; @@ -30,7 +29,6 @@ interface DisplayZoneProps { zoneName: string; activeSides: Side[]; panelOrder: Side[]; - lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; @@ -48,7 +46,6 @@ interface DisplayZoneProps { zoneName: string; activeSides: Side[]; panelOrder: Side[]; - lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; @@ -71,6 +68,7 @@ const DisplayZone: React.FC = ({ }) => { // Ref for the container element const containerRef = useRef(null); + const scrollContainerRef = useRef(null); // State to track overflow visibility const [showLeftArrow, setShowLeftArrow] = useState(false); @@ -79,8 +77,7 @@ const DisplayZone: React.FC = ({ // Function to calculate overflow state const updateOverflowState = useCallback(() => { - const container = containerRef.current; - + const container = scrollContainerRef.current; if (container) { const isOverflowing = container.scrollWidth > container.clientWidth; const canScrollLeft = container.scrollLeft > 0; @@ -93,59 +90,56 @@ const DisplayZone: React.FC = ({ }, []); useEffect(() => { - const container = containerRef.current; + const container = scrollContainerRef.current; + if (!container) return; - if (container) { - // Initial calculation after the DOM has been rendered - const handleInitialRender = () => { - requestAnimationFrame(updateOverflowState); - }; + // Initial calculation after the DOM has been rendered + const observer = new ResizeObserver(updateOverflowState); + observer.observe(container); - handleInitialRender(); + // Update on scroll + const handleScroll = () => updateOverflowState(); + container.addEventListener("scroll", handleScroll); - // Update on window resize or scroll - const handleResize = () => updateOverflowState(); - const handleScroll = () => updateOverflowState(); + // Add mouse wheel listener for horizontal scrolling + const handleWheel = (event: WheelEvent) => { + if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) { + event.preventDefault(); + container.scrollBy({ + left: event.deltaY * 2, + behavior: "smooth", + }); + } + }; - // Add mouse wheel listener for horizontal scrolling - const handleWheel = (event: WheelEvent) => { - event.preventDefault(); // Prevent default vertical scrolling - if (container) { - container.scrollBy({ - left: event.deltaY * 2, // Translate vertical scroll to horizontal scroll - behavior: "smooth", - }); - } - }; + container.addEventListener("wheel", handleWheel, { passive: false }); - container.addEventListener("scroll", handleScroll); - window.addEventListener("resize", handleResize); - container.addEventListener("wheel", handleWheel, { passive: false }); + // Initial check + updateOverflowState(); - return () => { - container.removeEventListener("scroll", handleScroll); - window.removeEventListener("resize", handleResize); - container.removeEventListener("wheel", handleWheel); - }; - } + return () => { + observer.disconnect(); + container.removeEventListener("scroll", handleScroll); + container.removeEventListener("wheel", handleWheel); + }; }, [updateOverflowState]); // Handle scrolling with navigation arrows const handleScrollLeft = () => { - const container = containerRef.current; + const container = scrollContainerRef.current; if (container) { container.scrollBy({ - left: -200, // Scroll left by 200px + left: -200, behavior: "smooth", }); } }; const handleScrollRight = () => { - const container = containerRef.current; + const container = scrollContainerRef.current; if (container) { container.scrollBy({ - left: 200, // Scroll right by 200px + left: 200, behavior: "smooth", }); } @@ -158,7 +152,6 @@ const DisplayZone: React.FC = ({ } const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; - // Fetch data from backend let response = await getSelect2dZoneData(zoneId, organization); let res = await getFloatingZoneData(zoneId, organization); @@ -171,7 +164,7 @@ const DisplayZone: React.FC = ({ useDroppedObjectsStore.getState().addObject(zoneName, val); }); } - // Update selected zone state + setSelectedZone({ zoneName, activeSides: response.activeSides || [], @@ -182,14 +175,15 @@ const DisplayZone: React.FC = ({ zoneViewPortTarget: response.viewPortCenter || {}, zoneViewPortPosition: response.viewPortposition || {}, }); - } catch (error) { } + } catch (error) { + console.error(error); + } } return (
{/* Left Arrow */} {showLeftArrow && ( @@ -198,28 +192,31 @@ const DisplayZone: React.FC = ({ )} - {/* Zones Wrapper */} - {Object.keys(zonesData).length !== 0 ? ( -
- {Object.keys(zonesData).map((zoneName, index) => ( -
{ - handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName); - }} - > - {zoneName} -
- ))} -
- ) : ( -
- - No zones? Create one! -
- )} + {/* Scrollable Zones Container */} +
+ {Object.keys(zonesData).length !== 0 ? ( + <> + {Object.keys(zonesData).map((zoneName, index) => ( +
handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)} + > + {zoneName} +
+ ))} + + ) : ( +
+ + No zones? Create one! +
+ )} +
{/* Right Arrow */} {showRightArrow && ( diff --git a/app/src/components/ui/componets/DistanceLine.tsx b/app/src/components/ui/componets/DistanceLine.tsx deleted file mode 100644 index 8dec7b1..0000000 --- a/app/src/components/ui/componets/DistanceLine.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React from "react"; - -interface DistanceLinesProps { - obj: { - position: { - top?: number | "auto"; - left?: number | "auto"; - right?: number | "auto"; - bottom?: number | "auto"; - }; - }; - activeEdges: { - vertical: "top" | "bottom"; - horizontal: "left" | "right"; - } | null; -} - -const DistanceLines: React.FC = ({ obj, activeEdges }) => { - if (!activeEdges) return null; - - return ( - <> - {activeEdges.vertical === "top" && typeof obj.position.top === "number" && ( -
- {obj.position.top.toFixed()}px -
- )} - - {activeEdges.vertical === "bottom" && - typeof obj.position.bottom === "number" && ( -
- {obj.position.bottom.toFixed()}px -
- )} - - {activeEdges.horizontal === "left" && - typeof obj.position.left === "number" && ( -
- {obj.position.left.toFixed()}px -
- )} - - {activeEdges.horizontal === "right" && - typeof obj.position.right === "number" && ( -
- {obj.position.right.toFixed()}px -
- )} - - ); -}; - -export default DistanceLines; \ No newline at end of file diff --git a/app/src/components/ui/componets/DistanceLines.tsx b/app/src/components/ui/componets/DistanceLines.tsx index e2ccbc1..62cfd3b 100644 --- a/app/src/components/ui/componets/DistanceLines.tsx +++ b/app/src/components/ui/componets/DistanceLines.tsx @@ -20,26 +20,31 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { return ( <> - {activeEdges.vertical === "top" && typeof obj.position.top === "number" && ( -
- {obj.position.top}px -
- )} + > + + {obj.position.top}px + +
+ )} {activeEdges.vertical === "bottom" && typeof obj.position.bottom === "number" && ( @@ -54,12 +59,16 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { height: `${obj.position.bottom}px`, }} > - {obj.position.bottom}px + > + {obj.position.bottom}px + )} @@ -76,11 +85,16 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { width: `${obj.position.left}px`, }} > - {obj.position.left}px + + {obj.position.left}px + )} @@ -97,15 +111,20 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { width: `${obj.position.right}px`, }} > - {obj.position.right}px + + {obj.position.right}px + )} ); }; -export default DistanceLines; \ No newline at end of file +export default DistanceLines; diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx index d80fd7c..6ee51e3 100644 --- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -395,7 +395,6 @@ const DroppedObjects: React.FC = () => { ) : null} -
- {savedTheme !== "dark" && } + {savedTheme !== "dark" ? : <>} diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index 6adc1c5..e74c0ec 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -58,7 +58,7 @@ --border-color: #{$border-color-dark}; // Border color for dark theme // Shadow variables - --shadow-main-dark: #{$shadow-color-dark}; // Main shadow color + --shadow-main-dark: #{$shadow-color}; // Main shadow color --box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow --box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow --box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow @@ -75,6 +75,7 @@ height: 100vh; // Full viewport height width: 100vw; // Full viewport width overflow: hidden; // Prevent scrollbars + background-color: var(--background-color-gray); } // Root overlay styles @@ -123,7 +124,7 @@ body { /* Scrollbar handle color */ border-radius: 4px; /* Rounded corners */ - border: 2px solid #f4f4f4; + border: 2px solid var(--primary-color); /* Padding around the scrollbar handle */ } diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index 9f6ee48..107ecb1 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -10,6 +10,7 @@ input { border: 1px solid var(--border-color); outline: none; background: transparent; + color: var(--input-text-color); &:focus, &:active { @@ -552,6 +553,11 @@ input { .input-value { width: 40px; text-align: center; + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } } } } diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss index 620d934..8cc367e 100644 --- a/app/src/styles/components/marketPlace/marketPlace.scss +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -26,9 +26,6 @@ width: 100%; height: 100%; overflow: auto; - left: calc(120px / 2); - top: 100px; - padding: 14px; padding-bottom: 60px; display: flex; flex-direction: column; @@ -39,6 +36,8 @@ display: flex; align-items: center; gap: 12px; + margin-top: 2px; + padding: 0 24px; .search-wrapper { min-width: 60%; @@ -143,6 +142,7 @@ .assets-container { display: flex; justify-content: space-between; + padding: 0; .name-container { display: flex; @@ -177,6 +177,9 @@ } .vendor-icon { + display: flex; + align-items: center; + gap: 4px; font-weight: #{$bold-weight}; font-size: $regular; } diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 4c18feb..e4cbcac 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -3,7 +3,7 @@ // Main Container .realTime-viz { - background-color: var(--background-color); + background-color: #131313; border-radius: 20px; box-shadow: $box-shadow-medium; width: calc(100% - (320px + 270px + 90px)); @@ -22,7 +22,7 @@ min-height: 83px; background: var(--background-color); border: 1.23px solid var(--border-color); - box-shadow: var(--box-shadow-heavy); + box-shadow: 0px 4.91px 4.91px 0px #0000001c; border-radius: $border-radius-medium; padding: 18px; position: absolute; @@ -31,7 +31,6 @@ .scene-container { overflow: hidden; - background: #232323; } .icon { @@ -192,11 +191,11 @@ height: 25% !important; min-height: 150px; max-height: 100%; - border: 1px dashed #a9a9a9; + // border: 1px dashed var(--background-color-gray); border-radius: 8px; - box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1); + box-shadow: var(--box-shadow-medium); padding: 6px 0; - background-color: white; + background-color: var(--background-color); position: relative; .kebab { @@ -534,7 +533,7 @@ .zone { padding: 10px; - border: 1px solid #ccc; + border: 1px solid var(--highlight-accent-color); border-radius: 5px; cursor: pointer; } @@ -614,8 +613,6 @@ } } - - .distance-line { position: absolute; border-style: dashed; diff --git a/app/src/styles/pages/userAuth.scss b/app/src/styles/pages/userAuth.scss index 1bf4c7e..6e86ac1 100644 --- a/app/src/styles/pages/userAuth.scss +++ b/app/src/styles/pages/userAuth.scss @@ -69,7 +69,7 @@ } .error-message { - color: #ff4d4f; + color: #f3453f; font-size: 12px; margin-bottom: 10px; } @@ -89,7 +89,7 @@ border-radius: #{$border-radius-extra-large}; background: var(--background-color); font-size: 14px; - color: #333; + color: var(--input-text-color); &:focus { border-color: var(--accent-color); diff --git a/app/src/types/world/worldConstants.ts b/app/src/types/world/worldConstants.ts index 2bc3835..6bd54cb 100644 --- a/app/src/types/world/worldConstants.ts +++ b/app/src/types/world/worldConstants.ts @@ -202,7 +202,7 @@ export const thirdPersonControls: ThirdPersonControls = { maxDistance: 100, // Maximum distance from the target maxPolarAngle: Math.PI / 2 - 0.05, // Maximum polar angle minZoom: 6, // Minimum zoom level - maxZoom: 21, // Maximum zoom level + maxZoom: 100, // Maximum zoom level targetOffset: 20, // Offset of the target from the camera cameraHeight: 30, // Height of the camera leftMouse: 2, // Mouse button for panning diff --git a/app/src/utils/theme.ts b/app/src/utils/theme.ts index 03d2454..1fce2eb 100644 --- a/app/src/utils/theme.ts +++ b/app/src/utils/theme.ts @@ -17,15 +17,3 @@ export function toggleTheme() { document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); } - -// Initialize theme on page load -setTheme(); - -// Example: Call toggleTheme() when a button is clicked -const toggleSwitch: Element | null = document.querySelector('#theme-switch'); - -if (toggleSwitch) { - toggleSwitch.addEventListener('click', toggleTheme); -} else { - console.warn("Theme switch button not found!"); -}