feat: update route widget and leftsidebar in route-preview

src/client/src/styles/RouteWidget.css

@@ -26,15 +26,17 @@
   position: fixed;
   display: inline-flex;
   border-radius: 10px;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset,
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
     /* Внутренняя рамка */ 4px 4px 12px 0 rgba(255, 255, 255, 0.12) inset; /* Ваш существующий внутренний shadow */
   padding: 1px; /* Чтобы контент не прилипал к рамке */
-  background: linear-gradient(
+  background:
+    linear-gradient(
       to bottom right,
       rgba(255, 255, 255, 0.2) 0%,
       rgba(255, 255, 255, 0) 100%
     ),
-    rgba(var(--carrier-main-rgb, 0, 111, 58), 0.4);
+    rgba(179, 165, 152, 0.4);
   backdrop-filter: blur(10px);
   pointer-events: auto;
   z-index: 10000001;

src/pages/Route/route-preview/LeftSidebar.tsx

@@ -24,7 +24,9 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
   useEffect(() => {
     async function fetchCarrierData() {
       if (routeData?.carrier_id) {
-        const carrier = (await authInstance.get(`/carrier/${routeData.carrier_id}`)).data;
+        const carrier = (
+          await authInstance.get(`/carrier/${routeData.carrier_id}`)
+        ).data;
         setCarrierLogo(carrier.logo);
         setCarrierSlogan(carrier.slogan ?? null);
         setCarrierShortName(carrier.short_name ?? null);
@@ -45,6 +47,7 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
     <div
       style={{
         position: "relative",
+        width: 288,
         height: "100%",
         color: "#fff",
       }}
@@ -165,7 +168,11 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
             {carrierLogo && !isMediaIdEmpty(carrierLogo) && (
               <div style={{ width: 170 }}>
                 <MediaViewer
-                  media={{ id: carrierLogo, media_type: 1, filename: "carrier_logo" }}
+                  media={{
+                    id: carrierLogo,
+                    media_type: 1,
+                    filename: "carrier_logo",
+                  }}
                   fullWidth
                 />
               </div>
@@ -190,7 +197,12 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
           <img
             src="/side-menu-photo.png"
             alt=""
-            style={{ width: "100%", marginTop: 32, display: "block", pointerEvents: "none" }}
+            style={{
+              width: "288px",
+              marginTop: 32,
+              display: "block",
+              pointerEvents: "none",
+            }}
           />
         </div>
       </div>

src/pages/Route/route-preview/index.tsx

@@ -54,7 +54,7 @@ export const RoutePreview = () => {
           <Box
             sx={{
               position: "relative",
-              width: isLeftSidebarOpen ? 300 : 0,
+              width: isLeftSidebarOpen ? 288 : 0,
               transition: "width 0.3s ease",
               overflow: "visible",
               height: "100%",
@@ -145,14 +145,14 @@ export const RouteMap = observer(() => {
     ) {
       const coordinates = coordinatesToLocal(
         originalRouteData?.center_latitude,
-        originalRouteData?.center_longitude
+        originalRouteData?.center_longitude,
       );
 
       setTransform(
         coordinates.x,
         coordinates.y,
         originalRouteData?.rotate,
-        originalRouteData?.scale_min
+        originalRouteData?.scale_min,
       );
       setIsSetup(true);
     }

src/pages/Route/route-preview/webgl-prototype/RouteWidget.module.css

@@ -26,15 +26,17 @@
   position: fixed;
   display: inline-flex;
   border-radius: 10px;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset,
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
     /* Внутренняя рамка */ 4px 4px 12px 0 rgba(255, 255, 255, 0.12) inset; /* Ваш существующий внутренний shadow */
   padding: 1px; /* Чтобы контент не прилипал к рамке */
-  background: linear-gradient(
+  background:
+    linear-gradient(
       to bottom right,
       rgba(255, 255, 255, 0.2) 0%,
       rgba(255, 255, 255, 0) 100%
     ),
-    rgba(var(--carrier-main-rgb, 0, 111, 58), 0.4);
+    rgba(179, 165, 152, 0.4);
   backdrop-filter: blur(10px);
   pointer-events: auto;
   z-index: 10000001;