From f6a14196401cfa39f55c5844f8fe4b63d9985274 Mon Sep 17 00:00:00 2001
From: vijay <kvijay20204567@gmail.com>
Date: Fri, 29 Nov 2024 15:36:57 +0530
Subject: [PATCH 1/2] updated the instance list icons

---
 .../InstancesEditor/InstancesList/index.js    | 100 ++++++++++--------
 1 file changed, 53 insertions(+), 47 deletions(-)

diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js
index 1111072aa6f8..c1bbc2243aa3 100644
--- a/newIDE/app/src/InstancesEditor/InstancesList/index.js
+++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js
@@ -18,6 +18,8 @@ import { toFixedWithoutTrailingZeros } from '../../Utils/Mathematics';
 import ErrorBoundary from '../../UI/ErrorBoundary';
 import useForceUpdate from '../../Utils/UseForceUpdate';
 import { Column, Line } from '../../UI/Grid';
+import LayersIcon from '../../UI/CustomSvgIcons/Layers';
+import RotateZ from '../../UI/CustomSvgIcons/RotateZ';
 const gd = global.gd;
 
 const minimumWidths = {
@@ -149,36 +151,39 @@ class InstancesList extends Component<Props, State> {
     }
   };
 
-  _renderLockCell = ({
-    rowData: { instance },
-  }: {
-    rowData: RenderedRowInfo,
-  }) => {
-    return (
-      <IconButton
-        size="small"
-        onClick={() => {
-          if (instance.isSealed()) {
-            instance.setSealed(false);
-            instance.setLocked(false);
-            return;
-          }
-          if (instance.isLocked()) {
-            instance.setSealed(true);
-            return;
-          }
-          instance.setLocked(true);
-        }}
-      >
-        {instance.isLocked() && instance.isSealed() ? (
-          <RemoveCircle />
-        ) : instance.isLocked() ? (
-          <Lock />
-        ) : (
-          <LockOpen />
-        )}
-      </IconButton>
-    );
+_renderLockCell = ({
+  rowData: { instance },
+}: {
+  rowData: RenderedRowInfo,
+}) => {
+  return (
+    <IconButton
+      size="small"
+      style={{
+        opacity: instance.isLocked() ? 1 : 0.4, 
+      }}
+      onClick={() => {
+        if (instance.isSealed()) {
+          instance.setSealed(false);
+          instance.setLocked(false);
+          return;
+        }
+        if (instance.isLocked()) {
+          instance.setSealed(true);
+          return;
+        }
+        instance.setLocked(true);
+      }}
+    >
+      {instance.isLocked() && instance.isSealed() ? (
+        <RemoveCircle />
+      ) : instance.isLocked() ? (
+        <Lock />
+      ) : (
+        <LockOpen />
+      )}
+    </IconButton>
+  );
   };
 
   _selectFirstInstance = () => {
@@ -291,19 +296,19 @@ class InstancesList extends Component<Props, State> {
                       width={Math.max(width * 0.35, minimumWidths.objectName)}
                       className={'tableColumn'}
                     />
+                   
                     <RVColumn
-                      label=""
-                      dataKey="locked"
+                      label={<Trans>X</Trans>}
+                      dataKey="x"
                       width={Math.max(
-                        width * 0.05,
+                        width * 0.1,
                         minimumWidths.numberProperty
                       )}
                       className={'tableColumn'}
-                      cellRenderer={this._renderLockCell}
                     />
                     <RVColumn
-                      label={<Trans>X</Trans>}
-                      dataKey="x"
+                      label={<Trans>Y</Trans>}
+                      dataKey="y"
                       width={Math.max(
                         width * 0.1,
                         minimumWidths.numberProperty
@@ -311,16 +316,16 @@ class InstancesList extends Component<Props, State> {
                       className={'tableColumn'}
                     />
                     <RVColumn
-                      label={<Trans>Y</Trans>}
-                      dataKey="y"
+                      label={<Trans>Z Order</Trans>}
+                      dataKey="zOrder"
                       width={Math.max(
                         width * 0.1,
                         minimumWidths.numberProperty
                       )}
                       className={'tableColumn'}
                     />
-                    <RVColumn
-                      label={<Trans>Angle</Trans>}
+                     <RVColumn
+                      label={<Trans><RotateZ></RotateZ></Trans>}
                       dataKey="angle"
                       width={Math.max(
                         width * 0.1,
@@ -329,21 +334,22 @@ class InstancesList extends Component<Props, State> {
                       className={'tableColumn'}
                     />
                     <RVColumn
-                      label={<Trans>Layer</Trans>}
+                      label={<Trans><LayersIcon></LayersIcon></Trans>}
                       dataKey="layer"
-                      width={Math.max(width * 0.2, minimumWidths.layerName)}
+                      width={Math.max(width * 0.1, minimumWidths.layerName)}
                       className={'tableColumn'}
                     />
-                    <RVColumn
-                      label={<Trans>Z Order</Trans>}
-                      dataKey="zOrder"
+                     <RVColumn
+                      label=""
+                      dataKey="locked"
                       width={Math.max(
-                        width * 0.1,
+                        width * 0.05,
                         minimumWidths.numberProperty
                       )}
                       className={'tableColumn'}
+                      cellRenderer={this._renderLockCell}
                     />
-                  </RVTable>
+                  </RVTable>  
                 )}
               </AutoSizer>
             </div>

From 9ca8fb45db272998fca5ad68b088f4746bd6fef9 Mon Sep 17 00:00:00 2001
From: vijay <kvijay20204567@gmail.com>
Date: Fri, 20 Dec 2024 22:14:05 +0530
Subject: [PATCH 2/2] Added secondary color for the not-locked icon

---
 .../InstancesEditor/InstancesList/index.js    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js
index c1bbc2243aa3..9b5597dfd674 100644
--- a/newIDE/app/src/InstancesEditor/InstancesList/index.js
+++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js
@@ -160,7 +160,7 @@ _renderLockCell = ({
     <IconButton
       size="small"
       style={{
-        opacity: instance.isLocked() ? 1 : 0.4, 
+        color: instance.isLocked() ? '#F5F5F7' : '#A6A6AB',
       }}
       onClick={() => {
         if (instance.isSealed()) {
@@ -314,15 +314,6 @@ _renderLockCell = ({
                         minimumWidths.numberProperty
                       )}
                       className={'tableColumn'}
-                    />
-                    <RVColumn
-                      label={<Trans>Z Order</Trans>}
-                      dataKey="zOrder"
-                      width={Math.max(
-                        width * 0.1,
-                        minimumWidths.numberProperty
-                      )}
-                      className={'tableColumn'}
                     />
                      <RVColumn
                       label={<Trans><RotateZ></RotateZ></Trans>}
@@ -338,6 +329,15 @@ _renderLockCell = ({
                       dataKey="layer"
                       width={Math.max(width * 0.1, minimumWidths.layerName)}
                       className={'tableColumn'}
+                    />
+                      <RVColumn
+                      label={<Trans>Z Order</Trans>}
+                      dataKey="zOrder"
+                      width={Math.max(
+                        width * 0.1,
+                        minimumWidths.numberProperty
+                      )}
+                      className={'tableColumn'}
                     />
                      <RVColumn
                       label=""