Style updates

src/editor/components/components/AdvancedComponents.js

@@ -19,9 +19,13 @@ const AdvancedComponents = ({ entity }) => {
 
   return (
     <div className="advanced-components">
-      <Button variant="toolbtn" onClick={toggleAdvanced}>
-        {showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
-      </Button>
+      <div className="details">
+        <div className="propertyRow">
+          <Button variant="toolbtn" onClick={toggleAdvanced}>
+            {showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
+          </Button>
+        </div>
+      </div>
       {showAdvanced &&
         definedComponents.sort().map((key) => (
           <div key={key} className={'details'}>

src/editor/components/components/ComponentsContainer.js

@@ -32,12 +32,12 @@ export default class ComponentsContainer extends React.Component {
     return (
       <div className="components">
         {entity.hasAttribute('data-no-transform') ? (
-          <div>
+          <div className="sidepanelContent">
             <br />
             <p>⚠️ Transformations disabled for this layer.</p>
           </div>
         ) : (
-          <div>
+          <div className="sidepanelContent">
             <CommonComponents entity={entity} />
           </div>
         )}

src/editor/components/components/EnviroSidebar.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import PropertyRow from './PropertyRow';
+
+const EnviroSidebar = ({ entity }) => {
+  const componentName = 'street-environment';
+  // Check if entity and its components exist
+  const component = entity?.components?.[componentName];
+
+  return (
+    <div className="enviro-sidebar">
+      <div className="enviro-controls">
+        <div className="details">
+          {component && component.schema && component.data && (
+            <>
+              <PropertyRow
+                key="preset"
+                name="preset"
+                label="Preset"
+                schema={component.schema['preset']}
+                data={component.data['preset']}
+                componentname={componentName}
+                isSingle={false}
+                entity={entity}
+              />
+              <PropertyRow
+                key="backgroundColor"
+                name="backgroundColor"
+                label="Background Color"
+                schema={component.schema['backgroundColor']}
+                data={component.data['backgroundColor']}
+                componentname={componentName}
+                isSingle={false}
+                entity={entity}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+EnviroSidebar.propTypes = {
+  entity: PropTypes.object.isRequired
+};
+
+export default EnviroSidebar;

src/editor/components/components/Sidebar.js

@@ -18,9 +18,14 @@ import {
   ManagedStreetIcon,
   AutoIcon,
   ManualIcon,
-  ArrowLeftHookIcon
+  ArrowLeftHookIcon,
+  VideoCameraIcon,
+  GeospatialIcon,
+  LayersIcon,
+  SunIcon
 } from '../../icons';
-import GeoSidebar from './GeoSidebar'; // Make sure to create and import this new component
+import GeoSidebar from './GeoSidebar';
+import EnviroSidebar from './EnviroSidebar';
 import IntersectionSidebar from './IntersectionSidebar';
 import StreetSegmentSidebar from './StreetSegmentSidebar';
 import ManagedStreetSidebar from './ManagedStreetSidebar';
@@ -38,6 +43,28 @@ export default class Sidebar extends React.Component {
     };
   }
 
+  getEntityIcon = (entity) => {
+    if (entity.getAttribute('managed-street')) {
+      return <ManagedStreetIcon />;
+    }
+    if (entity.getAttribute('street-segment')) {
+      return <SegmentIcon />;
+    }
+
+    switch (entity.id) {
+      case 'environment':
+        return <SunIcon />;
+      case 'reference-layers':
+        return <GeospatialIcon />;
+      case 'street-container':
+        return <LayersIcon />;
+      case 'cameraRig':
+        return <VideoCameraIcon />;
+      default:
+        return <Object24Icon />;
+    }
+  };
+
   getParentComponentName = (entity) => {
     const componentName = entity.getAttribute('data-parent-component');
     const parentEntity = entity.parentElement;
@@ -118,14 +145,10 @@ export default class Sidebar extends React.Component {
           {this.state.showSideBar ? (
             <>
               <div id="layers-title" onClick={this.toggleRightBar}>
-                <div className={'layersBlock'}>
-                  {entity.getAttribute('managed-street') ? (
-                    <ManagedStreetIcon />
-                  ) : entity.getAttribute('street-segment') ? (
-                    <SegmentIcon />
-                  ) : (
-                    <Object24Icon />
-                  )}
+                <div className="layersBlock">
+                  <div className="icon-container">
+                    {this.getEntityIcon(entity)}
+                  </div>
                   <span>{entityName || formattedMixin}</span>
                 </div>
                 <div id="toggle-rightbar">
@@ -134,10 +157,11 @@ export default class Sidebar extends React.Component {
               </div>
               <div className="scroll">
                 {entity.id !== 'reference-layers' &&
+                entity.id !== 'environment' &&
                 !entity.getAttribute('street-segment') ? (
                   <>
                     {entity.classList.contains('autocreated') && (
-                      <>
+                      <div className="sidepanelContent">
                         <div className="flex items-center gap-2">
                           <div className="scale-[0.8] transform">
                             <AutoIcon />
@@ -172,36 +196,41 @@ export default class Sidebar extends React.Component {
                             Convert to Manual
                           </Button>
                         </div>
-                      </>
-                    )}
-                    {!!entity.mixinEls.length &&
-                      !entity.classList.contains('autocreated') && (
-                        <Mixins entity={entity} />
-                      )}
-                    {entity.hasAttribute('data-no-transform') ? (
-                      <></>
-                    ) : (
-                      <div id="sidebar-buttons">
-                        <Button
-                          variant={'toolbtn'}
-                          onClick={() => renameEntity(entity)}
-                        >
-                          Rename
-                        </Button>
-                        <Button
-                          variant={'toolbtn'}
-                          onClick={() => cloneEntity(entity)}
-                        >
-                          Duplicate
-                        </Button>
-                        <Button
-                          variant={'toolbtn'}
-                          onClick={() => removeSelectedEntity()}
-                        >
-                          Delete
-                        </Button>
                       </div>
                     )}
+                    <div className="sidepanelContent">
+                      {!!entity.mixinEls.length &&
+                        !entity.classList.contains('autocreated') && (
+                          <div className="details">
+                            <Mixins entity={entity} />
+                          </div>
+                        )}
+                      {entity.hasAttribute('data-no-transform') ? (
+                        <></>
+                      ) : (
+                        <div id="sidebar-buttons">
+                          <Button
+                            variant={'toolbtn'}
+                            onClick={() => renameEntity(entity)}
+                          >
+                            Rename
+                          </Button>
+                          <Button
+                            variant={'toolbtn'}
+                            onClick={() => cloneEntity(entity)}
+                          >
+                            Duplicate
+                          </Button>
+                          <Button
+                            variant={'toolbtn'}
+                            onClick={() => removeSelectedEntity()}
+                          >
+                            Delete
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+
                     {entity.getAttribute('intersection') && (
                       <IntersectionSidebar entity={entity} />
                     )}
@@ -223,6 +252,9 @@ export default class Sidebar extends React.Component {
                     {entity.id === 'reference-layers' && (
                       <GeoSidebar entity={entity} />
                     )}
+                    {entity.id === 'environment' && (
+                      <EnviroSidebar entity={entity} />
+                    )}
                   </>
                 )}
               </div>
@@ -238,13 +270,7 @@ export default class Sidebar extends React.Component {
                     {entityName || formattedMixin}
                   </span>
                   <div className="relative z-10">
-                    {entity.getAttribute('managed-street') ? (
-                      <ManagedStreetIcon />
-                    ) : entity.getAttribute('street-segment') ? (
-                      <SegmentIcon />
-                    ) : (
-                      <Object24Icon />
-                    )}
+                    {this.getEntityIcon(entity)}
                   </div>
                 </div>
               </div>

src/editor/components/components/StreetSegmentSidebar.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import PropertyRow from './PropertyRow';
+import { StreetSurfaceIcon } from '../../icons';
 
 const StreetSegmentSidebar = ({ entity }) => {
   const componentName = 'street-segment';
@@ -42,39 +43,51 @@ const StreetSegmentSidebar = ({ entity }) => {
                 isSingle={false}
                 entity={entity}
               />
-              <div className="propertyRow">
-                <div className="text">-----</div>
+              {/* props for street-segment but formatted as a fake 'surface' component */}
+              <div className="collapsible component">
+                <div className="static">
+                  <div className="componentHeader collapsible-header">
+                    <span className="componentTitle" title="Surface">
+                      <StreetSurfaceIcon />
+                      <span>Surface</span>
+                    </span>
+                  </div>
+                </div>
+                <div className="content">
+                  <div className="collapsible-content">
+                    <PropertyRow
+                      key="surface"
+                      name="surface"
+                      label="Surface"
+                      schema={component.schema['surface']}
+                      data={component.data['surface']}
+                      componentname={componentName}
+                      isSingle={false}
+                      entity={entity}
+                    />
+                    <PropertyRow
+                      key="color"
+                      name="color"
+                      label="Color"
+                      schema={component.schema['color']}
+                      data={component.data['color']}
+                      componentname={componentName}
+                      isSingle={false}
+                      entity={entity}
+                    />
+                    <PropertyRow
+                      key="level"
+                      name="level"
+                      label="Curb Level"
+                      schema={component.schema['level']}
+                      data={component.data['level']}
+                      componentname={componentName}
+                      isSingle={false}
+                      entity={entity}
+                    />
+                  </div>
+                </div>
               </div>
-              <PropertyRow
-                key="surface"
-                name="surface"
-                label="Surface"
-                schema={component.schema['surface']}
-                data={component.data['surface']}
-                componentname={componentName}
-                isSingle={false}
-                entity={entity}
-              />
-              <PropertyRow
-                key="color"
-                name="color"
-                label="Color"
-                schema={component.schema['color']}
-                data={component.data['color']}
-                componentname={componentName}
-                isSingle={false}
-                entity={entity}
-              />
-              <PropertyRow
-                key="level"
-                name="level"
-                label="Curb Level"
-                schema={component.schema['level']}
-                data={component.data['level']}
-                componentname={componentName}
-                isSingle={false}
-                entity={entity}
-              />
             </>
           )}
         </div>