replace settings icon with ne solid icon

frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx

@@ -3,6 +3,7 @@ import { shallow } from 'zustand/shallow';
 import './configHandle.scss';
 import useStore from '@/AppBuilder/_stores/store';
 import { findHighestLevelofSelection } from '../Grid/gridUtils';
+import SolidIcon from '@/_ui/Icon/solidIcons/index';
 
 const CONFIG_HANDLE_HEIGHT = 20;
 const BUFFER_HEIGHT = 1;
@@ -73,6 +74,7 @@ export const ConfigHandle = ({
           background:
             visibility === false ? '#c6cad0' : componentType === 'Modal' && isModalOpen ? '#c6cad0' : '#4D72FA',
           border: position === 'bottom' ? '1px solid white' : 'none',
+          color: visibility === false && 'var(--text-placeholder)',
         }}
         className="badge handle-content"
       >
@@ -86,42 +88,42 @@ export const ConfigHandle = ({
           data-cy={`${componentName?.toLowerCase()}-config-handle`}
           className="text-truncate"
         >
-          <img
-            style={{ cursor: 'pointer', marginRight: '5px', verticalAlign: 'middle' }}
-            src="assets/images/icons/settings.svg"
-            width="12"
-            height="12"
-            draggable="false"
-          />
+          {/* Settings Icon */}
+          <span style={{ cursor: 'pointer', marginRight: '5px' }}>
+            <SolidIcon
+              name="settings"
+              width="12"
+              height="12"
+              fill={visibility === false ? 'var(--text-placeholder)' : '#fff'}
+            />
+          </span>
           <span>{componentName}</span>
+          {/* Divider */}
+          <hr
+            style={{
+              marginLeft: '10px',
+              height: '12px',
+              width: '2px',
+              backgroundColor: visibility === false ? 'var(--text-placeholder)' : '#fff',
+              opacity: 0.5,
+            }}
+          />
         </div>
+        {/* Delete Button */}
         {!isMultipleComponentsSelected && !shouldFreeze && (
-          <div className="delete-part">
-            <img
-              style={{ cursor: 'pointer', marginLeft: '5px' }}
-              src="assets/images/icons/inspect.svg"
+          <span
+            style={{ cursor: 'pointer', marginLeft: '5px' }}
+            onClick={() => {
+              deleteComponents([id]);
+            }}
+          >
+            <SolidIcon
+              name="trash"
               width="12"
-              role="button"
               height="12"
-              draggable="false"
-              onClick={() => setComponentToInspect(componentName)}
-              data-cy={`${componentName.toLowerCase()}-inspect-button`}
-              className="config-handle-inspect"
+              fill={visibility === false ? 'var(--text-placeholder)' : '#fff'}
             />
-            <img
-              style={{ cursor: 'pointer', marginLeft: '5px' }}
-              src="assets/images/icons/trash-light.svg"
-              width="12"
-              role="button"
-              height="12"
-              draggable="false"
-              onClick={() => {
-                deleteComponents([id]);
-              }}
-              data-cy={`${componentName.toLowerCase()}-delete-button`}
-              className="delete-icon"
-            />
-          </div>
+          </span>
         )}
       </span>
     </div>

frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx

@@ -52,7 +52,9 @@ const WidgetWrapper = memo(
       height: visibility === false ? '10px' : `${height}px`,
       transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
       WebkitFontSmoothing: 'antialiased',
+      border: visibility === false ? `1px solid var(--border-default)` : 'none',
     };
+
     if (!componentType) return null;
     return (
       <>