refactor: update loading styles and introduce faint gradient variables

app/src/components/layout/sidebarRight/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { AppDockIcon } from "../../icons/HeaderIcons";
 import orgImg from "../../../assets/orgTemp.png";
 import { useActiveUsers } from "../../../store/store";
@@ -14,6 +14,10 @@ const Header: React.FC = () => {
     (user: ActiveUser) => user.userName !== userName
   );
 
+  useEffect(() => {
+    console.log(activeUsers);
+  }, [])
+  
   const [userManagement, setUserManagement] = useState(false);
 
   return (

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -13,7 +13,6 @@ import { useAsset3dWidget, useZones } from "../../../store/store";
 import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
 import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
 
-
 type Side = "top" | "bottom" | "left" | "right";
 
 type FormattedZoneData = Record<
@@ -25,7 +24,7 @@ type FormattedZoneData = Record<
     lockedPanels: Side[];
     zoneId: string;
     zoneViewPortTarget: number[];
-    zoneViewPortPosition: number[]
+    zoneViewPortPosition: number[];
     widgets: Widget[];
   }
 >;
@@ -45,8 +44,10 @@ const RealTimeVisulization: React.FC = () => {
   const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-  const { zones } = useZones()
-  const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
+  const { zones } = useZones();
+  const [floatingWidgets, setFloatingWidgets] = useState<
+    Record<string, { zoneName: string; zoneId: string; objects: any[] }>
+  >({});
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   useEffect(() => {
     async function GetZoneData() {
@@ -57,7 +58,8 @@ const RealTimeVisulization: React.FC = () => {
         if (!Array.isArray(response)) {
           return;
         }
-        const formattedData = response.reduce<FormattedZoneData>((acc, zone) => {
+        const formattedData = response.reduce<FormattedZoneData>(
+          (acc, zone) => {
             acc[zone.zoneName] = {
               activeSides: [],
               panelOrder: [],
@@ -68,17 +70,18 @@ const RealTimeVisulization: React.FC = () => {
               widgets: [],
             };
             return acc;
-        }, {});
+          },
+          {}
+        );
         setZonesData(formattedData);
       } catch (error) {
-        console.log('error: ', error);
+        console.log("error: ", error);
       }
     }
 
     GetZoneData();
   }, []); // Removed `zones` from dependencies
 
-
   useEffect(() => {
     setZonesData((prev) => {
       if (!selectedZone) return prev;
@@ -98,9 +101,7 @@ const RealTimeVisulization: React.FC = () => {
     });
   }, [selectedZone]);
 
-  useEffect(() => {
-
-  }, [floatingWidgets])
+  useEffect(() => {}, [floatingWidgets]);
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -121,24 +122,31 @@ const RealTimeVisulization: React.FC = () => {
       position: [relativeY, relativeX], // Y first because of top/left style
     };
     // Only set zone if it’s not already in the store (prevents overwriting objects)
-    const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+    const existingZone =
+      useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
     if (!existingZone) {
-      useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
+      useDroppedObjectsStore
+        .getState()
+        .setZone(selectedZone.zoneName, selectedZone.zoneId);
     }
     // Add the dropped object to the zone
-    useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
+    useDroppedObjectsStore
+      .getState()
+      .addObject(selectedZone.zoneName, newObject);
     setFloatingWidgets((prevWidgets) => ({
       ...prevWidgets,
       [selectedZone.zoneName]: {
         ...prevWidgets[selectedZone.zoneName],
         zoneName: selectedZone.zoneName,
         zoneId: selectedZone.zoneId,
-        objects: [...(prevWidgets[selectedZone.zoneName]?.objects || []), newObject],
+        objects: [
+          ...(prevWidgets[selectedZone.zoneName]?.objects || []),
+          newObject,
+        ],
       },
     }));
   };
 
-
   return (
     <div
       ref={containerRef}
@@ -149,7 +157,6 @@ const RealTimeVisulization: React.FC = () => {
         width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
         left: isPlaying || activeModule !== "visualization" ? "0%" : "",
       }}
-
     >
       <div
         className="scene-container"
@@ -162,8 +169,7 @@ const RealTimeVisulization: React.FC = () => {
         onDrop={(event) => handleDrop(event)}
         onDragOver={(event) => event.preventDefault()}
       >
-
-
+        <Scene />
       </div>
       <DroppedObjects />
       {activeModule === "visualization" && (

app/src/modules/collaboration/collabCams.tsx

@@ -147,6 +147,7 @@ const CamModelsGroup = () => {
       const filteredData = data.cameraDatas.filter(
         (camera: any) => camera.userData.email !== email
       );
+      let a:any = [];
       if (filteredData.length > 0) {
         loader.load(camModel, (gltf) => {
           const newCams = filteredData.map((cam: any) => {
@@ -163,11 +164,10 @@ const CamModelsGroup = () => {
               cam.rotation.z
             );
             newModel.userData = cam.userData;
-            if (!activeUsers.includes(cam.userData)) {
-              setActiveUsers([...activeUsers, cam.userData]);
-            }
+            a.push(cam.userData);
             return newModel;
           });
+          setActiveUsers(a);
           setCams((prev) => [...prev, ...newCams]);
         });
       }

app/src/styles/abstracts/variables.scss

@@ -58,6 +58,9 @@ $acent-gradient: linear-gradient(
   #925df3 100%
 ); // Light mode accent gradient
 
+$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
+$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
+
 // ========================================================================
 // Typography
 // ========================================================================

app/src/styles/base/base.scss

@@ -12,6 +12,7 @@
   --accent-color: #{$accent-color}; // Primary accent color for light theme
   --highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme
   --accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme
+  --faint-gradient-color: #{$faint-gradient};
 
   // Background colors
   --background-color: #{$background-color}; // Main background color
@@ -46,6 +47,7 @@
   --accent-color: #{$accent-color-dark}; // Primary accent color for dark theme
   --highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme
   --accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme
+  --faint-gradient-color: #{$faint-gradient-dark};
 
   // Background colors
   --background-color: #{$background-color-dark}; // Main background color
@@ -84,7 +86,6 @@
 }
 
 body {
-
   background: var(--background-color);
 
   /* Font Sizes */

app/src/styles/components/menu/menu.scss

@@ -8,7 +8,6 @@
   color: var(--text-color);
   box-shadow: var(--box-shadow-light);
   border-radius: 8px;
-
   .menu-buttons {
     display: flex;
     flex-direction: column;
@@ -120,10 +119,9 @@
       }
     }
   }
-}
-
   .split {
     width: 100%;
     height: 1px;
-    background-color: #E0DFFF;
+    background-color: #e0dfff;
+  }
 }

app/src/styles/layout/loading.scss

@@ -18,12 +18,7 @@
     &::after {
       content: "";
       position: absolute;
-      background: radial-gradient(
-        circle,
-        #bfe0f8 0%,
-        #e9ebff 46%,
-        #e2acff 100%
-      );
+      background: var(--faint-gradient-color);
       height: 50vh;
       width: 50vw;
       top: 0;

app/src/styles/pages/userAuth.scss

@@ -10,7 +10,6 @@
   color: var(--text-color);
   height: 100vh;
   background-color: var(--background-color);
-  background-color: #fcfdfd;
   position: relative;
   z-index: 1;
   .logo-icon {
@@ -168,12 +167,7 @@
     &::after {
       content: "";
       position: absolute;
-      background: radial-gradient(
-        circle,
-        #bfe0f8 0%,
-        #e9ebff 46%,
-        #e2acff 100%
-      );
+      background: var(--faint-gradient-color);
       height: 50vh;
       width: 50vw;
       top: 0;