Feature: Highlight selected component

Author: Navaneeth-pk

frontend/src/Editor/Container.jsx

@@ -29,7 +29,8 @@ export const Container = ({
   currentLayout,
   removeComponent,
   deviceWindowWidth,
-  scaleValue
+  scaleValue,
+  selectedComponent
 }) => {
 
   const styles = {
@@ -276,6 +277,7 @@ export const Container = ({
             currentLayout={currentLayout}
             scaleValue={scaleValue}
             deviceWindowWidth={deviceWindowWidth}
+            isSelectedComponent={selectedComponent? selectedComponent.id === key : false}
             containerProps={{
               mode,
               snapToGrid,
@@ -292,7 +294,8 @@ export const Container = ({
               removeComponent,
               currentLayout,
               scaleValue,
-              deviceWindowWidth
+              deviceWindowWidth,
+              selectedComponent
             }}
           />
         }

frontend/src/Editor/DraggableBox.jsx

@@ -70,7 +70,8 @@ export const DraggableBox = function DraggableBox({
   currentLayout,
   layouts,
   scaleValue,
-  deviceWindowWidth
+  deviceWindowWidth,
+  isSelectedComponent
 }) {
   const [isResizing, setResizing] = useState(false);
   const [canDrag, setCanDrag] = useState(true);
@@ -168,7 +169,7 @@ export const DraggableBox = function DraggableBox({
             size={{ width: scaleWidth(currentLayoutOptions.width, scaleValue) + 6,  height: currentLayoutOptions.height + 6}}
             position={{ x: currentLayoutOptions ? currentLayoutOptions.left : 0, y: currentLayoutOptions ? currentLayoutOptions.top : 0 }}
             defaultSize={{}}
-            className={`resizer ${mouseOver ? 'resizer-active' : ''}`}
+            className={`resizer ${isSelectedComponent && !mouseOver ? 'resizer-selected' : ''} ${mouseOver ? 'resizer-active' : ''} `}
             onResize={() => setResizing(true)}
             resizeHandleClasses={mouseOver ? resizerClasses : {}}
             resizeHandleStyles={resizerStyles}

frontend/src/Editor/Editor.jsx

@@ -666,6 +666,7 @@ class Editor extends React.Component {
                     zoomLevel={zoomLevel}
                     currentLayout={currentLayout}
                     deviceWindowWidth={deviceWindowWidth}
+                    selectedComponent={selectedComponent || {}}
                     scaleValue={scaleValue}
                     appLoading={isLoading}
                     onEvent={(eventName, options) => onEvent(this, eventName, options)}

frontend/src/_styles/theme.scss

@@ -22,6 +22,12 @@ body {
     }
   }
 
+  .resizer-selected { 
+    outline-width: thin;
+    outline-style: solid;
+    outline-color: #ffda7e;
+  }
+
   .query-manager {
     .btn {
       height: 31px;