From c8660e610f5fbdbcffdbb9069409b217c94bed46 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Fri, 17 Jan 2025 13:45:41 -0800
Subject: [PATCH] use new icons on right panel

---
 src/editor/components/components/Sidebar.js | 50 +++++++++++++--------
 src/editor/style/index.scss                 | 13 ++++++
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/editor/components/components/Sidebar.js b/src/editor/components/components/Sidebar.js
index 6fa14d175..16edf5704 100644
--- a/src/editor/components/components/Sidebar.js
+++ b/src/editor/components/components/Sidebar.js
@@ -18,7 +18,11 @@ import {
   ManagedStreetIcon,
   AutoIcon,
   ManualIcon,
-  ArrowLeftHookIcon
+  ArrowLeftHookIcon,
+  VideoCameraIcon,
+  GeospatialIcon,
+  LayersIcon,
+  SunIcon
 } from '../../icons';
 import GeoSidebar from './GeoSidebar';
 import EnviroSidebar from './EnviroSidebar';
@@ -39,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;
@@ -119,17 +145,9 @@ export default class Sidebar extends React.Component {
           {this.state.showSideBar ? (
             <>
               <div id="layers-title" onClick={this.toggleRightBar}>
-                <div className={'layersBlock'}>
-                  <div style={{ width: '32px', height: '32px' }}>
-                    {entity.getAttribute('managed-street') ? (
-                      <ManagedStreetIcon
-                        style={{ width: '100%', height: '100%' }}
-                      />
-                    ) : entity.getAttribute('street-segment') ? (
-                      <SegmentIcon style={{ width: '100%', height: '100%' }} />
-                    ) : (
-                      <Object24Icon style={{ width: '100%', height: '100%' }} />
-                    )}
+                <div className="layersBlock">
+                  <div className="icon-container">
+                    {this.getEntityIcon(entity)}
                   </div>
                   <span>{entityName || formattedMixin}</span>
                 </div>
@@ -252,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>
diff --git a/src/editor/style/index.scss b/src/editor/style/index.scss
index e0b935c37..9715f8834 100644
--- a/src/editor/style/index.scss
+++ b/src/editor/style/index.scss
@@ -617,6 +617,19 @@ body.aframe-inspector-opened {
       background-color: variables.$purple-200;
     }
 
+    .icon-container {
+      min-width: 24px;
+      min-height: 24px;
+      display: flex; // This helps with centering
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        min-width: 24px;
+        min-height: 24px;
+      }
+    }
+
     .layersBlock {
       padding-left: 20px;
       display: flex;